HTML <audio> Tag

The <audio> is one of the HTML5 elements added to allow embedding audio files to a web page. Since not all browsers support all audio formats, the audio file is encoded using special codecs.

The <source> tag or the src attribute is used to indicate the variations of the same audio file. The path to an audio file can contain an absolute or relative URLs.

Syntax

The <audio> tag comes in pairs. The content is written between the opening (<audio>) and closing (</audio>) tags.

<audio>
  <source src="URL">
  <source src="URL">
</audio>

Example of the HTML <audio> tag:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <audio controls>
      <source src="/build/audios/jingle_bells.ogg" type="audio/ogg">
      <source src="/build/audios/audio.mp3" type="audio/mpeg">
    </audio>
    <p>Click the play button</p>
  </body>
</html>

The Loop Attribute

Using the loop attribute will make the audio file play over and over again:

<audio src="audio.mp3" autoplay loop></audio>

Displaying Browser Controls

You can let the browser display to the user such controls, as volume or play/pause. It is done with the help of controls attribute.

<audio src="audio.mp3" controls></audio>

Example of the HTML <audio> tag with the controls attribute:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <audio controls src="/build/audios/audio.mp3">
      Your browser does not support the audio element.
    </audio>
    <p>Click the play button</p>
  </body>
</html>

Several File Formats

With the <audio> tag you can define multiple formats of the same audio file.

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

Attributes

The <audio> tag has attributes, that indicate the path to the audio file, the way how the audio file should be played, etc. Here the controls, autoplay, loop and muted attributes are used, and their values can be omitted. If the attribute is specified, then by default this function is considered to be enabled.

Attribute Value Definition
autoplay Plays the audio file automatically after loading the page.
controls Displays the control panel (start button, scroll, volume control). If the controls attribute is missing, the audio file will not be displayed on the page.
loop Repeats continuously the audio file from the beginning after its completion.
muted Mutes the sound when the audio file is played.
preload Defines what browser should do, if the attribute controls is not specified.
auto Playback starts after the page is loaded.
metadata Tells the browser to upload a small portion of the file to determine its main characteristics: (for example, file size).
none Playback starts only after clicking the corresponding button.
src URL Specifies the path to the audio file.

The <audio> tag supports the Global Attributes and the Event Attributes.


Browser support

4+ 3.5+ 4+ 10.5+


Do you find this helpful?

Related articles