HTML5 Audio Tag Tutorial with Example

This HTML5 tutorial shows how to play audio files using HTML5 coding on a web page with an example case. Web developers can either use the HTML5 audio element and let the control of audio element to web users. Or developers can play sound dynamically using HTML5 and Javascript together.

HTML5 Audio Tag for Playing Sound

HTML5 <audio> tag is one of the new elements and tags in HTML5 for developers. <audio> element enables developers to create an audio item on a web page like sound, music or other audio streams.

Web developers can use the below HTML5 code to create audio controls and play sound on a web page.

<audio controls="controls" autoplay="autoplay" loop="loop" preload="metadata">
 <source src="/html5/html5-audio-example-mp3.mp3" />
 <source src="/html5/html5-audio-example-wav.wav" />
 <b>Your browser does not support HTML5 audio element</b>
</audio>

If your browser does not support HTML5 audio tag, you will see an informative fallback text "Your browser does not support HTML5 audio element" which is fully customizable. Actually you can add any HTML code right after <source> list for audio files before the close tag of audio element.

If your browser is already supporting HTML5 audio tag, you will see the audio control on the web page as follows:
For Internet Explorer (IE9), the audio element and audio controls are displayed as:


For Opera web browser versions supporting audio tag :


For Maxthon web browser supporting HTML5 audio element :

HTML5 Audio Attributes

Within the audio tag you've already noticed that I defined more than one sound file source. If the browser does not support one format, for example IE9 does not support .wav files at the moment I prepared this HTML5 tutorial, it will try to play the following source file.

Audio tag element has the following attributes which enable developers to control audio object behavior on the web page.
These audio attributes are: src, controls, autoplay, loop and preload attributes.

src attribute overwrites the <ource> sub elements if given between audio opening and closing tags. And src tag points to an URL where sound file exists.

If controls attribute is set as controls="controls" then audio controls like play and pause button, volume, etc will be displayed. I think it is a good programming behaviour to let the web site visitors to control the playing sound by using such buttons. Otherwise, you can cause them to leave your web page immediately.

If autoplay attribute is set to "autoplay", the audio file is played immediately when it is loaded and ready to play. To summarize when HTML5 audio autoplay attribute is set, HTML5 supported browsers will immediately start playing audio to the web visitor.

Similar that loop attribute with value set as "loop" (loop="loop") defines that the audio file will be replayed automatically after it is completely played. In short, HTML5 audio loop attribute provides a continuous audio play in HTML web page.

preload attribute specifies when the audio file binaries will be downloaded to the client machine.
If the developer thinks the audio file will be played, then he can set preload="auto".
If he thinks it is enough to download only metadata about the audio files then he can set preload="metadata".
Or none value can be set to prevent the browser to download binary files before the user clicks play button.

Audio element PRELOAD option is important to gain from bandwidth and to serve your web pages on the client browser faster. For example since not all browsers yet support all audio file formats, you might have to define the same sound file in more than one format. So it is a good practice for HTML5 developers to let the Audio control download only metadata about each sound file. So that web browser can easily decide which format of the same sound file to download and play before downloading all file, trying to play and download and try an other, etc.
The same rule is also valid for HTML5 Video tag.

Play Audio dynamically using Javascript in HTML5

An other option for playing sound for HTML5 developers is play audio file dynamically using Javascript. In this section I'll give sample Javascript code to show how to play audio files dynamically in HTML5.

Please add the following javascript function code on your HTML5 page.
Note that developers are not required to add script type attribute any more type="text/javascript"

<script>
function playsound() {
 var sound_file;
 sound_file = '/html5/html5-audio-example-mp3.mp3'
 var html5_audio = new Audio(sound_file);
 // var html5_audio = new Audio("/html5/html5-audio-example-mp3.mp3");
 html5_audio.play();
}
</script>

If you read the above Javascript code carefully, you will see an Audio object is created with New Audio("music_file_name") and then the Play method is called. Calling the PLAY method of an AUDIO object created in Javascript is enough to play music files, sound files successfully on an HTML5 audio supporting web browser.

Also web developers can create multiple Audio object instances which enables to play multiple sound files at the same time simultaneously.

Now please copy and add the below hyperlink HTML code on your sample web page source.

<a href="javascript:void();" onclick="playsound();">click to play HTML5 audio file</a>

Now you are ready to play sample sound file using Javascript Audio object in HTML5 when you click the hyperlink: click to play HTML5 audio file

Besides all given example codes on this HTML5 audio tutorial, if you have HTML5 audio browser support on your favorite web browser, you can play audio using basic HTML5 markup language audio tag. Please go to following URL to play HTML5 audio files on your internet browser.

HTML developers can also check the HTML5 tutorial script for simple HTML5 Audio Player to see how audio object methods can be used in Javascript programming for scripting HTML5 audio.