Fix sound demos

doc22940 · Apr 15, 2019 · 1f41470 · 1f41470
1 parent ad48faf
commit 1f41470
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 18 deletions.
diff --git a/demo/sound.freqDomain.js b/demo/sound.freqDomain.js
@@ -9,22 +9,27 @@ Pts.quickStart( "#pt", "#fe3" );
 
 (function() {
 
-  var sound = Sound.load( "/assets/spacetravel.mp3" ).analyze(bins);
+  // load sound
+  var sound;
+  Sound.load( "/assets/spacetravel.mp3" ).then( s => {
+    sound = s.analyze(bins);
+  }).catch( e => console.error(e) );
+
   var bins = 256;
   var ctrls, radius;
   var colors = ["#f06", "#62e", "#fff", "#fe3", "#0c9"];
 
   // Draw play button
   function playButton() {
-    form.fillOnly( sound.playing ? "rgba(0,0,0,.2)" : "#f06").rect( [[0,0], [50,50]] );
-    if (!sound.playing) {
+    if (!sound || !sound.playing) {
+      form.fillOnly("#f06").rect( [[0,0], [50,50]] );
       form.fillOnly('#fff').polygon( Triangle.fromCenter( [25,25], 10 ).rotate2D( Const.half_pi, [25,25] ) );
     } else {
+      form.fillOnly("rgba(0,0,0,.2)").rect( [[0,0], [50,50]] );
       form.fillOnly("#fff").rect( [[18, 18], [32,32]] );
     }
   }
 
-
   function getCtrlPoints( t ) {
     let r = radius + radius * ( Num.cycle( t%3000/3000 ) * 0.2);
     let temp = ctrls.clone();
@@ -91,11 +96,10 @@ Pts.quickStart( "#pt", "#fe3" );
             temp.push( spikes[i] );
             tris.push( temp );
           }
-
+          
           tindex = (i+1) % 3;
         }
 
-
         // draw spikes
         let f_scale = f_acc/bins;
         for (let i=0, len=tris.length; i<len; i++) {
@@ -115,7 +119,6 @@ Pts.quickStart( "#pt", "#fe3" );
           form.strokeOnly( "#123", 2 ).line( t2 );
         }
 
-
         // draw eyes        
         let eyeRight = center.clone().toAngle( -Const.quarter_pi-0.2, radius/2, true );
         let eyeLeft = center.clone().toAngle( -Const.quarter_pi-Const.half_pi+0.2, radius/2, true );
@@ -128,7 +131,6 @@ Pts.quickStart( "#pt", "#fe3" );
       }
 
       playButton();
-
     },
 
     action: (type, x, y) => {

diff --git a/demo/sound.timeDomain.js b/demo/sound.timeDomain.js
@@ -11,32 +11,33 @@ Pts.quickStart( "#pt", "#eae6ef" );
 
   var files = ["/assets/flute.mp3", "/assets/drum.mp3", "/assets/tambourine.mp3"];
   var currFile = 0;
+  var bins = 512;
   var sound;
 
   // Load next sound file
-  function nextSound() {
-    sound = Sound.load( files[currFile] ).analyze(512); 
-    currFile = (currFile + 1) % files.length;
+  function nextSound( play=true ) {
+    Sound.load( files[currFile] ).then( s => {
+      sound = s.analyze( bins ).start();
+      currFile = (currFile + 1) % files.length;
+    }).catch( e => console.error(e) );
   }
 
   // Draw play button
   function playButton( size ) {
-    if (!sound) return;
-    if (!sound.playing) {
+    if (!sound || !sound.playing) {
       form.fillOnly('rgba(0,0,0,.2)').circle( Circle.fromCenter( space.center, size ) );
       form.fillOnly('#fff').polygon( Triangle.fromCenter( space.center, size/2 ).rotate2D( Const.half_pi, space.center ) );
     }
   }
 
-  nextSound();
-
   space.add({ 
     animate: (time, ftime) => {
       if (sound && sound.playable) {
 
         // map time domain data to lines drawing two half circles
+        let r = Math.min( space.size.x, space.size.y/0.9 );
         let tdata = sound.timeDomainTo( [Const.two_pi, 1] ).map( (t, i) => {
-          let ln = Line.fromAngle( [ (i>256 ? space.size.x : 0), space.center.y ], t.x-Const.half_pi, space.size.y/0.9 );
+          let ln = Line.fromAngle( [ (i>bins/2 ? space.size.x : 0), space.center.y ], t.x-Const.half_pi, r );
           return [ ln.p1, ln.interpolate( t.y ) ]
         });
 
@@ -51,8 +52,7 @@ Pts.quickStart( "#pt", "#eae6ef" );
 
     action: (type, x, y) => {
       if (type === "up") {
-        if (!sound.playing) nextSound();
-        sound.toggle();
+        if (!sound || !sound.playing) nextSound();
       }
     }
   });