4:3 Visualising Sound
p5.js has a huge set of tools for playing with sound. If you go to the reference there is a link at the top for the sound library:
https://p5js.org/reference/#/libraries/p5.sound
The microphone
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.
Listening to the microphone
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:
Animating a circle with sound input
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.
IMPORTANT: the examples here need to be opened in their own window to work with sound. Even though you can see them on this page they wont allow access to the microphone - this is a browser security thing!
Allowing access to the microphone with p5js
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
To make this a bit nicer perhaps have a bit of text that asks you to click. You could make a boolean that allows this message to appear/disappear when the audio is started with an if statement.
Browser limitations using the microphone
Turning on someone's microphone is a security issue so browsers are quite careful about this. Firstly you need to be on a secure website (i.e. https in the url, not http).
Secondly the browser will ask permission - normally something like "editor.p5.org wants to use your microphone, Block, Allow".
Lastly each browser is different and Safari on a mac and iOS currently doesn't work with audio input in the latest version of p5.js. But i've made something custom that does work which you can copy if you want this to appear on safari or your iphone!
IMPORTANT: remember to open the example in its own window to see it work (see earlier slide for why!)