Playing Audio on Click in Your JavaScript App
--
I personally love multi-sensory experiences. For a person with synesthesia , it’s fun to sniff scented stickers after scratching, see colors when producing, and feel a controller shake when playing a game. When I first learned coding, I wanted to learn how to incorporate sound when clicking a button in an app. If you’re not sure how to or you’re new to JavaScript, here’s one simple way to do it!
In my VSCode, there are three files set up: index.html, index.js (where code will be implemented), and index.css (for styling). In the index.html file, there is a script tag set to JavaScript so that my .js file could be read, interpreted, and displayed to the DOM. Next, we need to find some sound clips! FreeSound.org is a great site that has a variety of cool clips. You may have to create a free account before having access to sounds. Choose something that doesn’t have a delay at the start and is decent quality. For this small project, I chose two sounds: one clip that says “Play” and another that says “Stop”. Now let’s get some code into the editor!
On line 1, I’ll create a variable named appBody to represent the body of my app and set it using the querySelector method with a parameter of “.main”. This is so whenever I connect an element to the body, “.main” id will be the first thing the element will snap to. Afterwards, I’ll create two variables each declared to a new audio instance. To do this I’ll type new Audio, and inside the parentheses, I’ll put the audio url inside of quotes (here is a reference to a MDN Doc for this). This way when I’m ready to have the sound play, I can just reference the variable name.
Now let’s write out a function! I’ll formulate one named useSound and make it an arrow function. I’ll now set up an invocation after the end of useSound so whatever elements I create will show up on the DOM when I refresh the page.
Inside of useSound, I’m going to create an element ‘div’ using the document.createElement() method to hold the play button. I’ll give it a classname for styling later.
I’ll also make a button element called “playBtn” so that when we click on it, we get sound to play. I’ll also give playBtn a classname.
To make the sound play, we need an event listener! You can use an onclick method, but in this case I’ll use addEventListener(). Within addEventListener, I’m going to give it two parameters: a “click” and an arrow function with an event passed in. The function will trigger the play() method on a “click”, and will play sound clip from the url defined by the sound1 variable on line 2.
Last, we should append the elements created to our original variable appBody. Like a stack of plates, playBtn has to append to playBtnDiv. Then playBtnDiv appends to appBody. Now refresh the page and click the button!
I hope this article helped in adding some audio to your app! To check out the full code for the image below, click here.
