Sound

p5 uses a separate library to handle sound loading and playback, p5.sound.js. Sketches created in the p5 editor include a link to the sound library by default.

Getting or creating sounds can be done in many ways.

Freesound.org is a great resource for sound recordings available under the Creative Commons license.

Free Music Archive is a great resource for musical recordings in many genres, many using the Creative Commons license.

One of my favorite tools is jfxr, which is a web application ported from sfxr, a program designed to generate 8-bit style sound effects. There a version for Apple called cfxr if you want to download the software.

Like images, the sound file should be preloaded.

Here's a simple sketch to play a sound.

var explosion; function preload() { explosion = loadSound('explosion.wav'); } function draw() { background('black'); } function mousePressed() { if (mouseX > 0 && mouseX < width && mouseY > 0 && mouseY < height) { explosion.play(); } }

Manipulating sound

Let's add some background music and play with a few parameters to see other things we can do with the p5 sound library. First I'll download a track from the Free Music Archive and load it in my sketch.

var music; function preload() { music = loadSound('background.mp3'); } function setup() { createCanvas(640, 360); } function draw() { if (music.isPlaying()) { background(255); } else { background(0); } } function mousePressed() { if (mouseX > 0 && mouseX < width && mouseY > 0 && mouseY < height) { if (music.isPlaying()) { music.stop(); } else { music.play(); } } }

The volume of the sound can be changed with setVolume. Let's map the height of our canvas to the volume.

var vol = map(mouseY, 0, height, 1, 0);
music.setVolume(vol);

We can also pan the stereo field of the track using pan. Let's map pan to x:

var pan = map(mouseX, 0, width, -1, 1);
music.pan(pan);

We can also change the rate of playback. This time we'll map playback rate of the track to the mouse position.

var rate = map(mouseX, 0, width, 0.5, 4);
music.rate(rate);
var music; function preload() { music = loadSound('background.mp3'); } function setup() { createCanvas(640, 360); } function draw() { if (music.isPlaying()) { background(255); } else { background(0); } var vol = map(mouseY, 0, height, 1, 0); vol = constrain(vol, 0, 1); music.setVolume(vol); var pan = map(mouseX, 0, width, -1, 1); pan = constrain(pan, -1, 1); music.pan(pan); var rate = map(mouseX, 0, width, 0.25, 2); rate = constrain(rate, 0.25, 2); // music.rate(rate); stroke('blue'); line(0, mouseY, width, mouseY); line(mouseX, 0, mouseX, height); ellipse(mouseX, mouseY, 20); } function mousePressed() { if (mouseX > 0 && mouseX < width && mouseY > 0 && mouseY < height) { if (music.isPlaying()) { music.stop(); } else { music.play(); } } }

This is just a small sample of everything that can be done with the sound file.