Coding Sound With JavaScript: Beginner’s Guide – by Mark Lassoff

Audio, when used correctly, can be an important component in digital learning content. Sound can be used to give feedback, add drama, and even make learning content more accessible. Every contemporary authoring environment integrates sound. However, when authoring with HTML5 and JavaScript, producing sound requires coding. Luckily the API for coding sound with HTML5 and JavaScript is fairly accessible and can even be mastered by beginning coders.

Let’s start with the easiest implementation. If you’d like to file along, download “Correct Answer.mp3” from https://www.dropbox.com/s/mbmhocwo4bbdsgp/Correct%20Answer.mp3?dl=0.

Implementing sound in HTML5 code

Let’s start by opening a text editor and creating a file called sound.html. We’ll enter the standard HTML basic document structure first.

<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>Making Sound</title> </head> <body> </body> </html>

Code snippet 1: Create this JavaScript file and name it “sound.html”

Not surprisingly, the element that controls audio within an HTML document is the <audio> element. The audio element determines exactly how audio will be played. The audio element also requires that you embed a <source> element that is pointed at the file you want to play. (It is easiest to have your mp3 file and your HTML file in the same folder at this point.)

Inside the body of your document, let’s add the audio and source elements.

<audio controls="controls"> <source src="Correct Answer.mp3" /> </audio>

Code snippet 2: Add these audio and source elements to sound.html

Believe it or not, that’s all you need. Open your HTML file in your browser and you’ll see something similar to Figure 1.

When you open sound.html, this is what you should see

Figure 1: When you open sound.html, this is what you should see

What you see in the browser window is the standard audio player. If you press the play icon, you’ll hear the sound. This player also has a volume control and a scrubber, which is only useful for longer audio segments.

Of course, this is not optimal for digital learning. For the most part, we’d want to play sounds in reaction to some user action or, perhaps, as part of an instructional segment. With the setup above, the sound is in a player controlled by the user.

We can alter the code slightly so the sound plays when the page opens and the player does not appear.

<audio autoplay="autoplay"> <source src="Correct Answer.mp3" /> </audio>

Code snippet 3: These lines cause the sound file to play when the page opens

Note that due to the potential for abuse of autoplay, this has been disabled in many browsers. Even if this method DOES work in your browser, it does not offer the necessary amount of control for you as a digital learning developer.

Let’s bring in JavaScript to provide more options.

Sound in JavaScript

Now we’re going to modify our code to play sounds in reaction to correct and wrong answers given by the user.

Let’s start with our basic document structure and add the <script> tags so we can insert JavaScript.

<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>Making Sound</title> </head> <body> <audio id="sound"> <source src="Correct Answer.mp3" /> </audio> </body> <script> </script> </html>

Code snippet 4: Add <script> tags to the basic sound.html document to allow inserting JavaScript

In addition to adding the <script> tags, we’ve added an id attribute to the <audio> element. This will allow us to pull the element into our JavaScript code. In this example, our sounds are going to play based on a user’s response to a simple assessment. We can add the code for the assessment question right below the closing audio tag.

<h1>Who played the character of Harry Potter in the movie series?</h1> <button>George Clooney</button> <button id="correct">Daniel Radcliff</button> <button>George Peppard</button> <button>George Burns</button> </div></pre>

Code snippet 5: Add this code below the </audio> tag—this is the assessment question. The <button id> identifies the correct answer.

Note that for now, the correct answer has been given the id “correct”. We’re going to want to play the “Correct Answer.mp3” when that button is pushed. The JavaScript in code snippet 6, between the existing <script> tags, will do the trick.

<script> const mySound = document.getElementById("sound"); const correctButton = document.getElementById("correct"); correctButton.addEventListener("click", function(){ mySound.play(); }); </script></pre>

Code snippet 6: Add this JavaScript between the <script> tags in code snippet 4 so that an audio file, “Correct Answer.mp3”, will play

There’s a lot here and the syntax gets a bit tricky. If you test it and the chime sound does not play when you click the correct answer, after checking your computer speaker volume, carefully check the code. A single character out of place can prevent this from working correctly.

The first two lines of code create a link between the JavaScript and HTML code. Believe it or not, the HTML and the JavaScript code are not aware of each other, so you have to bring the HTML elements in as JavaScript variables. In this case, the variable (or more accurately constant, which is a variable that doesn’t change value), mySound refers to the audio in the HTML. The variable correctButton refers to the “Daniel Radcliff” button in the HTML.

