HTML5 audio tag

HTML5 audio tag (<audio>) can be used to play an audio in HTML page. When multiple sources are specified, browser uses the first recognized format.

html-audio-tag

Audio tag attributes

Attribute Value Description
src url The source of the resource
crossorigin anonymous|use-credential How the element handles crossorigin requests
preload none|metadata|auto Hints how much buffering the media resource will likely need
autoplay boolean (present or not) Start media automatically on load
mediagroup text Groups media elements together
loop boolean (present or not) Whether to loop
muted boolean (present or not) Whether to mute the media resource by default
controls boolean (present or not) Show user agent controls

Browser support for various formats

  • Mp3 (Broadly supported by Chrome, Firefox, IE, Edge, Safari, Opera)
  • Wav audio format (Broadly supported by Chrome, Firefox, Edge, Safari, Opera)
  • Ogg Vorbis (Broadly supported by Chrome, Firefox, Opera)

Example – Audio tag with controls

This example display an audio with controls (without autoplay) which runs in loop when played. Also note that attributes like loop and controls can be used without a value. So specifying loop is equivalent to loop="loop".

<style type="text/css">
  audio {border: 2px solid lightgreen;}
</style>

<audio loop controls>
  <source src="http://infoheap.s3-us-west-1.amazonaws.com/pub/video/non-existing-file.mp3">
  <source src="http://infoheap.s3-us-west-1.amazonaws.com/pub/video/brook-with-waterfall-s.mp3">
</audio>
refresh

Specification and Browser compatibility

SpecificationStatusCategories
Audio elementWHATWG Living StandardHTML5
Desktop
ChromeFirefoxIEEdgeSafariOpera
Yes 4+ Yes 3.5+ Yes 9+ Yes 12+ Yes 4+ Yes 10.5+
Mobile
Android ChromeAndroid FirefoxiOS SafariIE MobileOpera Mobile
Yes 47+ Yes 44+ Yes 4.0-4.1+ Yes 10+ Yes 11+
source: caniuse.com
Share this article: share on Google+ share on facebook share on linkedin tweet this submit to reddit

Comments

Click here to write/view comments