HTML Tutorial | HTML5 Multimedia | Audio Element

Tags:

Audio Element

Before HTML5, there was no standard way to play audio on a web page.
Therefore, embedding audio required reliance on external plug-ins such as Flash.
HTML5 provides a standardized way to embed audio in a web page by using the <audio> tag.

The major web browser versions that support the <audio> tag are as follows.

Element ie chrome firefox safari opera
<audio> tag 9.0 4.0 3.5 4.0 10.5

Attributes of the Audio Element

Example

<audio controls>
    <source src="/examples/media/sample_audio_ogg.ogg" type="audio/ogg">
    <source src="/examples/media/sample_audio_mp3.mp3" type="audio/mp3">
    This sentence appears when the user's web browser does not support the audio element.
</audio>

The controls attribute creates a panel for controlling basic audio operations such as play, stop, and volume adjustment.

Among multiple <source> tags, the web browser uses the first file type and address it recognizes, checking from top to bottom. Text placed between <audio> tags is displayed only when the browser does not support the <audio> tag.

The autoplay attribute sets whether music should play automatically when the web page loads.

Example

<audio controls autoplay>
    <source src="/examples/media/sample_audio_ogg.ogg" type="audio/ogg">
    <source src="/examples/media/sample_audio_mp3.mp3" type="audio/mp3">
    This sentence appears when the user's web browser does not support the audio element.
</audio>

When the loop attribute is set, the audio keeps repeating even after playback ends.

Example

<audio controls loop>
    <source src="/examples/media/sample_audio_ogg.ogg" type="audio/ogg">
    <source src="/examples/media/sample_audio_mp3.mp3" type="audio/mp3">
    This sentence appears when the user's web browser does not support the audio element.
</audio>

HTML5 Audio File Formats

The only audio file formats officially supported by the HTML5 standard are MP3, WAV, and Ogg.

  • MP3: Developed by the Moving Picture Experts Group; a lossy compressed file format developed as the MPEG-1 audio standard.
  • WAV: Developed by IBM and Microsoft; the standard audio file format from IBM and Microsoft for playing audio on personal computers.
  • Ogg: Developed by the Xiph Foundation; an open multimedia file format that is not protected by patents and was developed as an alternative to MP3.

The following table shows support for each HTML5 audio file format in major web browsers.

File format Media type ie chrome firefox safari opera
MP3 audio/mp3 ○ ○ ○ ○ ○
WAV audio/wav Χ ○ ○ ○ ○
Ogg audio/ogg Χ ○ ○ Χ ○

HTML5 audio Elements

Element Description
audio Specifies an audio file, such as audio or music.
source Specifies multiple file formats and file addresses for the source file of the audio element. The web browser uses the first file format and file address it recognizes, checking from top to bottom.

HTML5 audio Attributes

Attribute Description
src Specifies the path to the audio file.
controls Specifies a panel for controlling basic audio operations.
autoplay Specifies whether the audio should play automatically.
loop Specifies whether the audio should repeat.
preload Specifies whether to load all file contents before playing the audio.