Adding Sound to Your JS Web App

If you are looking to add another layer of immersion to your game or web site, sound is a great place to start. There are several ways to accomplish this, so I’ll walk you through your options starting with my favorite:

let mySound = new Audio('my_audio_file.wav')
mySound.play()

The simplest way to add sound is through Javascript’s Audio() constructor. It takes an argument of a string that is either the local or remote file path. Declaring this as a variable allows you to then call the play() method which starts playing the current audio.

Another way to accomplish this requires some HTML in addition to our JS. Here’s our HTML file:

<audio id="audio" src="http://music.mp3"></audio>

And our Javascript file:

let myAudio = document.querySelector('#audio')
myAudio.play()

While this method is a little more complicated, splitting our code between two files, it does have the benefit of allowing us to declare many of our audio attributes within the HTML element. For example:

<audio id="audio" autoplay loop  controls src="music/my_music.mp3"></audio>

The above indicates that when our audio is called within our Javascript file it will begin playing in the browser automatically, loop back to the beginning of the audio clip indefinitely when finished, and create controls in the browser which allow the user to adjust volume, seeking, and other audio playback features. This cleans up our JS file a bit by allowing it to simply execute the audio play call rather than define all of its attributes line by line.

A Quick Note About Autoplay

Increasingly, modern browsers like Google Chrome are blocking audio elements on a page from autoplaying. This is a good thing — nobody wants to be harassed by unwanted noise each time they visit a page. This means that while your code might be working just fine, your audio is still not playing on your page as desired because the browser is intervening on behalf of its users to prevent the unrequested audio. Remember, if you want to have music or audio play on your web app you will likely have to tie it to a click event somewhere on the page.

Final Tips:

• If you are using a local audio file, make sure you are using the correct file path in your Audio() constructor. If a desired sound is not playing, use your browser’s native development tools to check that the file path in your GET request is displaying as intended
• Volume is one attribute of an audio file that cannot be adjusted within the HTML audio tag (unless through the controls feature). This can be changed in JS like so: myAudio.volume = 0.5. 1 represents our audio file playing at 100% while 0 mutes it entirely. In this case, our 0.5 means the audio will play at 50% volume
• Play it safe and turn your audio elements down — you never know what your user’s local volume may be set to. It is much better to have them adjust quiet elements up to their desired volume rather than risk blasting them from the outset