HTML5 Audio Tag Example

Perm URL with updates: http://xahlee.org/js/html5_audio.html

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

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.

As of , it works in Firefox 3.6.12, Chrome 7.0, Opera 10.63. (all on Windows)

As of , it does not work in Safari 5.0.5, IE 9. (probably due to the ogg format.)

HTML5 Audio Tag Attributes

Following are optional attributes.

AttributePossible ValuesComment
preloadnone, metadata, auto
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”.

Test Your Browser

Here's different audio formats, using audio tag.

raw file: test.m4a
raw file: i/s/test.oga

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

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