audio limits fix #88 (#92)

publiclab · Apr 16, 2019 · 04c0def · 04c0def
1 parent 3af7fff
commit 04c0def
Show file tree

Hide file tree

Showing 2 changed files with 92 additions and 59 deletions.
diff --git a/examples/fft/sketch.js b/examples/fft/sketch.js
@@ -1,50 +1,58 @@
-/**
- * @name Frequency Spectrum
- * @description <p>Visualize the frequency spectrum of live audio input.</p>
- * <p><em><span class="small"> To run this example locally, you will need the
- * <a href="http://p5js.org/reference/#/libraries/p5.sound">p5.sound library</a>
- * and a running <a href="https://github.com/processing/p5.js/wiki/Local-server">local server</a>.</span></em></p>
- */
 var mic, fft,
   labelScale = 3, 
   userInteracted = false; // need to wait for user interaction before using WebAudio https://developers.google.com/web/updates/2017/09/autoplay-policy-changes#webaudio
 
 function setupEqualizer() {
-  createCanvas(350, 100);
-  noFill();
-  $('.equalizer').append($('.p5Canvas').remove()) 
-  $('.eq-btn').hide() 
 
-  userInteracted = true;
+  var myp5 = new p5( function(sketch) {
 
-  mic = new p5.AudioIn();
-  mic.start();
-  fft = new p5.FFT();
-  fft.setInput(mic);
-}
+    var x = 100; 
+    var y = 100;
 
-function draw() {
-  if (userInteracted) {
-    var scale = 1;
-    background(200);
-
-    text(parseInt(map(mouseX, 0, width, 20, 15000 / scale)) + " Hz", mouseX - 10, mouseY - 20);
-    var spectrum = fft.analyze();
-
-    beginShape();
-    vertex(0, height * 0.9);
-    for (i = 0; i < spectrum.length / scale; i++) {
-      vertex(i * scale, map(spectrum[i], 0, 255, height * 0.8, 0));
-    }
-    vertex(width, height * 0.9);
-    endShape();
-
-    var freq
-    // draw labels
-    for (i = 0; i < spectrum.length / scale; i += width / labelScale) {
-      freq = parseInt(map(i, 0, 1024, 20, 15000));
-      text(freq, map(i, 0, 1024 / scale, 0, width), height * 0.97);
-      fill(0, 100);
+    sketch.setup = function() {
+
+      var ac = sketch.getAudioContext();
+
+      ac.suspend().then(function() {
+
+        sketch.userStartAudio($('.btn-begin'), function() {
+          mic = new p5.AudioIn();
+          mic.start();
+          fft = new p5.FFT();
+          fft.setInput(mic);
+
+          userInteracted = true;
+        });
+      });
+
+      sketch.createCanvas(350, 100);
+      sketch.noFill();
+    };
+
+    sketch.draw = function() {
+      if (userInteracted) {
+        var scale = 1;
+        sketch.background(200);
+
+        sketch.text(parseInt(sketch.map(sketch.mouseX, 0, sketch.width, 20, 15000 / scale)) + " Hz", sketch.mouseX - 10, sketch.mouseY - 20);
+        var spectrum = fft.analyze();
+
+        sketch.beginShape();
+        sketch.vertex(0, sketch.height * 0.9);
+        for (i = 0; i < spectrum.length / scale; i++) {
+          sketch.vertex(i * scale, sketch.map(spectrum[i], 0, 255, sketch.height * 0.8, 0));
+        }
+        sketch.vertex(sketch.width, sketch.height * 0.9);
+        sketch.endShape();
+
+        var freq
+        // draw labels
+        for (i = 0; i < spectrum.length / scale; i += sketch.width / labelScale) {
+          freq = parseInt(sketch.map(i, 0, 1024, 20, 15000));
+          sketch.text(freq, sketch.map(i, 0, 1024 / scale, 0, sketch.width), sketch.height * 0.97);
+          sketch.fill(0, 100);
+        }
+      }
     }
-  }
+  }, $('.equalizer')[0]);
 }
diff --git a/examples/index.html b/examples/index.html
@@ -13,9 +13,9 @@
   <link href="examples.css" rel="stylesheet">
 
   <!-- equalizer code -->
-    <script src="fft/p5.min.js"></script>
-    <script src="fft/p5.dom.min.js"></script>
-    <script src="fft/p5.sound.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/p5.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/addons/p5.dom.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/addons/p5.sound.min.js"></script>
   <!-- end equalizer code -->
 
 </head>
@@ -25,7 +25,7 @@ <h1>WebJack Demo</h1>
 
   <p>Make sure the audio cable is connected and your Arduino is running one of the example sketches. <i>Eventually, crosstalk between signal lines will make sent data appear as received data</i>. To test without an Arduino, use <a href="https://www.youtube.com/watch?v=GtJW1Dlt3cg">this YouTube video recording of sensor data</a></p>
 
-  <div style="float:right;margin-bottom:10px;" class="equalizer"><a href="#" onClick="setupEqualizer()" class="eq-btn">Click to test audio</a></div>
+  <div style="float:right;margin-bottom:10px;" class="equalizer"></div>
 
   <p>
     <form class="sendForm" style="display:inline;">
@@ -41,6 +41,8 @@ <h1>WebJack Demo</h1>
     </select>
   </p>
 
+  <p><button class="btn-begin">Click to begin using WebJack</button></p>
+
   <div style="clear:both;" class="webjack-log"></div>
 
   <p class="hint"><i>WebJack is in an early development stage. If it does not work, try to:</i>
@@ -52,7 +54,6 @@ <h1>WebJack Demo</h1>
 
   <script>
 
-
     var connection;
 
     jQuery(document).ready(function($) {
@@ -68,23 +69,47 @@ <h1>WebJack Demo</h1>
       var profile = WebJack.Profiles[profileParam]; // https://github.com/publiclab/webjack/blob/master/src/profiles.js
       console.log('loading profile: ', profile);
 
-      connection = new WebJack.Connection(profile);
+      $('.btn-begin').click(initWebjack);
 
-      connection.listen(function(data) {
-        log.apend(data);
-        console.log('Arduino to WebJack: ' + data);
-      });
+      // run this after a user interaction
+      // https://github.com/publiclab/webjack/issues/88
+      // https://goo.gl/7K7WLu
+      function initWebjack() {
 
-      function send(e) {
-        e.preventDefault();
-        var text = $('.userinput').val();
-        connection.send(text);
-        console.log('WebJack to Arduino: ' + text);
-        return false;
-      }
+        var scriptEl = document.createElement('script');
+        scriptEl.setAttribute('src','fft/p5.sound.min.js');
+        document.head.appendChild(scriptEl);
 
-      $('.send').click(send);
-      $('.sendForm').submit(send);
+        setupEqualizer();
+
+        function touchStarted() {
+          if (getAudioContext().state !== 'running') {
+            getAudioContext().resume();
+          }
+        }
+
+        $('.btn-begin').hide()
+          .click(touchStarted);
+
+        connection = new WebJack.Connection(profile);
+
+        connection.listen(function(data) {
+          log.apend(data);
+          console.log('Arduino to WebJack: ' + data);
+        });
+
+        function send(e) {
+          e.preventDefault();
+          var text = $('.userinput').val();
+          connection.send(text);
+          console.log('WebJack to Arduino: ' + text);
+          return false;
+        }
+
+        $('.send').click(send);
+        $('.sendForm').submit(send);
+
+      }
 
     });