How To Use the HTML5 Audio Element

HTML5 has entered our lives for good and it is changing the way we are embedding media on our web pages. HTML5 looks set to make life easier for us developers, thanks to its audio element. This element lets you embed an audio file in a web page, as well as control playback of the sound using JavaScript. More importantly, it doesn’t require any plugin to work, and is supported by nearly all modern web browsers.

Other useful related articles:

In this article, We will learn together that how to use the <audio> tag to play sounds on our websites.

HTML5 <audio> element to add sound file

The basic <audio> tag is really easy to use. Here is the most basic use of the <audio> tag: In the following example it loads a mp3 file and play it and autoplay attribute is used to play the sound automatically.

<audio>
  <source src="voice.mp3">
</audio>

Cross-browser support

<audio> is supported by most modern browsers, but the problem is that different browsers do not support the same file format. Some browsers can play .mp3 files but not .ogg files, while other browsers can play .ogg files but not .mp3. The solution to this problem is to use both formats, so visitors can hear your sound, whatever the browser they use.

<audio>
  <source src="voice.ogg">
  <source src="voice.mp3">
</audio>

Playing a sound automatically

If we want the sound to play automatically when the page has loaded, the autoplay attribute is used to play the sound automatically.

<audio autoplay>
  <source src="voice.mp3">
  <source src="voice.ogg">
</audio>

Looping playback

If you want the audio to play endlessly use loop attribute to the <audio> tag.

<audio loop>
  <source src="voice.mp3">
  <source src="voice.ogg">
</audio>

Adding player controls

It can be annoying playing sounds automatically as soon as you view a page, which is definitely a bad practice, you should let the browser display some controls such as volume, and a play/pause button. This can be done easily, simply by adding the controls attribute to the tag.

<audio controls>
  <source src="voice.mp3">
  <source src="voice.ogg">
</audio>

Specify MIME types

It is a good practice to specify the MIME type of each file when using different file formats. It can be done by using the type attribute.

<audio controls>
  <source src="voice.mp3" type="audio/mp3">
  <source src="voice.ogg" type="audio/ogg">
</audio>

Fallback for old browsers

<audio controls>
  <source src="voice.mp3" type="audio/mp3">
  <source src="voice.ogg" type="audio/ogg">
  Sorry, your browser does not support the audio element.
</audio>

The brief functional breakdown of the element above would be:

  • Try to play the .mp3 audio file
  • If item 1 fails, try to play the .ogg file
  • If item 2 fails, display the “browser does not support” message

Buffer files

It is a good practice to buffer the files when using the large media files. It can be done by using the preload attribute.

Preload attribute accept 3 values:

  • None: File not buffered
  • Auto: Browser buffer the file automatically
  • Metadata: When page loads only buffer metadata
<audio controls>
  <source src="voice.mp3" type="audio/mp3" preload="auto">
  <source src="voice.ogg" type="audio/ogg" preload="auto">
</audio>

The <audio> tag has a lot of attributes which can be used for additional controls, including the event attributes in HTML5. Events include window events, which are triggered for the window object, form events, which are triggered by actions that occur within an HTML form, keyboard and mouse events, and media events.

In Closing

There are many excellent HTML5 tutorials and resources available on the web to help you get experienced. No matter what your level of expertise is, jump in, get your coding feet wet, and begin using HTML5 on your websites. Feel free to leave a comment below!