Steps to use Audio Tag in HTML5

In this article, we have covered how to use Audio tag in HTML5.

The HTML DOM defines methods, properties, and events for the <audio> element. This allows you to load, play, and pause audios, as well as set duration and volume. There are also DOM events that can notify you when an audio begins to play, is paused, etc.

Since the release of HTML5, audios can be added to webpages using the “audio” tag. Previously audios could be only played on webpages using web plugins like Flash. The <audio> element represents a sound, or an audio stream. It is commonly used to play back a single audio file within a web page, showing a GUI widget with play/pause/volume controls.

Adding Audio to HTML5 Using the <audio> Tag

This is how you add audio to HTML5 using the <audio> tag:

<audio controls loop autoplay preload=”none”

The various attributes that can be used with the “audio” tag are listed below :

  • Controls : Designates what controls to display with the audio player.
  • Autoplay : Designates that the audio file will play immediately after it loads controls.
  • Loop : Designates that the audio file should continuously repeat.
  • src : Designates the URL of the audio file.
  • muted : Designates that the audio file should be muted.

Format support

You may want to provide multiple formats because MP3 is not an open format, therefore some browsers can’t support it. A free format, Ogg, would be great across the board, but it’s not supported by all browsers. See here for a list of browser format support. Use the source element within the audio element to provide different formats:

<audio controls>
<source src=” jazz.mp4″ type=”audio/mp4″ />
<source src=”jazz.oga” type=”audio/ogg; codecs=vorbis” />

And you can provide extra markup for browsers that don’t support audio:

<source src=”deep-house-track.ogg”>
<source src=”deep-house-track.mp3″>
<p>Your user agent does not support the HTML5 Audio element.</p>

This is the basic functionality of the new <audio> element in HTML5.

We have seen how to use Audio tag in HTML5.

Checkout our 10Gbps dedicated server plans.

Related Articles