HTML Audio

An audio player can be added to a web page with the <audio> tag.  The audio file to play is specified with a src attribute, or a nested <source> tag. Supported video file formats include mp3, wav, and ogg.

HTML Tutorial

Example

An <audio> element.

<audio controls>
  <source src="/media/epic.mp3" type="audio/mpeg">
  <source src="/media/epic.wav" type="audio/wav">
  Please upgrade your browser to play audio.
</audio>

Code Explanation

The <audio> tag creates an audio control.

The controls attribute adds play, pause, timer, and volume audio controls.

The <source> tags set the audio files to play and their media types. The browser selects the first recognized format.

If the browser does not support the <audio> tag, then the text inside the tag will display.


File Formats

HTML5 supports three audio formats MP3, WAV, and OGG.
Their media types are audio/mpeg,  audio/wav, and audio/ogg respectively.
Most browsers accept these formats.

Browser MP3 WAV OGG
Chrome
Yes Yes Yes
Firefox
Yes Yes Yes
IE/Edge
Yes Yes Yes
Opera
Yes Yes Yes
Safari
Yes Yes No

Audio DOM

The <audio> element exposes a DOM (Document Object Model) that allows programmatic control of the audio. This example shows how to play and pause audio with JavaScript.

<audio id="myaudio">
  <source src="/media/epic.mp3" type="audio/mpeg">
  <source src="/media/epic.wav" type="audio/wav">
  Please upgrade your browser to play audio.
</audio>

<button class="btn" onclick="play();">Play</button>
<button class="btn" onclick="pause();">Pause</button>

<script>
  var element = document.getElementById("myaudio");

  let play = () => {
    element.play();
  }

  let pause = () => {
    element.pause();
  }
</script>

For more information on <audio>, see our HTML audio Tag Reference.


Browser Support

This table lists when <audio> support started for each browser:

Chrome
4.0 Mar 2011
Firefox
3.5 Jun 2009
IE/Edge
9.0 Mar 2011
Opera
10.5 Feb 2010
Safari
4.0 Jun 2009

You may also like

Guides