HTML5 - Audio Tag




HTML5 Audio Tag

To know the events details of multimedia elements of HTML5, read this. In this post, we shall learn how to handle audio media in web page using HTML5.

To play audio in HTML5, we can use the <audio> tag which is introduced in HTML5. At the time of writing this post, any one of .mp3, .wav or .ogg audio files are supported in all new browsers like Google Chrome, FireFox etc. Below are html5 audio player code.

HTML5 Audio Tag

Example

<!DOCTYPE html>
<html>
<body>
<audio controls>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>
<p><strong>Note</strong> − Your browser does not support the HTML5 Audio element.</p>
</body>
</html>

Result

Note − Your browser does not support the HTML5 Audio element.

Tag Specific Attributes

The following table shows the attributes that are specific to the <audio> tag.

For Example
Attribute Value Description
autoplay autoplay This Boolean attribute specifies that the audio will automatically start playing as soon as it can do so without stopping to finish loading the data.
controls controls If specified, the browsers will display controls to allow the user to control audio playback, such as play/pause, volume, etc.
muted muted This Boolean attribute specifies whether the audio will be initially silenced. The default value is false,‚ÄČmeaning that the audio will be played.
loop loop This Boolean attribute specifies that the audio will automatically start over again, upon reaching the end.
src URL Specifies the location of the audio file. Alternatively, you can use the preferred <source> tag as it allows for multiple options.

Event Attributes

The <audio> tag also supports the event attributes in HTML5.