HTML5 Audio Tag Tutorial

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

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: http://www.w3.org/TR/html51/embedded-content.html#the-audio-element

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.

MIDI File

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

raw file: bach_wtc1_p01.mid

Reference

http://www.w3.org/TR/html51/embedded-content.html#the-audio-element

blog comments powered by Disqus