❮ Previous Next ❯

HTML <audio> tag

The <audio> tag is used to define the sound or audio files. This tag is new in HTML5.

Type: Inline Element

Example of <audio> tag

<audio>
--- audio file ---
</audio>

Supported audio files

Upto now, three audio file formats (.mp3, .wav, .ogg) are supported in HTML5.

Format Chrome Internet Explorer Firefox Safari Opera Mini
.mp3 Yes Yes Yes Yes Yes
.wav Yes No Yes Yes Yes
.ogg Yes No Yes No Yes

MIME types for audio formats

Audio file format MIME-type
.mp3 audio/mpeg
.wav audio/wav
.ogg audio/ogg

Supported Browsers

Tag Chrome Internet Explorer Firefox Safari Opera Mini
<audio> 4.0 or higher 9.0 or higher 3.5 or higher 4.0 or higher 10.5 or higher

Full code example

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<audiocontrols>

  <source
    src="ghost.mp3"
    type="audio/mpeg">

   <source
    src="swamp.ogg"
    type="audio/ogg">

   <source
    src="song.wav"
    type="audio/wav">

  Your browser does not support the audio element.

 <audio>
</body>
</html>
Run The code »

Output on the browser

Note that only the first supported audio player will be displayed since only one audio player (UI) is used. Others are fallback when the above one is not supported.

Since the <audio> element is an inline element, each audio section is displaying on the same row (occupying maximum space) with no line break. The browser shows the first supported audio source. The controls attribute in the audio element includes built-in controls such as Pause, Play, and Volume control. .

Attributes of <audio> tag

Attribute Value Notes
autoplay autoplay It specifies whether the audio playback should start automatically after page loading.
control control It defines the control button (like Pause, Play) of an audio playback
loop loop It defines whether the audio playback should repeat automatically and continuously.
muted muted It defines that the audio playback should be muted keeping the volume at 0.
preload auto
metadata
none		 It defines whether the audio playback should play again according to its value when the page is refreshed.
src URL It specifies the URL (or simply the location) of the audio file.
volume volume It sets the initial volume of the audio file in the range of 0.0 to 1.0.

More reference

Note that <audio> element will not display if no attribute is used. Since there is limitation in making the layout of the audio control, the <audio> is hardly used.

To define your HTML document is Version5, be sure to add <!DOCTYPE HTML> at the beginning.
❮ Previous Next ❯