Tutorial #5
Play an Audio file Basic   2013-11-01

Introduction

HTML5 has delivered a number of technologies for creating and playing audio in the web browser. The simplest of these if the <audio> tag which allows you play an audio file located on the same machine as the serve.

The audio tag will look like this:

The audio sample used in the demo is a clip of the Doctor Who theme by Delia Derbyshire and the BBC Radiophonic Workshop and was downloaded from Wikipedia.


Step by Step

Be aware that the audio tag will only play files that reside on the same machine as the web server.

1: Download the audio file that you want to play and save it to a directory that your web server can access, e.g. my_project/public/my_audio_file.wav

Most browsers that understand the audio tag will play audio files in any of the common formats such as .wav, .ogg, .mp3, ...

2: Copy and paste the example code shown below into your page where you want the audio widget to appear.

3: Change the path after the src= to that of your file.

This path is the partial URL to that file, not the directory path on your file system.

4: Reload your page - the audio should start playing automatically.


Understanding the Code

The audio tag has limited options. In this example the autoplay attribute is set equals to 'autoplay'. In fact it can be set to anything, as long as it is present and set to something, it will be active. The same applies to the controls attribute.

The autoplay attribute causes the audio to start playing as soon as the page is loaded. This may or may not be what you want depending on your application.

The controls attribute makes the tag with basic playback controls visible. If you remove this attribute then the tag is not visible to the user but will play in the background because of the autoplay tag.

The loop attribute will keep playing the audio in a continuous loop if it is present - this is probably NOT what you want to do.

The source tag specifies the audio file that will be played. You can specify multiple source tags for the same audio in different file formats. Your browser will play the first of these that is can handle.

Older browsers may be support the audio tag. The p within the tag pair is a fallback for these users so they know what they are missing. You might include a link that lets them upgrade to a newer browser.

You may see audio tag pairs that specify the source directly using a src attribute in the audio tag directly. This is shorter but I prefer the longer format shown here.

There has been an issue with Mozilla Firefox not support MP3 audio files. This is because the MP3 format is proprietary and not consistent with the Mozilla open source philosophy. It should be able to play these files as long as the operating system has built-in libraries for playing MP3 files.

The audio tag is simple to use but has limited capabilities. In other tutorials I will show how to play audio using Javascript, which allows you to do so much more.


Code for this Tutorial


Share this tutorial


Related Tutorials

6 : Play an Audio file using JavaScript   (Intermediate)


Comment on this Tutorial


comments powered by Disqus