tone.js example

doc22940 · Mar 15, 2019 · 14ca3c2 · 14ca3c2
1 parent 5086b43
commit 14ca3c2
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 14 deletions.
diff --git a/guide/js/examples/index.html b/guide/js/examples/index.html
diff --git a/guide/js/examples/sound_mic.js b/guide/js/examples/sound_mic.js
@@ -14,7 +14,7 @@
   // Draw button
   function recordButton() {
     form.fillOnly( recording ? "rgba(0,0,0,.2)" : "#f06").rect( [[0,0], [50,50]] );
-    if (!recording) {
+    if (!recording || !sound) {
       form.fillOnly('#fff').circle( Circle.fromCenter( [25,25], 8 ) );
     } else {
       form.fillOnly("#fff").rect( [[18, 18], [32,32]] );
@@ -63,7 +63,11 @@
   // For use in demo page only
   if (window.registerDemo) window.registerDemo(demoID, space, null, stopFn);
   function stopFn() {
-
+    if (sound) {
+      sound.stop();
+      recording = false;
+      sound = undefined;
+    }
   }
 
 

diff --git a/guide/js/examples/tone.html b/guide/js/examples/tone.html
@@ -0,0 +1,41 @@
+<html>
+  <head>
+    <script type="text/javascript" src="../../../dist/pts.js"></script>
+    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/tone/13.8.2/Tone.min.js"></script>
+  </head>
+
+  <body>
+    <div id="pts" style="position: absolute; top: 0; left: 0; right: 0; bottom: 0"></div>
+
+    <script type="text/javascript">
+      let run = Pts.quickStart( "pts", "#62e" );
+
+      let index = new Pt(-1,-1);
+      let synth = new Tone.Synth();
+      let sound = Sound.from( synth, Tone.context ).analyze(128);
+      synth.toMaster(); // play using tone.js instead of Pts
+
+      run( (time) => { 
+          let area = space.size.$divide( 3 );
+          let idx = space.pointer.$divide( area ).floor();
+          let rect = [idx.$multiply(area), idx.$multiply(area).add(area)];
+
+          let t1 = sound.timeDomainTo( area, rect[0].$subtract(0, area.y/2) );
+          let t2 = t1.map( t => t.$add(0, area.y) ).reverse();
+          let freqs = sound.freqDomainTo( [area.x, area.y/2], [rect[0].x, 0] ).map( f => [[f.x, rect[0].y+area.y/2-f.y], [f.x, rect[0].y+area.y/2+f.y]] );
+
+          form.fillOnly("#fe3").polygon( t1.concat(t2) );
+          form.strokeOnly("#62e", Math.ceil(area.x/128) ).lines( freqs );
+
+          let key = ["C3", "E3", "G3", "C4", "E4", "G4", "C5", "E5", "G5"][ idx.y*3+idx.x ];
+          form.font(120, 'bold').fillOnly("#fff").text( rect[0].$add( 10, 110 ), key );
+
+          if (!index.equals(idx)) { // play if on different area
+            synth.triggerAttackRelease( key, '4n');
+            index = idx;
+          }
+      });
+    </script>
+  </body>
+
+</html>
diff --git a/src/Play.ts b/src/Play.ts
@@ -29,6 +29,14 @@ export class Sound {
   }
 
 
+  static from( node:AudioNode, ctx:AudioContext, type:SoundType="gen", stream?:MediaStream ) {
+    let s = new Sound( type );
+    s.node = node;
+    s.ctx = ctx;
+    if (stream) s.stream = stream;
+    return s;
+  }
+
   static load( source:HTMLMediaElement|string ):Sound {
     let s = new Sound("file");
     s.source = (typeof source === 'string') ? new Audio(source) : source;