fix Safari support in sound demos

doc22940 · May 3, 2019 · 84573c5 · 84573c5
1 parent ec621bd
commit 84573c5
Show file tree

Hide file tree

Showing 6 changed files with 109 additions and 52 deletions.
diff --git a/demo/guide.sound_simple.js b/demo/guide.sound_simple.js
@@ -9,8 +9,8 @@ window.demoDescription = " Sound play and analyze. Music snippet taken from Spac
 
   Pts.quickStart( "#pt", "#e2e6ef" );
 
-  // Note: use Sound.loadAsBuffer instead if you need support for Safari browser. (as of Apr 2019)
-  // See this example: https://github.com/williamngan/pts/blob/master/guide/js/examples/sound_simple.js
+  // Note: use Sound.loadAsBuffer instead if you need support for Safari/iOS browser. (as of Apr 2019)
+  // See this example: http://ptsjs.org/demo/edit/?name=sound.analyze
 
   var sound;
   var bins = 256;

diff --git a/demo/guide.sound_time.js b/demo/guide.sound_time.js
@@ -14,8 +14,8 @@ window.demoDescription = "Demo in Sound guide.";
   var bins = 256; // try change this (must be a power of 2^)
   var sound;
 
-  // Note: use Sound.loadAsBuffer instead if you need support for Safari browser. (as of Apr 2019)
-  // See this example: https://github.com/williamngan/pts/blob/master/guide/js/examples/sound_frequency.js
+  // Note: use Sound.loadAsBuffer instead if you need support for Safari/iOS browser. (as of Apr 2019)
+  // See this example: http://ptsjs.org/demo/edit/?name=sound.timeDomain
   function loadSound() {
     Sound.load( files[currFile] ).then( s => {
       sound = s.analyze(bins).start();

diff --git a/demo/guide.sound_visual.js b/demo/guide.sound_visual.js
@@ -9,8 +9,8 @@ window.demoDescription = "A silly and elaborate character that responds to sound
 
   Pts.quickStart( "#pt", "#e2e6ef" );
 
-  // Note: use Sound.loadAsBuffer instead if you need support for Safari browser. (as of Apr 2019)
-  // See this example: https://github.com/williamngan/pts/blob/master/guide/js/examples/sound_visual.js
+  // Note: use Sound.loadAsBuffer instead if you need support for Safari/iOS browser. (as of Apr 2019)
+  // See this example: http://ptsjs.org/demo/edit/?name=sound.freqDomain
 
   var sound;
   Sound.load( "/assets/spacetravel.mp3" ).then( s => {

diff --git a/demo/sound.analyze.js b/demo/sound.analyze.js
@@ -9,44 +9,64 @@ window.demoDescription = "Basic example of loading sound and visualizing frequen
 
   Pts.quickStart( "#pt", "#eae6ef" );
 
-  // Note: use Sound.loadAsBuffer instead if you need support for Safari browser. (as of Apr 2019)
-  // See this example: https://github.com/williamngan/pts/blob/master/guide/js/examples/sound_simple.js
-
+  /*
+   * Note: If you don't need Safari/iOS compatibility right away (as of Apr 2019)
+   * A simpler method to use would be Sound.load(...) instead of Sound.loadAsBuffer(...)
+   * See this demo: http://ptsjs.org/demo/edit/?name=guide.sound_simple
+   */
+
+  var bins = 256; 
   var sound;
-  var bins = 256;
   var colors = ["#f06", "#62e", "#fff", "#fe3", "#0c9"];
-
-  // Load sound
-  Sound.load( "/assets/spacetravel.mp3" ).then( s => {
-    sound = s.analyze(bins);
+  var bufferLoaded = false;
+  Sound.loadAsBuffer( "/assets/spacetravel.mp3" ).then( s => {
+    sound = s;
+    space.playOnce(50); // render for noce
+    bufferLoaded = true;
   }).catch( e => console.error(e) );
 
+  function toggle() {
+    if (sound.playing || !bufferLoaded) {
+      sound.stop();
+    } else {
+      sound.createBuffer().analyze(bins); // recreate buffer again
+      sound.start();
+      space.replay();
+    }
+  }
 
   // Draw play button
   function playButton() {
-    form.fillOnly("#f06").rect( [[0,0], [50,50]] );
+    if (!bufferLoaded) {
+      form.fillOnly("#9ab").text( [20,30], "Loading..." );
+      return;
+    }
     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]] );
     }
   }
-
+  
 
   // animation
   space.add({
+
     animate: (time, ftime) => {
       if (sound && sound.playable) {
-        sound.freqDomainTo(space.size).forEach( (t, i) => {
-          form.fillOnly( colors[i%5] ).point( t, 50+20 * t.y/space.size.y );
+        if (!sound.playing) space.stop(); // stop animation if not playing
+        sound.freqDomainTo(space.size).map( (t, i) => {
+          form.fillOnly( colors[i%5] ).point( t, 30 );
         });
       }
       playButton();
     },
 
     action: (type, x, y) => {
-      if (type === "up" &&  Geom.withinBound( [x,y], [0,0], [50,50] )) { // clicked button
-        sound.toggle();
+      if (type === "up" && Geom.withinBound( [x,y], [0,0], [50,50] )) {
+        toggle();
       }
     }
   });

diff --git a/demo/sound.freqDomain.js b/demo/sound.freqDomain.js
@@ -9,20 +9,42 @@ Pts.quickStart( "#pt", "#fe3" );
 
 (function() {
 
-  // Note: use Sound.loadAsBuffer instead if you need support for Safari browser. (as of Apr 2019)
-  // See this example: https://github.com/williamngan/pts/blob/master/guide/js/examples/sound_visual.js
-
-  var sound;
-  Sound.load( "/assets/spacetravel.mp3" ).then( s => {
-    sound = s.analyze(bins);
-  }).catch( e => console.error(e) );
+  /*
+   * Note: If you don't need Safari/iOS compatibility right away (as of Apr 2019)
+   * A simpler method to use would be Sound.load(...) instead of Sound.loadAsBuffer(...)
+   * See this demo: http://ptsjs.org/demo/edit/?name=guide.sound_visual
+   */
 
+  var sound;
   var bins = 256;
   var ctrls, radius;
   var colors = ["#f06", "#62e", "#fff", "#fe3", "#0c9"];
+  var bufferLoaded = false;
+
+
+  // Buffer and play - work across all browsers but no streaming and more code
+  Sound.loadAsBuffer( "/assets/spacetravel.mp3" ).then( s => {
+    sound = s;
+    bufferLoaded = true;
+  }).catch( e => console.error(e) );
+
+  // Need this because AudioBuffer can only play once
+  function toggle() {
+    if (sound.playing || !bufferLoaded) {
+      sound.stop();
+    } else {
+      sound.createBuffer().analyze(bins); // recreate buffer again
+      sound.start();
+    }
+  }
+
 
   // Draw play button
   function playButton() {
+    if (!bufferLoaded) {
+      form.fillOnly("#9ab").text( [20,30], "Loading..." );
+      return;
+    }
     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] ) );
@@ -32,6 +54,7 @@ Pts.quickStart( "#pt", "#fe3" );
     }
   }
 
+
   function getCtrlPoints( t ) {
     let r = radius + radius * ( Num.cycle( t%3000/3000 ) * 0.2);
     let temp = ctrls.clone();
@@ -41,6 +64,7 @@ Pts.quickStart( "#pt", "#fe3" );
 
       if ( d.magnitudeSq() < r*r ) { // push out if inside threshold 
         temp[i].to( space.pointer.$add( d.unit().$multiply( r ) ) );
+
       } else if ( !ctrls[i].equals( temp[i], 0.1) ) { // pull in if outside threshold
         temp[i].to( Geom.interpolate( temp[i], ctrls[i], 0.02) );
       }
@@ -55,7 +79,7 @@ Pts.quickStart( "#pt", "#fe3" );
   space.add({
 
     start: (bound) => {
-      radius = space.size.minValue().value/3.5;
+      radius = space.size.minValue().value/3;
       ctrls = Create.radialPts( space.center, radius, 10, -Const.pi-Const.quarter_pi  );
     },
 
@@ -98,10 +122,11 @@ 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++) {
@@ -121,6 +146,7 @@ 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 );
@@ -131,13 +157,12 @@ Pts.quickStart( "#pt", "#fe3" );
         let eyeBallLeft = eyeLeft.clone().toAngle( eyeLeft.$subtract( space.pointer ).angle(), -5, true );
         form.fill("#123").points( [eyeBallLeft, eyeBallRight], 2 + 10*f_scale, "circle" );
       }
-
       playButton();
     },
 
     action: (type, x, y) => {
-      if (type === "up" &&  Geom.withinBound( [x,y], [0,0], [50,50] )) {
-        sound.toggle();
+      if (type === "up" && Geom.withinBound( [x,y], [0,0], [50,50] )) {
+        toggle();
       }
     }
   });

diff --git a/demo/sound.timeDomain.js b/demo/sound.timeDomain.js
@@ -8,40 +8,48 @@ Pts.quickStart( "#pt", "#eae6ef" );
 //// Demo code starts (anonymous function wrapper is optional) ---
 
 (function() {
+
+  /*
+   * Note: If you don't need Safari/iOS compatibility right away (as of Apr 2019)
+   * A simpler method to use would be Sound.load(...) instead of Sound.loadAsBuffer(...)
+   * See this demo: http://ptsjs.org/demo/edit/?name=guide.sound_time
+   */
 
   var files = ["/assets/flute.mp3", "/assets/drum.mp3", "/assets/tambourine.mp3"];
+  var sounds = [];
   var currFile = 0;
-  var bins = 512;
+  var bins = 256; 
   var sound;
 
-  // Load next sound file
-  function nextSound( play=true ) {
-
-    // Note: use Sound.loadAsBuffer instead if you need support for Safari browser. (as of Apr 2019)
-    // See this example: https://github.com/williamngan/pts/blob/master/guide/js/examples/sound_time.js
-
-    Sound.load( files[currFile] ).then( s => {
-      sound = s.analyze( bins ).start();
-      currFile = (currFile + 1) % files.length;
+  function loadSound(i) {
+    Sound.loadAsBuffer( files[i] ).then( s => {
+      sound = s;
+      sounds.push( s );
+      if (i < files.length-1) loadSound(i+1);
     }).catch( e => console.error(e) );
   }
 
+  loadSound(0); // load all sounds
+
   // Draw play button
-  function playButton( size ) {
+  function playButton() {
     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 ) );
+      form.fillOnly('rgba(0,0,0,.2)').circle( Circle.fromCenter( space.center, 30 ) );
+      form.fillOnly('#fff').polygon( Triangle.fromCenter( space.center, 15 ).rotate2D( Const.half_pi, space.center ) );
+
     }
   }
 
-  space.add({ 
+  // animation
+  space.add({
+
     animate: (time, ftime) => {
       if (sound && sound.playable) {
+        if (!sound.playing) space.stop(); // stop animation if not playing
 
         // 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>bins/2 ? space.size.x : 0), space.center.y ], t.x-Const.half_pi, r );
+          let ln = Line.fromAngle( [ (i>128 ? space.size.x : 0), space.center.y ], t.x-Const.half_pi, space.size.y/0.9 );
           return [ ln.p1, ln.interpolate( t.y ) ]
         });
 
@@ -50,13 +58,17 @@ Pts.quickStart( "#pt", "#eae6ef" );
           form.stroke( `rgba( ${255-c}, 20, ${c}, .7 )`, 1 ).line( tdata[i] );
         }
       }
-
-      playButton( Math.max( space.size.y/20, 30 ) );
+      playButton();
     },
 
     action: (type, x, y) => {
-      if (type === "up") {
-        if (!sound || !sound.playing) nextSound();
+      if (type === "up" && Geom.withinBound( [x,y], space.center.$subtract( 25 ), space.center.$add( 25 ) )) {
+        if (!sound.playing && sounds.length > 0) {
+          currFile = (currFile + 1) % sounds.length;
+          sound = sounds[currFile];
+          sound.createBuffer().analyze(bins).start(); // reset buffer and analyzer 
+          space.replay();
+        }
       }
     }
   });