HTML <audio> Tag

The <audio> tag creates an audio player on a web page. The <audio> element supports media controls, such as, play, pause, volume, and mute.

HTML Tag

Example

#

An <audio> player with controls: play, pause, volume, etc.

<audio controls>
  <source src="/media/epic.mp3" type="audio/mpeg">
</audio>

Note:  By default, the <audio> player has no visual representation and is invisible.
Adding the controls attribute makes it appear (i.e. visible).


Using <audio>

To play audio on a web page, use the <audio> tag.

The <audio> element supports media controls, such as, play, pause, volume, and mute.

The <audio> tag references one or more audio files with a src attribute or the <source> elements.

The browser will choose the first file with a file format that it supports.

Supported audio file formats include MP3, WAV, and OGG.

More Examples

An <audio> tag that specifies two audio files.
The browser uses the first file type that it supports.

<audio controls>
  <source src="/media/epic.mp3" type="audio/mpeg">
  <source src="/media/epic.wav" type="audio/wav">
  Your browser does not support audio element.
</audio>

Code Explanation

  • <audio> - defines an audio element
  • controls - enables audio controls: play, pause, volume, mute, and download
  • <source> - defines an audio file source
    • src - URL or file name of the audio to play
    • type - file format of the audio

Note: For multiple sources, the first supported file type will play.


Attributes for <audio>

This table lists the <audio> tag attributes.

Attribute Accepted Values Description
controls no value Enables audio controls such as play/pause, volume, and others.
src URL Audio file URL / path.
id    identifier Defines a unique identifier for the audio.
class    classnames Sets one or more CSS classes to be applied to the audio.
style    CSS-styles Sets the style for the audio.
data-*    value Defines additional data that can be used by JavaScript.
hidden    hidden Specifies whether the audio is hidden.
title    value Sets a title that displays as a tooltip.
autoplay no value Tells the browser that the audio will start playing immediately
loop no value Specifies that audio is repeated every time it completes
muted no value Tells the browser that the audio must be muted (silenced).
preload auto
metadata
none
Specifies how the audio file is loaded once page has been loaded
crossorigin anonymous
use-credentials
Specifies how crossorigin requests are handled.

For additional global attributes see our global attributes list.


File formats for <audio>

This table lists the audio formats each browser supports.

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

Media types for audio files

These are the media types for each audio file format.

Format Media-type
MP3 audio/mpeg
OGG audio/ogg
WAV audio/wav

Additional Examples

An <audio> tag with a loop attribute.
The audio file will play repeatedly.

<audio controls loop>
  <source src="/media/epic.mp3" type="audio/mpeg">
  <source src="/media/epic.wav" type="audio/wav">
</audio>

An <audio> tag with a muted attribute.
This attribute mutes (silences) the audio.

<audio controls muted>
  <source src="/media/epic.mp3" type="audio/mpeg">
  <source src="/media/epic.wav" type="audio/wav">
</audio>

Audio DOM

The<audio> element exposes a DOM (Document Object Model).
This gives JavaScript programmatic control over the audio.

An <audio> player that 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 onclick="play();">Play</button>
<button onclick="pause();">Pause</button>

<script>
    let audio = document.getElementById("myaudio");

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

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

Did you know?

Did you know?

Playing audio with an in-memory audio element

JavaScript can create an in-memory audio element and then play an audio file.

Click the <button> and JavaScript will play an audio file -- all without an audio tag.

<button onclick="play();">Play</button>

<script>
  let play = () => {
    let audio = new Audio('/media/epic.mp3');
     audio.play();
  }
</script>

Media Tags

The <audio> tag is part of a group of tags that create multi-media experiences on the web. This group is referred to as the Media tag group. Together, these tags allow you to create powerful multi-media solutions.

These are the media tags.

Element Description
<audio> Creates a player for sound such as music, sound effects, or others
<video> Creates a video player on a page
<source> Adds a media source for a <video>, <audio>, or <picture>
<track> Adds a text track, such as, subtitles and captions, to the media
<embed> Creates a container for an external resource
<iframe> Creates a frame in which another web page can be embedded
<svg> Displays an scalable vector image
<canvas> Creates a graphics container where JavaScript can draw
<img> Displays an image
<area> Specifies a map area for an image
<map> Defines a client-side image map, i.e. an image with clickable areas
<figure> Displays self-contained content, usually an image
<figcaption> Adds a caption to a <figure> (image) element

Browser support

Here is when <audio> support started for each browser:

Chrome
4.0 Jan 2010
Firefox
3.5 Jun 2009
IE/Edge
9.0 Sep 2012
Opera
10.0 Aug 2009
Safari
11.5 Jun 2009

You may also like

Guides