Using JavaScript to Control the Audio Object
The audio object in HTML5 provides methods, properties, and events that you can use to control playback from JavaScript.
This section includes the following topics:
- Playing and pausing audio playback in JavaScript
- Specifying audio files and managing playback in JavaScript
- Catching errors
- Related topics
Playing and pausing audio playback in JavaScript
The HTML5 audio element as described in Getting Started with the HTML5 Audio Element enables you to add audio to a webpage without using an external control or program. But, unless you only need a simple audio player in your webpage, you will likely want more control over the audio files you load and their playback. To use the audio element with JavaScript, , define an audio tag with an "ID", and optionally, leave everything else out. As discussed in Getting Started with the HTML5 Audio Element, you can show or hide the built-in controls, or set the audio to play automatically when the page loads. You can still do that, and take it further by using JavaScript.
In the following examples, we use the simple audio tag syntax in the HTML.
Note If you are developing on an intranet and have rendering issues for HTML5, you can add <meta http-equiv-“X-UA-Compatible” content=”IE=9”/> to the <head> block of a webpage to force Windows Internet Explorer 9 to use the latest standards. If you prefer, configure your web development server to send a meta http-equiv-“X-UA-Compatible” header with IE=9 instead. For more information about document compatibility, see Defining Document Compatibility.
<input type="text" id="audiofile" size="80" value="demo.mp3" />
All other functionality of the audio player is controlled from JavaScript, as shown in the following script.
var currentFile = "";
function playAudio() {
// Check for audio element support.
if (window.HTMLAudioElement) {
try {
var oAudio = document.getElementById('myaudio');
var btn = document.getElementById('play');
var audioURL = document.getElementById('audiofile');
//Skip loading if current file hasn't changed.
if (audioURL.value !== currentFile) {
oAudio.src = audioURL.value;
currentFile = audioURL.value;
}
// Tests the paused attribute and set state.
if (oAudio.paused) {
oAudio.play();
btn.textContent = "Pause";
}
else {
oAudio.pause();
btn.textContent = "Play";
}
}
catch (e) {
// Fail silently but show in F12 developer tools console
if(window.console && console.error("Error:" + e));
}
}
}
In the HTML portion of the example, the audio element is assigned the id= "myaudio", and a source file "demo.mp3". A button is defined with an id="play", and an onclick event that triggers the "playAudio()"JavaScript function.
In the JavaScript portion, the audio object is returned using document.getElementById. The play and pause methods are used to provide playback control. The button object is retrieved so that the button label can be toggled between Play and Pause, depending on the state of the audio object's paused property. The state is checked every time the "playAudio" function is called. If the audio file is playing, the paused property returns false, and the pause method is called to pause the playback. The button label is also set to Play.
If the file is paused, the paused property returns true, and the play method is called, the button label is updated to Pause. When a file is first loaded, the paused property returns true (playback is paused) even though the pause method has not explicitly been called.
In the HTML code, the buttons are disabled by default. When the page loads, the function checkSupport() is called using an onload event in the body tag. If the audio element exists, the buttons are enabled.
Specifying audio files and managing playback in JavaScript
In the first example, the audio source file is specified by using the source tag in the HTML portion of the project. To play more than just that one file, you can set the audio object's src property to a URL of an audio file from within JavaScript.
In the next example, a text input element is added in the HTML portion where you can paste in the path of an MPEG-Layer 3 (MP3) audio file.
Unlike in the first example, clicking the Play button might mean the user has changed the audio file, or that they have paused the current file. Because calling the src method when changing the audio file source resets the paused state, the "playAudio" function must indicate when the user wants to change files. The global variable "currentFile" is defined so that it keeps track of the URL for the file that is currently playing. When the user clicks the Play button, the "currentFile" variable is compared to the value in the text field that is specified by "audioURL.value". If these values are different, the src property is set to the new file URL, the "currentFile" variable is updated, and the load method is called.
In this example, the "currentFile" variable tracks the contents of the text field, not the audio object's src property. The reason for this is that the src property is always the fully qualified path to the file, which might not match what is in the text field. For example, if the audio file exists in the same directory as the source code for the webpage, you can specify only the file name. If the audio file is in another directory on the same domain, include the path such as "music\demo.mp3". If the file is on another site, use the fully qualified domain name and file path, such as "http:\\www.contoso.com\music\demo.mp3".
While an audio file is playing, the currentTime property tracks where the playback is in the audio clip. By changing the value of currentTime, you can skip forward or backward, or restart the playback. The example includes three new buttons that call the rewindAudio, forwardAudio, and restartAudio functions. The rewindAudio and forwardAudio functions decrement or increment the value of currentTime by 30 seconds. You can change the incremental value to create larger or smaller jumps. In the restartAudio function, the value of currentTime is set to zero, which is the beginning of the file.
You can also change the rate at which the audio is played by adjusting the playbackRate property. The playbackRate property is a multiplier for the speed of the playback. The value of playbackRate must be positive, as a negative value will cause an error.
The audio object also supports events such as the timeUpdate event, which can be used to track the progress of a file. For more information about how to use events for status and feedback, and how to add a progress bar, see Using Media Events to Add a Progress Bar.
// Rewinds the audio file by 30 seconds.
function rewindAudio() {
// Check for audio element support.
if (window.HTMLAudioElement) {
try {
var oAudio = document.getElementById('myaudio');
oAudio.currentTime -= 30.0;
}
catch (e) {
// Fail silently but show in F12 developer tools console
if(window.console && console.error("Error:" + e));
}
}
}
// Fast forwards the audio file by 30 seconds.
function forwardAudio() {
// Check for audio element support.
if (window.HTMLAudioElement) {
try {
var oAudio = document.getElementById('myaudio');
oAudio.currentTime += 30.0;
}
catch (e) {
// Fail silently but show in F12 developer tools console
if(window.console && console.error("Error:" + e));
}
}
}
// Restart the audio file to the beginning.
function restartAudio() {
// Check for audio element support.
if (window.HTMLAudioElement) {
try {
var oAudio = document.getElementById('myaudio');
oAudio.currentTime = 0;
}
catch (e) {
// Fail silently but show in F12 developer tools console
if(window.console && console.error("Error:" + e));
}
}
You can also change the rate at which the audio is played by adjusting the playbackRate property. The playbackRate property is a multiplier for the speed of the playback. The value of playbackRate must be positive, as a negative value will cause an error. This example plays an audio file and lets you speed it up or slow it down. The increase speed button adds a 1 to the playback rate, so it starts at normal and increases the multiplier with each button click. The decrease speed button divides the playback rate by 2 with each button click. These jumps are intentionally large to show the effect, however you may choose to use smaller increments.
<!DOCTYPE html>
<html>
<head>
<title>Audio playbackRate Example</title>
</head>
<body>
<div>
<audio id="audio1" style="width:25%" controls>Canvas not supported</audio>
</div>
<div>
<input type="text" id="audioFile" value="audio.mp3" size="60" />
</div>
<button id="playbutton" onclick="togglePlay();">Play</button>
<button onclick="increaseSpeed();">Increase speed</button>
<button onclick="decreaseSpeed();">Decrease speed</button><br />
<div id="rate"></div>
<script type="text/javascript">
// Create a couple of global variables to use.
var audioElm = document.getElementById("audio1"); // Audio element
var ratedisplay = document.getElementById("rate"); // Rate display area
// Hook the ratechange event and display the current playbackRate after each change
audioElm.addEventListener("ratechange", function () {
ratedisplay.innerHTML = "Rate: " + audioElm.playbackRate;
}, false);
// Alternates between play and pause based on the value of the paused property
function togglePlay() {
if (document.getElementById("audio1")) {
if (audioElm.paused == true) {
playAudio(audioElm); // if player is paused, then play the file
} else {
pauseAudio(audioElm); // if player is playing, then pause
}
}
}
function playAudio(audioElm) {
document.getElementById("playbutton").innerHTML = "Pause"; // Set button text == Pause
// Get file from text box and assign it to the source of the audio element
audioElm.src = document.getElementById('audioFile').value;
audioElm.play();
}
function pauseAudio(audioElm) {
document.getElementById("playbutton").innerHTML = "play"; // Set button text == Play
audioElm.pause();
}
// Increment playbackRate by 1
function increaseSpeed() {
audioElm.playbackRate += 1;
}
// Cut playback rate in half
function decreaseSpeed() {
if (audioElm.playbackRate <= 1) {
var temp = audioElm.playbackRate;
audioElm.playbackRate = (temp / 2);
} else {
audioElm.playbackRate -= 1;
}
}
</script>
</body>
</html>
Catching errors
Writing error-free code is difficult. This example includes several suggestions that might help you avoid making errors.
Note The example here includes code to send errors to the F12 developer tools Console or Script tab. For more information, see How to use the F12 Developer Tools
A characteristic of the HTML language is that if a tag is not recognized, it is ignored. In a browser that does not support HTML5, when you use the HTML5 audio element, if it is not recognized, the portion between the tags is used. In this example, the message HTML5 Audio is not supported is displayed, but you can add any message, use another technology, such as Microsoft Silverlight, or allow the user to download the file. If HTML5 audio is supported, the portion between the tags is ignored. There is one caveat, however. For normal browser viewing, the content between the audio tags is ignored, but if the user is viewing the webpage by using a screen reader, the content between the tags will also be read by the reader.
In the JavaScript section of the code, there are areas where errors are likely. The first is when you check for HTML5 audio support. Each function tests by using if (window.HTMLAudioElement) to see if the audio element exists. If the audio element does not exist no code is executed.
In this example, the buttons are disabled if support does not exist, so the functions would not be called. However, disabling access to the JavaScript functions might not be practical in your webpages.
If HTML5 audio is supported, there are other errors that might happen. Try/catch statements are used in conjunction with methods that can throw exceptions. One cause of exceptions is if the user tries to play a file that does not exist, rewind when no file is loaded, or a connection to a file cannot be made.
With the try/catch statements, these conditions fail silently, but you can see the errors if you open either the Console or Script tab in Internet Explorer 9 F12 tools. For example, the Fast Forward, Rewind, and Restart functions throw "InvalidStateError" DOMExceptions if there is no audio file playing or loaded.
The following code example explains all concepts of this topic.
<!DOCTYPE html>
<html>
<head>
<title>HTML5 Audio Player </title>
<!-- Uncomment the following meta tag if you have issues rendering this page on an intranet site. -->
<!-- <meta http-equiv="X-UA-Compatible" content="IE=9"/> -->
<script type="text/javascript">
// Global variable to track current file name.
var currentFile = "";
function playAudio() {
// Check for audio element support.
if (window.HTMLAudioElement) {
try {
var oAudio = document.getElementById('myaudio');
var btn = document.getElementById('play');
var audioURL = document.getElementById('audiofile');
//Skip loading if current file hasn't changed.
if (audioURL.value !== currentFile) {
oAudio.src = audioURL.value;
currentFile = audioURL.value;
}
// Tests the paused attribute and set state.
if (oAudio.paused) {
oAudio.play();
btn.textContent = "Pause";
}
else {
oAudio.pause();
btn.textContent = "Play";
}
}
catch (e) {
// Fail silently but show in F12 developer tools console
if(window.console && console.error("Error:" + e));
}
}
}
// Rewinds the audio file by 30 seconds.
function rewindAudio() {
// Check for audio element support.
if (window.HTMLAudioElement) {
try {
var oAudio = document.getElementById('myaudio');
oAudio.currentTime -= 30.0;
}
catch (e) {
// Fail silently but show in F12 developer tools console
if(window.console && console.error("Error:" + e));
}
}
}
// Fast forwards the audio file by 30 seconds.
function forwardAudio() {
// Check for audio element support.
if (window.HTMLAudioElement) {
try {
var oAudio = document.getElementById('myaudio');
oAudio.currentTime += 30.0;
}
catch (e) {
// Fail silently but show in F12 developer tools console
if(window.console && console.error("Error:" + e));
}
}
}
// Restart the audio file to the beginning.
function restartAudio() {
// Check for audio element support.
if (window.HTMLAudioElement) {
try {
var oAudio = document.getElementById('myaudio');
oAudio.currentTime = 0;
}
catch (e) {
// Fail silently but show in F12 developer tools console
if(window.console && console.error("Error:" + e));
}
}
}
</script>
</head>
<body>
<p>
<input type="text" id="audiofile" size="80" value="demo.mp3" />
</p>
<audio id="myaudio">
HTML5 audio not supported
</audio>
<button id="play" onclick="playAudio();">
Play
</button>
<button onclick="rewindAudio();">
Rewind
</button>
<button onclick="forwardAudio();">
Fast forward
</button>
<button onclick="restartAudio();">
Restart
</button>
</body>
</html>
Related topics
Getting Started with the HTML5 Audio Element
How to use HTML5 to Add an Audio Player to your Webpage
Using Media Events to Add a Progress Bar
Pausing or changing the volume of media when you leave the page