Audio (HTML tag)

The audio tag was introduced as part of the HTML5 suite of additions to the HTML standard. Allows digital audio to be embedded in the page and handled natively by the browser.

Attributes & Methods

currentTime

NB This attritube is read/writable, meaning that setting a new value (via an assignment statement) causes the player to actively seek the new position. Significantly, most browsers have techniques that allow media to be seek to an arbitrary point in a random access fashion (ie without first loading all the data from the start to that point. This is accomplished using the Range Header functions of the HTTP protocol and thus works with standard web servers (like Apache) without specialized media-specific plugins.

State: paused, seeking, ready, readyState

Paused is true/false saying whether the audio has been paused.

play, pause

NB there is no "stop" in the HTML5 specification. Typically to stop playback, you'd simply pause(). To actually unload the player, you can better remove it from the page, via a DOM method (such as removeChild).

Events

Like other HTML, the key to programming interactions lies in the use of events, "callbacks" that allow you to specific behaviors, in the form of "callback" functions that are triggered in the event of certain pre-defined cases (such as the audio tag finishing loading, or being paused by the user). In addition to allowing for user interaction, events allow different code libraries to work together as each reponds to events happening on the page, rather than requiring explicit connections to be made in code.

loaded

Triggered when the audio tag has first loaded.

durationchange

Triggered, typically once, when a video has loaded enough that the duration is known. In a properly made audio file, the duration is stored in the "header" (first bytes) of the file so that the browser will know the duration after it receives the first part of the file.

timeupdate

Triggered repeatedly as audio plays (most browsers will send this event about 4 times a second while the tag is playing). You typically would check and do something specific with .currentTime.

play, pause

Typically this event is triggered as the result of the user clicking the pause/play toggle in the audio tag's controls. The event is however also triggered anytime the player stops or starts (so also in response to a script calling .play() or .pause()).