0

i want to use p5.js to visualize microphone input within a browser(better be chrome).

However, the web audio api https://dvcs.w3.org/hg/audio/raw-file/tip/webaudio/specification.html drives me crazy cuz it's quite complicated.

i just want to use the sound's amplitude to control the drawing in p5. Just that simple.

Does anybody know if there is any related code sample?

Many thanks.

JAMESSTONEco
  • 2,051
  • 15
  • 21
kikkpunk
  • 1,287
  • 5
  • 22
  • 34

2 Answers2

1

It looks like this article can get you the data. You'll have to patch the result into Processing yourself though.

http://www.html5rocks.com/en/tutorials/webaudio/games/

This function looks at clipping strong signals, but it looks like you should be able to get the audio level.

function processAudio(e) {
  var buffer = e.inputBuffer.getChannelData(0);

  var isClipping = false;
  // Iterate through buffer to check if any of the |values| exceeds 1.
  for (var i = 0; i < buffer.length; i++) {
    var absValue = Math.abs(buffer[i]);
    if (absValue >= 1) {
      isClipping = true;
      break;
    }
  }
}
Diodeus - James MacFarlane
  • 112,730
  • 33
  • 157
  • 176
1

For anyone interested in using Processing syntax to visualize microphone input in JS, try p5.js with the p5.sound.js addon library.

Here's an example measuring amplitude of the p5.AudioIn (http://p5js.org/reference/#/p5.AudioIn)

var mic;

function setup(){
  mic = new p5.AudioIn()
  mic.start();
}

function draw(){
  micLevel = mic.getLevel();
}

You can also easily analyze the frequency spectrum, here's another example http://p5js.org/learn/examples/Sound_Frequency_Spectrum.php

talkscheap
  • 31
  • 1
  • 6