parade update.

src/pages/parade.html

@@ -56,9 +56,10 @@
          fr = 20;
        }
        frameRate(fr);
-       //
-       silence = (await AudioImport("./audio/_silence.wav")).toDestination();
-       clap = (await AudioImport("./audio/clap01.mp3")).toDestination();
+
+       //p5 'draw()' doesn't work if user is not looking at the tab.
+       noLoop();
+       // --> use custom looper.
      }
 
      //
@@ -66,9 +67,12 @@
      var intro;
      var ready;
      //
-     socket.on("connect", function() {
+     socket.on("connect", async function() {
        console.log("connected!");
+
        //
+       silence = (await AudioImport("./audio/_silence.wav")).toDestination();
+       clap = (await AudioImport("./audio/clap01.mp3")).toDestination();
 
        //TESTING... fixed to room 1.
        // myroom = 1;
@@ -127,8 +131,8 @@
        }
      });
 
-     var fading_factor = 0.3; //30%
-     //var fading_factor = 0.5; //50%
+     //var fading_factor = 0.3; //30%
+     var fading_factor = 0.5; //50%
      socket.on("post", async function(post) {
 
        console.log(post);
@@ -159,7 +163,7 @@
        var img = createImg(object.src, object.alt, "", async function(im) {
          //로딩이 끝나면, start!
          var pv = new Tone.PanVol(0, -99).toDestination();
-         var snd = (await AudioImport(object.audio));
+         var snd = await AudioImport(object.audio); // NOTE: url with spaces didn't work here.
          snd.connect(pv).start();
          snd.loop = true;
 
@@ -222,7 +226,13 @@
 
      });
 
-     function draw() {
+     //p5 'draw()' doesn't work if user is not looking at the tab.
+     // --> custom looper is ok.
+     var looper;
+     (looper = function(timeout) {
+       setTimeout(async function() {
+
+         //
          for (var i = arr.length - 1; i >= 0; i -= 1) {
            var bundle = arr[i];
            var img = bundle.img;
@@ -256,12 +266,12 @@
                range = windowWidth * fading_factor
                knob = x - windowWidth;
                pv.pan.value = 1;
-             pv.volume.value = (1 - (knob / range)) * 99;
+               pv.volume.value = knob / range * -20;
              } else if (x < -bundle.width) {
                range = windowWidth * fading_factor
                knob = (x + bundle.width) * -1;
                pv.pan.value = -1;
-             pv.volume.value = (1 - (knob / range)) * 99;
+               pv.volume.value = knob / range * -20;
              }
            }
 
@@ -275,7 +285,11 @@
              arr.splice(i, 1);
            }
          }
-     }
+         //
+
+         looper(1000/fr);
+       }, timeout);
+     })(1000/fr);
 
      // function randomvoiceplay() {
      //   (looper = function(timeout) {