Getting Started with the HTML5 Audio Element

Article
03/03/2016

Windows Internet Explorer 9 introduced support for HTML5 audio.You can use the audio element to add a basic audio player to your webpage without requiring script or add-on controls .

Audio playback at its simplest

The main way to add audio to a webpage is by using the audio element. Like much of the new HTML5 support, the audio element enables you to fall back with an error message or another playback technology if the user's browser does not support the HTML5 audio element, as would be the case with older browsers. You can put either an error message between the audio tags as shown in the following example, or insert code for an external player control such as the Silverlight browser plug-in. The following code example shows a simple webpage that plays an audio file.

<!doctype html>  
<html>
<head>
    <title>Audio Element Sample</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"/> --> 
</head>
<body>
    <h1>Audio Element Sample</h1>
    
    <!-- Display the audio player with control buttons. -->
    <audio src="demo.mp3" controls autoplay loop> 
        HTML5 audio not supported
    </audio>
</body>
</html>

The audio element is added directly to your HTML code, using the src property to specify the audio file to play, and the controls attribute so that the built-in, player controls are used. If you use the browser's intrinsic player, no additional scripting is required. The intrinsic player may vary in style or functionality between browsers.

In Internet Explorer 9, the audio element displays a simple player that has basic play, pause, position slider, and volume controls. The player also displays the playing time, and the time left in the file. If you hover over either time display, you can skip forward or backward by 30 seconds.

The audio element in Internet Explorer 9 supports two other attributes, autoplay and loop. autoplay tells Windows Internet Explorer to immediately load and play the audio file after the audio object is loaded. This is similar to using the bgsound HTML element. Unlike bgsound, the pause and play controls to let the webpage users to turn the sound off. The loop attribute continuously replays the sound file from the beginning. If you do not need any of the intrinsic controls, do not use the attributes.

In the example, the file "demo.mp3" is a placeholder for your own file. If the audio file exists in the same directory as the source code for the webpage, you can just specify the file name. If the audio file is in another directory, include the path such as "music\demo.mp3". If the file is on another site, use the fully qualified domain and path, such as "http:\\www.contoso.com\music\demo.mp3".

While the audio element can be implemented in HTML alone, using scripting you can enhance your webpage by using your own buttons, creating play lists, or adding status to your playback. For more information about scripting the audio element, see Using JavaScript to Control the Audio Object.

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=edge”/> to the <head> block of a webpage to force Internet Explorer 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=edge instead. For more information about document compatibility, see Defining Document Compatibility.