5.2 Playing Sounds

Sound Code

p5.js Sound Library

Often, programming languages have additional features or functions built by other users or programmers. This is what's called a library. They collect functions and extends its functionality. They also come with documentation and reference resources.

In this learning activity, we'll work with a library called p5.sound.

p5.sound extends p5 with Web Audio functionality including audio input, playback, analysis, and synthesis. This library is referenced automatically in the HTML header, so we don't need to do anything else to access it.

Playing A Sound In p5

To add sounds to a p5 sketch, first, a sound file needs to be uploaded to the p5 project folder. To play the sound in a p5 sketch it first has to be loaded into the computer's memory. All projects in previous units had graphics generated by p5 so we didn't need to upload files to p5.

In the case of audio, we are loading a pre-recorded sound file into memory. This is known as external media. Using external media requires a new function called preload().

preload(), loadsound()

We preload sounds using a new function called preload() and storing them in variables. We can then call sounds in a lot of different ways, like by having keys pressed or mouse clicks.

The preload() function actually runs before the setup function. However, it isn't used to draw anything or create HTML or CSS. The preload function should only be used to load external media files. This makes the setup function act like a callback, the whole program waits until the media is done loading and then starts. This is kind of like the callback functions added to buttons in the art remix examples. Those functions defined an action that should wait until a specific event, the button press, to run. In this case, our whole sketch is waiting for a different event, the files finished loading, to start.

Preload allows us to access our sounds in a much faster way since the program will wait until the files are loaded and then it starts. Then inside preload(), we use another function called loadSound() to call the sound from our folder.

Walk through this example . This sketch demonstrates loading the sound file and then playing it when the sketch is loaded. Comments in the code explain the program structure and the sound object.

.play()

The previous example introduces a new syntax that we've seen before in the context of arrays: dot notation.

Since we are storing data in a variable we need a way to attach it to function. A method is a type of function associated with an object. All of our sounds are stored as objects.

In this case, to play back our sound we'll need to write something like this:

happySong.play()

.play() is a method that plays a sound. The .play() method should always be put in the setup() function or an event function like mousePressed().

.play() should never be put in the draw() function.

This is because draw() is a loop which is updating approximately 60 times a second. If .play() is put inside the draw function, the sound will be restarting over and over again instead of just playing once.

As an exercise to review how the draw function works and why we don't want to put .play() inside it, you could try and start a sound in draw(), listen to the result and explain what is happening.

Exercise #1: Load Multiple Sounds

Using the starter template, fill in the code to load the three sounds you've already downloaded. You need to store each sound in its own variable. Attach one sound to the play method to test that each one was loaded correctly.

• Starter code

keyPressed Code

Keyboard Events

Like mouseClicked, mousePressed and mouseReleased, keyboard events are functions that are called once an event occurs.

For the keyboard, the callback event functions defined by p5 are:

• keyPressed: when the user first presses a key
• keyReleased: when the key is released
• keyTyped: which indicates a key has been pressed and released

Since we are working with sound, a time-based medium, keyPressed will be used, meaning the sample will be triggered as soon as a key is pressed, rather than after the key is released, to give immediate feedback to the user. This introduces a bit of a bug, however, which is that the keyPressed will set the key environment variable to upper case letters, even when lower case letters are pressed. To accommodate this, use only upper case letters in the key conditional examples. For more on this, check this page in the p5 Issues. In this example, any key pressed will trigger the saxophone solo.

Exercise #2: Use a keypress to trigger a single sound

Starting from the previous lesson sketch with three sound files, use a keypress to trigger one of the sounds. Try testing the keyPress function with all three sounds.

You may want to choose new sounds after adding keyboard presses to make your project more fun to play depending on the length of the sounds you're using and how they sound when they're playing together.

Keyboard Conditional Code

Keyboard Conditionals

Sound objects in p5 have a method called .isPlaying() which will return true when a sound is playing and false when it is paused or stopped. Using this with a conditional statement, a sound can be played and stopped by pressing the same key.

1. This example adds a conditional statement to toggle the background color depending on whether the sound is being played or not.
   1. In order to use specific keys to play different sound files, a conditional statement can be used to determine if the current key value is a specific key on the keyboard.
2. In this example, a conditional is added to specify a key to trigger the sound. A second conditional statement makes another key stop the sound.
3. This variation uses the same key to start and stop the sound. Both examples include comments explaining the use of key variables.

Note the difference between pause and stop: Pausing a sound means it will pick up again playing where it left off. Stop makes the sound go back to the beginning.

Exercise #3: Add an event and conditional statements to play each sound

Starting from the previous lesson sketch with three sound files, add an event and conditional statements to play each sound with a different key on the keyboard. Also, include a single key to stop all of the sounds.

You can take a look at this sample code to get you started.