diff --git a/examples/fft/sketch.js b/examples/fft/sketch.js index ac043da..385eeac 100644 --- a/examples/fft/sketch.js +++ b/examples/fft/sketch.js @@ -1,50 +1,58 @@ -/** - * @name Frequency Spectrum - * @description

Visualize the frequency spectrum of live audio input.

- *

To run this example locally, you will need the - * p5.sound library - * and a running local server.

- */ 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 index 3d59cd3..b1af716 100644 --- a/examples/index.html +++ b/examples/index.html @@ -13,9 +13,9 @@ - - - + + + @@ -25,7 +25,7 @@

WebJack Demo

Make sure the audio cable is connected and your Arduino is running one of the example sketches. Eventually, crosstalk between signal lines will make sent data appear as received data. To test without an Arduino, use this YouTube video recording of sensor data

-
Click to test audio
+

@@ -41,6 +41,8 @@

WebJack Demo

+

+

WebJack is in an early development stage. If it does not work, try to: @@ -52,7 +54,6 @@

WebJack Demo