HTML5 Audio Feature

The HTML5 AUDIO element allows you to add audio to a web page without the need for plug-ins. Like the VIDEO element, the AUDIO element is a standard web page element that can be programmatically controlled using simple HTML attributes or JavaScript and styled with CSS to provide a consistent user interface. However, as with the VIDEO element, the HTML5 specification does not dictate which codecs should be supported, and thus codec support varies among browsers and platforms.
HTML5 Audio
the expressive web

Minimum Browser Support:

HTML5 Audio
54.21%
Percentage of users who can view this feature (source: caniuse.com)

Examples

  • Pirates Love Daisies

    Leverages HTML5 audio for all game sounds and music.

  • 9elements

    Interactive music visualizer that leverages HTML5 audio for music playback.

Feature Detection

To ensure a client agent can play back your audio, you need to test support for the AUDIO element as well as for the specific audio codecs used in your source:

if(Modernizr.audio){
   //browser supports HTML5 Audio
   //note the Modernizr.audio.* apis return
   //"maybe", "probably" or an empty string
   if(Modernizr.audio.mp3){
      //browser supports the mp3 codec
   }
   else if(Modernizr.audio.ogg){
      //browser supports the Ogg Vorbis codec
   }
   else if(Modernizr.audio.m4a){
      //browser supports AAC codec
   }
}

Learn more about detecting feature support with Modernizr.

Related Adobe Technologies