HTML5 Audio Tag Example

, , …,
Want to master JavaScript in a week? Buy Xah JavaScript Tutorial.

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: 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.


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

raw file: bach_wtc1_p01.mid
blog comments powered by Disqus