HTML5 Audio Tag Tutorial

By Xah Lee. Date: . Last updated: .

This page shows you how to embed audio using HTML5's “audio” tag.

Here's a example of embeded audio.

<audio src="i/Bach_WTC1_1_Martha_Goldstein.ogg" controls></audio>

Here's what your browser shows.

Bach's Well-tempered Clavier, Book I, prelude 1. (Raw file: Bach_WTC1_1_Martha_Goldstein.ogg)

HTML5 Audio Tag Attributes

Following are the most useful optional attributes.

AttributePossible ValuesComment
preloadauto, metadata, nonedefault is auto, meaning browser decides.
controlsDoes not take any value
autoplayDoes not take any value
loopDoes not take any value

Note that the attributes {controls, autoplay, loop} do not take any value. Their existence or non-existence defines the behavior. It is incorrect to add a ="true" or ="false" in them. This type of attributes is called “boolean attributes”.

For complete list of attributes, see:

Test Your Browser

Here's different audio formats, using audio tag.

raw file: test.m4a
raw file: test.oga
raw file: coi.mp3

As of , m4a (AAC) format is supported by: Chrome, Safari.

As of , ogg format is supported by: Chrome, Safari, Opera.

As of , mp3 and aac formats are supported by all major browsers.


Here's MIDI file. They don't seem to be supported by any browser.

raw file: bach_wtc1_p01.mid


Liket it? Put $5 at patreon.

Or, Buy JavaScript in Depth

If you have a question, put $5 at patreon and message me.

Web Dev Tutorials

  1. HTML
  2. Visual CSS
  3. JS Basics
  4. JS in Depth
  5. JS Reference
  6. DOM
  7. SVG
  8. JS Misc