<audio> Element

An <audio> element represents a sound or an audio stream.

HTML reference

This element was introduced in HTML5 - 4.8.7 The audio element.

Examples

An audio, using the user agent default set of controls, with one source [try it]:

<audio controls
  src="http://media.w3.org/2010/07/bunny/04-Death_Becomes_Fur.oga">
Your user agent does not support the HTML5 Audio element.
</audio>

An audio, using the user agent default set of controls, with alternative sources [try it]:

<audio controls>
 <source src="http://media.w3.org/2010/07/bunny/04-Death_Becomes_Fur.mp4"
         type='audio/mp4'>
 <source src="http://media.w3.org/2010/07/bunny/04-Death_Becomes_Fur.oga"
         type='audio/ogg; codecs=vorbis'>
 <p>Your user agent does not support the HTML5 Audio element.</p>
</audio>

An audio, with its own HTML control [try it]:

<audio id="myAudio"
 <source src="http://media.w3.org/2010/07/bunny/04-Death_Becomes_Fur.mp4"
         type='audio/mp4'>
 <source src="http://media.w3.org/2010/07/bunny/04-Death_Becomes_Fur.oga"
         type='audio/ogg; codecs=vorbis'>
 Your user agent does not support the HTML5 Audio element.
</audio>
<button type="button" onclick="aud_play_pause()">Play/Pause</button>
<script>
function aud_play_pause() {
  var myAudio = document.getElementById("myAudio");
  if (myAudio.paused) {
    myAudio.play();
  } else {
    myAudio.pause();
  }
}
</script>

HTML Attributes

• autoplay = "autoplay" or "" (empty string) or empty
  Instructs the UA to automatically begin playback of the audio stream as soon as it can do so without stopping.
• preload = "none" or "metadata" or "auto" or "" (empty string) or empty
  Represents a hint to the UA about whether optimistic downloading of the audio stream itself or its metadata is considered worthwhile.
  • "none": Hints to the UA that the user is not expected to need the video, or that minimizing unnecessary traffic is desirable.
  • "metadata": Hints to the UA that the user is not expected to need the audio stream, but that fetching its metadata (duration and so on) is desirable.
  • "auto": Hints to the UA that optimistically downloading the entire audio stream is considered desirable.
    Specifying the empty string is equivalent to specifying the value "auto".
• controls = "controls" or "" (empty string) or empty
  Instructs the UA to expose a user interface for controlling playback of the audio stream.
• loop = "loop" or "" (empty string) or empty
  Instructs the UA to seek back to the start of the audio stream upon reaching the end.
• src = URL potentially surrounded by spaces
  The URL for the audio stream.

See also global attributes.

IDL Attributes and Methods

The following IDL attributes and methods are exposed to dynamic scripts.

  // error state
  readonly attribute MediaError error;

  // network state
           attribute DOMString src;
  readonly attribute DOMString currentSrc;
  const unsigned short NETWORK_EMPTY = 0;
  const unsigned short NETWORK_IDLE = 1;
  const unsigned short NETWORK_LOADING = 2;
  const unsigned short NETWORK_NO_SOURCE = 3;
  readonly attribute unsigned short networkState;
           attribute DOMString preload;
  readonly attribute TimeRanges buffered;
  void load();
  DOMString canPlayType(in DOMString type);

  // ready state
  const unsigned short HAVE_NOTHING = 0;
  const unsigned short HAVE_METADATA = 1;
  const unsigned short HAVE_CURRENT_DATA = 2;
  const unsigned short HAVE_FUTURE_DATA = 3;
  const unsigned short HAVE_ENOUGH_DATA = 4;
  readonly attribute unsigned short readyState;
  readonly attribute boolean seeking;

  // playback state
           attribute float currentTime;
  readonly attribute float startTime;
  readonly attribute float duration;
  readonly attribute boolean paused;
           attribute float defaultPlaybackRate;
           attribute float playbackRate;
  readonly attribute TimeRanges played;
  readonly attribute TimeRanges seekable;
  readonly attribute boolean ended;
           attribute boolean autoplay;
           attribute boolean loop;
  void play();
  void pause();

  // controls
           attribute boolean controls;
           attribute float volume;
           attribute boolean muted;

Media Events

Accessibility

Authors should ensure that the information and user interface components must be presentable to users in ways they can perceive (WCAG 2.0 - Principle 1: Perceivable). This includes providing alternatives for time-based media Guideline 1.2.

Work in still in progress proper technical support in HTML5.

Formats and Codecs

The HTML5 specification does not require a specific audio codec to be supported by all user agents due to unclear licensing rights or rights that are not consistent with the W3C Royalty-free license. Thus, one need to provide alternate sources to ensure proper experience in the existing user agents. Using Ogg/Vorbis and MP4/AAC seems to cover most of the cases out there (if not all). See the wikipedia Audio format support.

See also

1. Audio in the browser
2. HTML5 Canvas and Audio Experiment
3. HTML5 and Xiph codecs