HTML <Audio> Tag

Definition

The <audio> Tag is used to embed a sound file in your HTML document. It can contain multiple audio sources, with the browser choosing the most suitable one via the <src> attribute or <source> element. You can also use <audio> tags for streaming media using MediaStream.

Example

<figure style="margin:0;">
    <figcaption>Listen to the Dog Bark:</figcaption>
    <audio style="margin-top:1rem;"
        controls
        src="https://upload.wikimedia.org/wikipedia/commons/5/58/Barking_of_a_dog_2.ogg">
            Your browser does not support the
            <code>audio</code> element.
    </audio>
</figure>

Usage

• The <audio> element is used in a similar way as the <img> element. You specify a path to the media with the src attribute and use other attributes to specify other information, such as player settings.
• You can specify fallback text by including it beween the <audio> and <\audio> tags in case the browser does not support it.
• You can specify multiple sources so that if a browser does not support your chosen file type or codex, it can play a different version. Specifying a different source is easy, for example:

  <figure>
  <figcaption>Listen to the T-Rex:</figcaption>
  <audio controls>
      <source src="https://upload.wikimedia.org/wikipedia/commons/5/58/Barking_of_a_dog_2.mp3" type="audio/mpeg">
      <source src="https://upload.wikimedia.org/wikipedia/commons/5/58/Barking_of_a_dog_2.ogg" type="audio/ogg">
      <p>Your browser does not support the <code>audio</code> element.</p>
  </audio>
  </figure>

  Try it Yourself
• For the audio widget to display the player controls you need to include the controls attribute.
• The default control has a display of inline, which means it will sit within any text blocks. You may wish to set this to block for better positioning. You may also want to add margin, border-radius, or padding to further customize the look and feel of the player. Different browsers may display the audio player slightly differently, so you may want to check how it looks on a a variety of browsers.

Attributes

The Audio element supports the Global Attributes, as well as the following:

• autoplay

  The autoplay attribute is a boolean attribute (either present on not) that specifies the audio to begin automatically as soon as it can. It does not wait for the whole audio file to be downloaded.

  <figure>
    <figcaption>Listen to the Dog Bark:</figcaption>
    <audio controls autoplay
        src="https://upload.wikimedia.org/wikipedia/commons/5/58/Barking_of_a_dog_2.ogg">
            Your browser does not support the
            <code>audio</code> element.
    </audio>
  </figure>

  Try it Yourself

• controls

  The controls attribute specifies whether to display the default browser controls enabling the user to stop or start the playback, change the volume, and position seek.

• crossorigin

  The crossorigin attribute relates to whether to use CORS to fetch the audio file. When not used, the audio file is requested without sending the origin. You can read more about this here.

• currentTime

  The currentTime attribute specifies the current playback position of the audio in seconds.

• duration

  The duration attribute specifies the total length of the audio in seconds. This attribute is read-only.

• loop

  loop is a boolean attribute (either present on not) that specifies the audio to automatically start from the beginning once it reaches the end of the audio.

  <figure>
    <figcaption>Listen to the Dog Bark:</figcaption>
    <audio controls loop
        src="https://upload.wikimedia.org/wikipedia/commons/5/58/Barking_of_a_dog_2.ogg">
            Your browser does not support the
            <code>audio</code> element.
    </audio>
  </figure>

  Try it Yourself

• muted

  The muted attribute specifies whether to start the audio with no sound. The default value is false.

  <figure>
  <figcaption>Listen to the Dog Bark:</figcaption>
  <audio controls muted
      src="https://upload.wikimedia.org/wikipedia/commons/5/58/Barking_of_a_dog_2.ogg">
          Your browser does not support the
          <code>audio</code> element.
  </audio>
  </figure>

  Try it Yourself

• preload

  The preload attribute specifies whether the browser should preload the audio file. It takes the following values:

  • none - indicates that it should not be preloaded.
  • metadata - only the metadata, such as audio length, should be fetched.
  • auto - indicates the whole audio file should be downloaded automatically, regardless of user intent.
  • Where no value is given, it will be treated as using the auto value.

  It should be noted that where autoplay is specified, it will take precedence.

• src

  The src attribute specifies the source of the audio file. You can use the <source> element within the audio element instead if you wish.

Events

The Audio element supports the following events:

• audioprocess
• canplay
• canplaythrough
• complete
• durationchange
• emptied
• ended
• loadeddata
• loadedmetadata
• pause
• play
• playing
• ratechange
• seeked
• seeking
• stalled
• suspend
• timeupdate
• volumechange
• waiting

Best Practices

• Auto-playing audio can be unpleasant for users. It is recommended not to use the autoplay attribute wherever possible.

Specification

• HTML Living Standard Specification
• HTML5 Specification

Browser Support

Desktop

Mobile