HTML5 Audio Element Tutorial

Last update on August 19 2022 21:51:37 (UTC/GMT +8 hours)

Audio Element

In this page, we have discussed Description, Usage, Attributes, Example and Result, compatibility of HTML5 audio element.

HTML5 audio element embeds an audio in an HTML or XHTML web page.

HTML5 audio element supports ogg Vorbis, MP3 and WAV audio formats.

Usage

<audio src="example.ogg" autoplay></audio>

Using the autoplay attribute, you can play the audio automatically.

Whether start and end tag are required

Both start and end tag are required.

What an audio element can contain

Contains an src attribute or one or more source element, which may be followed by either text or embedded content or text content enclosed by markup.

Which elements can contain audio element

Any element which can contain text or embedded content or any element which can contain text content enclosed by markup.

Attributes

audio element supports global attributes (accesskey, class, contenteditable, contextmenu, dir, draggable, dropzone, hidden, id, lang, spellcheck, style. tabindex, title).

autoplay

If specified, browser will start playing associated audio as soon as it can. It will not stop for when the page loading is finished. This is a boolean attribute (having true or false values, but even if the value is false behavior will not change).

controls

If specified, the user will be allowed to control audio playback, including volume, seeking, and pause/resume playback by the browser.

loop

if specified, the audio will automatically be played from the start after reaching the end. This is a boolean attribute.

preload

Using this attribute, author can leave a hint to the browser about loading the associated audio file. Three different values can be used :

none : No preloading is done.

metadata : leaving a hint to preload metadata (information about the audio) only.

auto : leaving a hint to preload audio automatically.

src

The value of this attribute holds the location of the audio file.

crossorigin

An enumerated attribute used for media elements.

mediagroup

Is used to link multiple media elements together by the generation of a mediacontroller.

Example

<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset=utf-8>
<title>HTML5 audio example</title>
</head>
<body>
<audio controls="controls" autoplay="autoplay">
<source src="example.mp3" type="audio/mpeg" />
Your browser does not support the audio element.
</audio>
</body>
</html>

Browser Compatibility

We have successfully tested the above example with following browser versions.

Feature	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari
Basic support	12.0.742.122	5.0	8.0	11.50	4.0

Previous: HTML5 : Aside Element Tutorial
Next: HTML5 Canvas Element Tutorial