InfoHeap
Tech tutorials, tips, tools and more
Navigation
  • Home
  • Tutorials
    • CSS tutorials & examples
    • CSS properties
    • Javascript cookbook
    • Linux/Unix Command Line
    • Mac
    • PHP
      • PHP functions online
      • PHP regex
    • WordPress
  • Online Tools
    • Text utilities
    • Online Lint Tools
search

HTML tags

  • audio
  • input checkbox
  • label
  • li
  • ol
  • pre
  • template
  • ul
  • video
 
  • Home
  • > Tutorials
  • > HTML
  • > HTML tag

HTML5 audio tag

on Mar 10, 2016

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 done
try it online

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

Suggested posts:

  1. HTML5 – video tag
  2. HTML5 template tag hello world tutorial
  3. Javascript – dump all handlers on window object
  4. CSS resize – make block element resizable by user
  5. HTML5 shadow dom example
  6. Using camtasia to generate screencast video on your computer
  7. How to view desktop site from android mobile
  8. CORS – cross origin request tutorial and example in PHP
Share this article: share on facebook share on linkedin tweet this submit to reddit
Posted in Tutorials | Tagged HTML tag, HTML5, Tutorials

Follow InfoHeap

facebook
twitter
googleplus
  • Browse site
  • Article Topics
  • Article archives
  • Recent Articles
  • Contact Us
  • Omoney
Popular Topics: AngularJS | Apache | AWS and EC2 | Bash shell scripting | Chrome developer tools | CSS | CSS cookbook | CSS properties | CSS Pseudo Classes | CSS selectors | CSS3 | CSS3 flexbox | Devops | Git | HTML | HTML5 | Java | Javascript | Javascript cookbook | Javascript DOM | jQuery | Linux | Linux/Unix Command Line | Mac | Mac Command Line | Mysql | Networking | Node.js | Online Tools | PHP | PHP cookbook | PHP Regex | Python | Python array | Python cookbook | SEO | Site Performance | SSH | Ubuntu Linux | Web Development | Webmaster | Wordpress | Wordpress customization | Wordpress How To | Wordpress Mysql Queries

Copyright © 2022 InfoHeap.

Powered by WordPress