JAVA SCRIPT - Running a Routine When an Audio File Begins Playing

Running a Routine When an Audio File Begins Playing 

Problem

You want to provide an audio file and then pop up a question or other information when the audio file begins or ends playing.

Solution

Use the HTML5 audio element: 

<audio id="meadow" controls>
 <source src="meadow.mp3" type="audio/mpeg3"/>
 <source src="meadow.ogg" type="audio/ogg" />
 <source src="meadow.wav" type="audio/wav" />
 <p><a href="meadow.wav">Meadow sounds</a></p>
</audio>

and capture either its play event (playback has begun) or ended event (playback has finished):

var meadow = document.getElementById("meadow");
meadow.addEventListener("ended", aboutAudio);

then display the information:

function aboutAudio() {
 var info = 'This audio file is a recording from Shaw Nature Reserve';
 var txt = document.createTextNode(info);
 var div = document.createElement("div");
 div.appendChild(txt);
 document.body.appendChild(div);
}

EXPLAIN

HTML5 added two media elements: audio and video. These simple-to-use controls provide a way to play audio and video files without having to use Flash. In the solution, the audio element’s controls Boolean attribute is set, so the controls are displayed. 

The element has three source children elements, providing support for three different types of audio files: WAV, MP3, and Ogg Vorbis. 

The use of the source element allows different browsers to find the format (codec) that they support. For the example, the browser support is: 

• Firefox accepts either the WAV or Ogg Vorbis. It also accepts MP3, but uses the underlying operating system support to do so, rather than providing its own. 

• Opera supports WAV and Ogg Vorbis, but not MP3. 

• Chrome supports WAV, MP3, and Ogg Vorbis. 

• Safari supports MP3 and WAV. 

• IE supports the MP3.

A link to the WAV file is provided as a fallback, which means people using browsers that don’t support audio can still access the sound file. I could have also provided an object element, or other fallback content.

The media elements come with a set of methods to control the playback, as well as events that can be triggered when the event occurs. In the solution, the ended event is captured and assigned the event handler aboutAudio(), which displays a message about the file after the playback is finished. 

Notice that though the code is using a DOM Level 0 event handler with the window load event, it’s using DOM Level 2 event handling with the audio element. Browser support is erratic with this event handler, so I strongly recom‐ mend you use addEventListener(). However, onended does seem to work without problems when used directly in the element:

<audio id="meadow" src="meadow.wav" controls onended="alert('All done')">
 <p><a href="meadow.wav">Meadow sounds</a></p>
</audio>

It’s interesting to see the appearance of the elements in all of the browsers that currently support them. There is no standard look, so each browser provides its own interpreta‐ tion.

You can control the appearance by providing your own playback controls and using your own elements/CSS/SVG/Canvas to supply the decoration.