Next, instruct the correctButton to listen for a click event. When that click event occurs, a function that instructs the sound to play is issued.

Adding a sound in reaction to an incorrect answer is simply extrapolating from what we’ve already learned.

1) We need to have an HTML audio element containing the sound

2) We need to be listening for a click event on the buttons

3) We need to script an event that plays the wrong answer sound

Adding wrong answer sounds

To finalize this small project, we’ll add sounds that play when a wrong answer is selected.

You can download the sound at https://www.dropbox.com/s/kulc9u7r69d8odl/Wrong%2002.wav?dl=0. The file name is “Wrong 02.wav”. Make sure you place it in the same folder as the HTML and “Correct Answer.mp3”.

First, we’ll add another audio element to the HTML. We’ll be sure to give it a distinct id to differentiate it from the sound that plays in response to correct answers.

<audio id="wrongSound"> <source src="Wrong 02.wav" /> </audio>

Code snippet 7: The audio element for a wrong answer needs a different name

We’ll also need to add id’s to our incorrect answer buttons so they are identifiable in the JavaScript.

<button id="wrong1">George Clooney</button> <button id="correct">Daniel Radcliff</button> <button id="wrong2">George Peppard</button> <button id="wrong3">George Burns</button>

Code snippet 8: Add a button id for each wrong answer (see code snippet 5 for the location)

And, then we’ll need the Javascript to be aware of these buttons.

<pre class="”html”" name="”code”">const mySound = document.getElementById("sound"); const correctButton = document.getElementById("correct"); const wrong1 = document.getElementById("wrong1"); const wrong2 = document.getElementById("wrong2"); const wrong3 = document.getElementById("wrong3")

Code snippet 9: Make the JavaScript aware of the button id additions. (Refer to code snippet 6)

And finally, we’ll need these buttons to react to a click event by playing the correct sound. At this point this script is complete.

<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>Making Sound</title> </head> <body> <audio id="sound"> <source src="Correct Answer.mp3" /> </audio> <audio id="wrongSound"> <source src="Wrong 02.wav" /> </audio> <div id="assessment"> <h1>Who played the character of Harry Potter in the movie series?</h1> <button id="wrong1">George Clooney</button> <button id="correct">Daniel Radcliff</button> <button id="wrong2">George Peppard</button> <button id="wrong3">George Burns</button> </div> </body> <script> const mySound = document.getElementById("sound"); const correctButton = document.getElementById("correct"); const wrong1 = document.getElementById("wrong1"); const wrong2 = document.getElementById("wrong2"); const wrong3 = document.getElementById("wrong3"); correctButton.addEventListener("click", function(){ mySound.play(); }) wrong1.addEventListener("click", wrongAnswer); wrong2.addEventListener("click", wrongAnswer); wrong3.addEventListener("click", wrongAnswer); function wrongAnswer(e){ document.getElementById("wrongSound").play(); } </script> </html></pre>

Code snippet 10: This is the complete audio.html file

Again, test your application and you should hear a sound corresponding to correct and incorrect answers. In the browser your app should appear similar to Figure 2.

When you test your application in your browser, you should see something like this

Figure 2: When you test your application in your browser, you should see something like this

Just for fun, let’s add a little CSS as a finishing touch to make the app look better. After the closing title tag, add the style code in code snippet 11. Make sure it’s inside the <head> element in your document.

<link href="https://fonts.googleapis.com/css?family=Shadows+Into+Light" rel="stylesheet"> <style> #assessment { font-family: 'Shadows Into Light', cursive; width: 450px; border: 1px solid #ccc; background-color: #fbfbfb; padding: 10px; box-shadow: 2px 2px #ccc; } #assessment h1 { margin-top: 0px; } #assessment button { width: 100%; height: 30px; margin-top: 8px; border-radius: 5px; background-color: #999; color: #333; font-size: 1.15em; } </style>

Code snippet 11: This code, inside the <head> element of sound.html, gives some visual style to the app

Now our application looks like this (Figure 3):

The appearance of the finished app in your browser

Figure 3: The appearance of the finished app in your browser should look somewhat like this

What a difference a little style makes!

You may view and copy all the code for this exercise at https://github.com/mlassoff/learningSolutionsSounds/blob/master/htmlSound.html.

Source


APT Webminar Translation Services | Source: Coding Sound With JavaScript: Beginner’s Guide – by Mark Lassoff