4:3 Visualising Sound

There are different ways of using sound. To start the easiest way is to use your computer's microphone.

We do this by using p5.audioIn:
https://p5js.org/reference/#/p5.AudioIn

This isn't a function, but something that contains lots of functions (also called methods in the reference). It's actually a class, we will get onto these later, they're handy - but for now lets just play.

To listen to the microphone we want to first make a variable for it

let mic;

Then in setup() we will turn this variable into the audio input class: p5.audioIn like this:

// "new" is used when we make a new instance of a class
mic = new p5.AudioIn();

Now we need to start the microphone, so it can listen using the audioIn start() function:

mic.start()

Finally in the draw loop we can get the current audio input level every frame:

// make a new variable to store the volume every frame
let vol = mic.getLevel()

Putting everything together into an animation that responds to sound input we change the size of a circle with the current volume level.

The getLevel() function from p5.AudioIn() will return a number between 0 and 1, though its normally very small. So we need to multiply it by something to make it bigger for changing a circles size.

By default most browsers will not let you access the microphone without clicking on something first and asking for permission. This is a good thing, otherwise the web would be able to listen to you!

The previous example wont work if you share it and choose fullscreen. It only works in the editor because permission has been granted when you click the play button. We need to add something like this:

function mousePressed() {
  userStartAudio();
}

you can see the reference page for this here:
https://p5js.org/reference/p5/userStartAudio/

In this example we set a variable started as false, then ensure that the user clicks to start the microphone and show animation. This is important because of the security limits put on using the microphone.