How to use HTML5 to Add an Audio Player to your Webpage

Article
03/03/2016

By using HTML5, you can add a music player to your webpage without requiring a third-party plug-in or add-on.

You can use the information in the following topics to add an audio player similar to the Internet Explorer Test Drive HTML5 Audio Player + XML Playlist to your own webpages.

In this section

Topic	Description
Getting Started with the HTML5 Audio Element	You can use the audio element to add a basic audio player to your webpage without requiring script or add-on controls .
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.
Using Media Events to Add a Progress Bar	The media object provides a rich selection of events that the audio object can use. With one group of events, you can get status data that can be used to track the progress as an audio file plays.
Supporting more than one audio file format	By using the audio element or object to support multiple audio formats, you can drive more listeners from multiple browsers to your webpage.

Introduction to the <audio> element

The HTML5 audio element provides a scriptable object that can play audio files without an add-on or plug-in. At its simplest, a single tag and a couple of attributes provide a player on a webpage for your users. By using JavaScript, you can manage the audio object and assign events to provide a full range of control and status tracking.

The HTML5 audio element shares media properties and methods with the HTML5 video element, so you might find that your code for items such as progress monitoring, file loading, or play and seek, are interchangeable. In addition to methods and properties, like most JavaScript objects, there are many events that can be registered to simplify your code. For more information about these events, see topics later in this section.

Serving audio and video content

Beginning with Windows Internet Explorer 9, any audio or video content needs the correct mime type set on the server, or the files won't play. Internet Explorer 9 supports MP3 audio, and MP4 audio and video. WebM audio and video files can be supported by installing the WebM components from The WebM project. The following table shows the required settings for your web server to host these files correctly.