First modulation example

docs/assets/css/styles.css

@@ -12,15 +12,30 @@ p, li {
     padding: 6px 6px;
 }
 
+.stop_button {
+    height: 1.2rem;
+    padding: 6px 6px;
+}
+
 .soundwave {
     height: 1.0rem;
     visibility: hidden;
 }
 
+.soundwave_vspace {
+    height: 1.0rem;
+    margin: 0.4rem;
+    visibility: hidden;
+}
+
 .centered_th {
     text-align: center;
 }
 
+tr.no-bottom-border td {
+    border-bottom: none
+}
+
 .bestresult {
     background-color:rgb(241, 241, 241);
     font-weight: bold;

docs/assets/js/listen.js

@@ -125,7 +125,7 @@ audio_static_filenames = [
 Howler.autoSuspend = false;
 HowlerGlobal.autoSuspend = false;
 
-__debug_prints = true;
+__debug_prints = false;
 
 // Sounds - "Automatic caching for improved performance"
 let sounds = [];  // 1st dim: sequence (we may have only 1); 2nd dim: actual audio filename
@@ -260,3 +260,68 @@ function onPlayABSequenceButtonClicked(seq_index) {  // Play A (start sample), t
     playSound(seq_index, 0);  // on Sound Ends will handle the following sounds
 }
 
+
+
+
+
+// ==============================================================================
+// ================== Single (isolated) samples: play and stop ==================
+
+single_sounds_filenames = [
+    'assets/latent_variations/018765_sigma2.0/original.mp3',
+    'assets/latent_variations/018765_sigma2.0/variations.mp3',
+    'assets/latent_variations/018765_sigma3.0/variations.mp3',
+]
+
+// Sounds - "Automatic caching for improved performance"
+let single_sounds = [];  // 1st dim: sequence (we may have only 1); 2nd dim: actual audio filename
+for (const [__index, audio_filename] of single_sounds_filenames.entries()) {
+    single_sounds.push(new Howl({
+        src: [audio_filename],
+        onload: function() {
+            if (__debug_prints)
+                console.log("Single sound # " + __index + " : " + audio_filename + " loaded.");
+        },
+        onloaderror: function(sound_ID, error_code) {
+            console.log("SOUND LOAD ERROR id = " + sound_ID + '   code = ' + error_code);
+        },
+        onplayerror: function(sound_ID, error_code) {
+            console.log("SOUND PLAY ERROR id = " + sound_ID + '   code = ' + error_code);
+        },
+        onend: function() { onSingleSoundEnds(__index); },  // NOT called when forced to stop
+    }));
+    // Cannot register this callback during construction...
+    //single_sounds[__index].on('end', function() { console.log("END CALLBACK"); onSingleSoundEnds(__index); });
+}
+
+/*
+for (const [__index, sound] of single_sounds.entries()) {
+    sound.on('end', function () {
+        onSingleSoundEnds(__index)  // TODO register callbacks during construction of Howl objects
+    });
+}
+*/
+
+function onSingleSoundEnds(sound_index) {
+    if (__debug_prints)
+        console.log("Single sound #" + sound_index + " had ended.")
+    // Hide waveform
+    document.getElementById("singleWave" + sound_index).style.visibility = 'hidden';
+}
+
+function onPlaySingleSound(sound_index) {
+    if (__debug_prints)
+        console.log("Playing single sound #" + sound_index);
+
+    single_sounds[sound_index].play();
+    document.getElementById("singleWave" + sound_index).style.visibility = 'visible';
+}
+
+function onStopSingleSound(sound_index) {
+    if (__debug_prints)
+        console.log("Stopping single sound #" + sound_index);
+
+    single_sounds[sound_index].stop();
+    onSingleSoundEnds(sound_index);  // this callback is not auto-called when sound if stopped "by hand"
+}
+

docs/index.markdown

@@ -19,6 +19,11 @@ classes: wide
 TASLP submission, supplemental material. 
 Work in progress.
 
+Contents:
+- <a href="#interpolation-between-presets">Interpolation between presets</a>
+- <a href="#spinvae-2-extrapolations">Extrapolation</a>
+- <a href="#presets-modulation">Presets modulation</a>
+
 ---
 
 # Interpolation between presets
@@ -597,6 +602,9 @@ Work in progress.
 
 ---
 
+---
+
+
 # SPINVAE-2 Extrapolations
 
 ### Extrapolation example 1
@@ -785,3 +793,90 @@ Work in progress.
     </table>
 </div>
 
+
+
+---
+---
+
+
+# Presets Modulation
+
+<script type="text/x-mathjax-config">
+  MathJax.Hub.Config({
+    jax: ["input/TeX", "output/HTML-CSS"],
+    tex2jax: {
+      inlineMath: [ ['$', '$'], ["\\(", "\\)"] ],
+      displayMath: [ ['$$', '$$'], ["\\[", "\\]"] ],
+      processEscapes: true,
+      skipTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code']
+    }
+    //,
+    //displayAlign: "left",
+    //displayIndent: "2em"
+  });
+</script>
+<script type="text/javascript" async
+  src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.7/latest.js?config=TeX-MML-AM_CHTML">
+</script>
+
+Under the Variational Auto-Encoder (VAE) framework, a preset $$\mathbf{u}$$ can be encoded as a Gaussian distribution $$ q \left( \mathbf{z} \mid \mathbf{u} \right) $$ in the latent space, where $$\mathbf{z}$$ denotes a latent vector.
+The distribution is defined as $$ q \left( \mathbf{z} \mid \mathbf{u} \right) = \mathcal{N} \left( \mathbf{z} ; \mu, \sigma^2 \right) $$ where $$\mu, \sigma$$ are output vectors from the Transformer encoder.
+
+New presets, similar to the original $$\mathbf{u}$$, can be obtained by sampling some latent vectors $$ \mathbf{z} \sim q \left( \mathbf{z} \mid \mathbf{u} \right) $$ then decoding them into presets.
+This is a form of modulation, which can be used to make a preset slightly evolve over time and sound more dynamic.
+
+In order to obtain more creative presets, standard deviations of the Gaussian distribution can be artificially increased.
+Examples presented below use standard deviations of $$ 2 \sigma $$ and $$ 3 \sigma $$, where $$ \sigma $$ is  computed from the original preset $$ \mathbf{u} $$.
+
+### Modulation example 1
+
+
+<div class="figure">
+    <table>
+        <tr class="no-bottom-border">
+            <th colspan="2" class="no-bottom-border">Original preset "CP-70" (no modulation)</th>
+        </tr>
+        <tr>
+            <td>
+                <button type="button" onclick="onPlaySingleSound(0);">
+                    <img src="assets/svg/play.svg" class="play_button"/>
+                </button> <br>
+                <img src="assets/svg/soundwave.svg" id="singleWave0" class="soundwave_vspace"/> <br>
+                <button type="button" onclick="onStopSingleSound(0);">
+                    <img src="assets/svg/stop.svg" class="stop_button"/>
+                </button>
+            </td>
+            <td><img src="assets/latent_variations/018765_sigma2.0/original.png"/></td>
+        </tr>
+        <tr class="no-bottom-border">
+            <th colspan="2" class="no-bottom-border"><br>Modulation, 2&sigma; standard deviation</th>
+        </tr>
+        <tr>
+            <td>
+                <button type="button" onclick="onPlaySingleSound(1);">
+                    <img src="assets/svg/play.svg" class="play_button"/>
+                </button> <br>
+                <img src="assets/svg/soundwave.svg" id="singleWave1" class="soundwave_vspace"/> <br>
+                <button type="button" onclick="onStopSingleSound(1);">
+                    <img src="assets/svg/stop.svg" class="stop_button"/>
+                </button>
+            </td>
+            <td><img src="assets/latent_variations/018765_sigma2.0/variations.png"/></td>
+        </tr>
+        <tr class="no-bottom-border">
+            <th colspan="2" class="no-bottom-border"><br>Modulation, 3&sigma; standard deviation</th>
+        </tr>
+        <tr>
+            <td>
+                <button type="button" onclick="onPlaySingleSound(2);">
+                    <img src="assets/svg/play.svg" class="play_button"/>
+                </button> <br>
+                <img src="assets/svg/soundwave.svg" id="singleWave2" class="soundwave_vspace"/> <br>
+                <button type="button" onclick="onStopSingleSound(2);">
+                    <img src="assets/svg/stop.svg" class="stop_button"/>
+                </button>
+            </td>
+            <td><img src="assets/latent_variations/018765_sigma3.0/variations.png"/></td>
+        </tr>
+    </table>
+</div>