This project creates a sketch in p5.js which can play an audio file using a key press then makes a simple button with a pencil, paper and a Makey Makey to trigger the sound.

While this project uses a doorbell sound, the steps include how to load an audio file into your p5.js sketch, so it can easily be adapted to use any type of sound.

Learn more about p5.js: https://p5js.org/

If you are new to using p5.js with Makey Makey, I suggest checking out this project first: https://www.instructables.com/id/Coding-Simple-Pla...

Supplies

Pencil

A small square of paper

Makey Makey kit (w/ 2 alligator clips)

Laptop w/ internet connection

Step 1: Downloading the Audio File

This project requires using an audio file which we need to upload into our p5.js sketch. In order to do this, we first need to download the audio file.

If you are unable to download files onto your computer or simply wish to skip downloading the file and uploading it into your sketch, you can go to this link for a p5.js template with the sound already uploaded and go to step 3. However, if you wish to work with audio files in p5.js in the future, this step and the next one will show you how to do this.

There are many places to download sound effects and audio files on the web, some which require an account, like freesound.org and some that don't require an account, like soundbible.com . Always be mindful of any licensing and/or attribution requirements when using a sound for your project. More on that here: https://creativecommons.org/

The doorbell sound for this project came from https://freesound.org/s/163730/ provided by Tim Kahn.

If you wish to download the sound without making an account, I have converted the sound to an mp3 format which can be downloaded here: https://drive.google.com/file/d/1bP4d2pDaHMdtVrkOF...

Step 2: Uploading Audio File Into P5.js

Once we have downloaded our doorbell sound, we need to upload it into our p5.js sketch so we can access it.

To do this, follow these steps:

- Click ' > ' icon on the left side of the web editor, just below the play button. This will open up the sidebar which shows the files for your sketch.

- Click the small downward facing triangle just to the right of 'Sketch Files'. This will bring up a drop down menu with the options to 'add folder' and 'add file'

- Click 'add file'. This will bring up a window to add a file. You can drag the doorbell file into the box or click where the box says 'drag files here to upload or click to use file browser'. This will let you navigate through your computer files to locate the audio file.

- Once you have dragged or selected the file, you will see it upload and the name of the file will appear in the side bar.

Now you will be able to access and use this audio file in your sketch.

Step 3: Loading Audio File Into P5.js Sketch

Loading an audio file into a p5.js sketch requires us to make a soundfile object. An object has its own properties and functions built into it that we can use.

To make an object, we first need to make a variable to hold the object. This will allow us to access the object and its properties throughout the sketch. To make a variable, go to the top line of the sketch and write the word let. This word is used to declare a variable in javascript. Then give the variable a name. We can call the variable anything we want, but it is helpful to give it a name which is related to what it will do in our code. In this case, it makes sense to call it doorbell.

let doorbell;

Since p5.js is web based, we need to make sure the audio file has been loaded into the sketch before the sketch begins running, otherwise we may not be able to access the properties of the object. To do this, we need to add a function to load the audio file before the sketch starts. This function is called preload(). We write this the same way as the setup() and draw() function.

Inside of the curly brackets, we will assigned our variable to the sound object by using the loadSound() function. Inside of the parentheses, write the exact name of the audio file inside of quotation marks:

function preload() {

doorbell = loadSound('doorbell.mp3');

}

Step 4: Play Audio File Using KeyPressed() Function

Now that the audio file is loaded into the sketch, you can play it using the play() method. Methods are essentially functions that are specific to an object.

If you have used key presses in p5.js before, you probably used a conditional statement with the keyIsPressed variable inside of the draw function. However, when working with audio files, we do not want to trigger it inside the draw function. The draw function is a loop so it is constantly updating. This means the audio file will play over and over again as long as a key is pressed down which will not be pleasant to listen to.

To avoid this, you are going to use a function called keyPressed(). This is also written the same as the setup() and draw() function. Write this at the bottom of the code below the draw() function.

Inside the curly brackets is where you put the play() method that will trigger the audio file once when you press a key. To use a method for an object, write the variable name that holds the object followed by .play();

function keyPressed() {

doorbell.play();

}

Now when you run your sketch, you can press a key and the doorbell sound will play.

IMPORTANT NOTE: When adding key presses into our code, the web editor needs to know if we are pressing a key to write code in the text editor or we are pressing the key to do the thing we coded a key press to do. When you click the play button, move the mouse over the canvas and click on the canvas. This will bring the focus of the editor to the sketch and pressing a key will trigger the key press code we want to happen.

Step 5: Make the Paper Button

To trigger the sound with the Makey Makey, we will use a regular pencil and paper to make a button.

Draw two half circles with a very small gap between them so that they are not actually touching but close enough so that we can touch both halves at the same time with one finger . Each half circle should also have a thick line which extends to each end of the paper. This is where you will attach the alligator clips from the Makey Makey.

Make sure you fill in both sides very dark so that the graphite from the pencil is able to hold the current from the Makey Makey.

The design of the two half circles is to have such a small gap between them that it is basically impossible to not touch both sides at the same time. This allows you to complete the circuit between the key and Earth on the Makey Makey without having to hold the ground wire.

Step 6: Set Up Makey Makey

Get out the Makey Makey board, USB cable and two alligator clips. Attach one alligator clip to the Earth and one to the Space key (since we didn't specify a key in our code, any key we press will trigger the sound).

Take the alligator clip that is attached to the Space key and clip it to one side of the paper button. Take the alligator clip that is attached to the Earth and clip it to the other side of the paper button.

Plug the USB cable into the laptop.

Step 7: Press the Button to Trigger the Audio File

At this point, you are ready to ring your doorbell. Start the sketch (remember to click the mouse on the canvas so the key press will execute the keyPressed() function) and then touch the two half circles on the paper at the same time. You should hear the sound of the doorbell audio file play.

Step 8: Extension: Add a Visual Component to the Sketch

At this point, our sketch only includes code to play the audio file, so you will not see anything change on the screen. This may be all you want to do if you are trying to create some type of interactive sound project.

However, with the visual coding capabilities of p5.js, the possibilities of adding graphics are endless. You can even have visuals which react to your audio files in numerous ways such as appearing only when the audio file is playing, reacting to the changes in volume and/or frequency or even making a visual representation of the sound itself.

Step 9: Extension: Make a Circle Change Color When Button Is Pressed

To keep this project simple, we are just going to make a circle that changes color when the button is pressed.

In the draw() function, create a circle using the ellipse() function. Above that, add the fill() function to set the color of the circle. For this sketch, the original color will be white which is the greyscale value of 255. You can set the color to any one you want using RGB color values.

In between the fill() function and ellipse() function, create a conditional statement using the keyIsPressed variable inside the parentheses. In between the curly brackets of the conditional statement, put another fill() function set to the color you want the circle to change to when you press the key. For this project, the color will change to yellow which has an RGB value of 255, 255, 0.

if(keyIsPressed) {

fill(255, 255, 0);

}

Press the play button to run the sketch. The white circle should now appear when the sketch loads (Remember to click the mouse on the canvas). Then press the paper button and you should hear the doorbell ring and see the circle change color.

p5.js sketch: https://editor.p5js.org/mrbombmusic/sketches/brXO5...