audio
audio
This page has been flagged with the following issues:
High-level issues:
W3C Working Draft
Summary
The audio element (<audio>) is used for playing audio files and may display a minimal media player user interface.
Overview Table
| DOM Interface | HTMLAudioElement |
|---|
Standards information
- HTML5 A vocabulary and associated APIs for HTML and XHTML, Section 4.8.7
Members
The audio object has these types of members:
Events
The audio object has these events.
| Event | Description |
|---|---|
| onabort | Fires when the user aborts the download. |
| onblur | Fires when the object loses the input focus. |
| oncanplay | Occurs when playback is possible, but would require further buffering. |
| oncanplaythrough | Occurs when playback to end is possible without requiring a stop for further buffering. |
| onchange | Fires when the contents of the object or selection have changed. |
| ondrag | Fires on the source object continuously during a drag operation. |
| ondragend | Fires on the source object when the user releases the mouse at the close of a drag operation. |
| ondragenter | Fires on the target element when the user drags the object to a valid drop target. |
| ondragleave | Fires on the target object when the user moves the mouse out of a valid drop target during a drag operation. |
| ondragover | Fires on the target element continuously while the user drags the object over a valid drop target. |
| ondragstart | Fires on the source object when the user starts to drag a text selection or selected object. |
| ondrop | Fires on the target object when the mouse button is released during a drag-and-drop operation. |
| ondurationchange | Occurs when the duration attribute is updated. |
| onemptied | Occurs when the media element is reset to its initial state. |
| onended | Occurs when the end of playback is reached. |
| onerror | Fires when an error occurs during object loading. |
| onfocus | Fires when the object receives focus. |
| onfocusin | Fires for an element just prior to setting focus on that element. |
| onfocusout | Fires for the current element with focus immediately after moving focus to another element. |
| oninput | Occurs when the text content of an element is changed through the user interface. |
| onkeydown | Fires when the user presses a key. |
| onkeypress | Fires when the user presses an alphanumeric key. |
| onkeyup | Fires when the user releases a key. |
| onload | Fires immediately after the client loads the object. |
| onloadeddata | Occurs when media data is loaded at the current playback position. |
| onloadedmetadata | Occurs when the duration and dimensions of the media have been determined. |
| onloadstart | Occurs when Internet Explorer begins looking for media data. |
| onmousedown | Fires when the user clicks the object with either mouse button. |
| onmousemove | Fires when the user moves the mouse over the object. |
| onmouseout | Fires when the user moves the mouse pointer outside the boundaries of the object. |
| onmouseover | Fires when the user moves the mouse pointer into the object. |
| onmouseup | Fires when the user releases a mouse button while the mouse is over the object. |
| onmousewheel | Fires when the wheel button is rotated. |
| onpause | Occurs when playback is paused. |
| onplay | Occurs when the play method is requested. |
| onplaying | Occurs when the audio or video has started playing. |
| onprogress | Occurs to indicate progress while downloading media data. |
| onratechange | Occurs when the playback rate is increased or decreased. |
| onreadystatechange | Fires when the state of the object has changed. |
| onreset | Fires when the user resets a form. |
| onseeked | Occurs when the seek operation ends. |
| onseeking | Occurs when the current playback position is moved. |
| onselect | Fires when the current selection changes. |
| onstalled | Occurs when the download has stopped. |
| onsuspend | Occurs if the load operation has been intentionally halted. |
| ontimeupdate | Occurs to indicate the current playback position. |
| onvolumechange | Occurs when the volume is changed, or playback is muted or unmuted. |
| onwaiting | Occurs when playback stops because the next frame of a video resource is not available. |
Methods
The audio object has these methods.
| Method | Description |
|---|---|
| canPlayType | Returns a string that specifies whether the client can play a given media resource type. |
| compareDocumentPosition | Compares the position of two nodes in a document. |
| getAttributeNodeNS | Gets an attribute object that matches the specified namespace and name. |
| getAttributeNS | Gets the value of the specified attribute within the specified namespace. |
| getElementsByClassName | Gets a collection of objects that are based on the value of the CLASS attribute. |
| getElementsByTagNameNS | Gets a collection of objects that are based on the specified element names within a specified namespace. |
| hasAttributeNS | Determines whether an attribute that has the specified namespace and name exists. |
| isDefaultNamespace | Indicates whether or not a namespace is the default namespace for a document. |
| isEqualNode | Determines if two nodes are equal. |
| isSameNode | Determines if two node references refer to the same node. |
| isSupported | Returns a value indicating whether or not the object supports a specific DOM standard. |
| load | Resets the IHTMLMediaElement and loads a new media resource. |
| lookupNamespaceURI | Gets the URI of the namespace associated with a namespace prefix, if any. |
| lookupPrefix | Gets the namespace prefix associated with a URI, if any. |
| msMatchesSelector | Determines whether an object matches the specified selector. |
| pause | Pauses the current playback and sets paused to TRUE. |
| play | Loads and starts playback of a media resource. |
| removeAttributeNS | Removes the specified attribute from the object. |
| setAttributeNodeNS | Sets an attribute object as part of the object. |
| setAttributeNS | Sets the value of the specified attribute within the specified namespace. |
Properties
The audio object has these properties.
| Property | Description |
|---|---|
| autobuffer | The autobuffer element is not supported by Internet Explorer 9. Use the preload element instead. |
| autoplay | Gets or sets a value that indicates whether to start playing the media automatically. |
| buffered | Gets a collection of buffered time ranges. |
| controls | Gets or sets a flag that indicates whether the client provides a set of controls for the media (in case the developer does not include controls for the player). |
| currentSrc | Gets the address or URL of the current media resource (video,audio) that is selected by IHTMLMediaElement. |
| currentTime | Gets or sets the current playback position, in seconds. |
| defaultPlaybackRate | Gets or sets the default playback rate when the user is not using fast foward or reverse for a video or audio resource. |
| duration | Gets the duration, in seconds, of the current media resource, a NaN value if duration is not available, or Infinity if the media resource is streaming.
|
| ended | Gets information about whether the playback has ended or not. |
| error | Gets an IHTMLMediaError object representing the current error state of the media element. |
| initialTime | Gets the earliest possible position, in seconds, that the playback can begin. |
| localName | Retrieves the local name of the fully qualified XML declaration for a node. |
| loop | Gets or sets a flag that specifies whether playback should restart after it completes. |
| muted | Gets or sets a flag that indicates whether the audio (either audio or the audio track on video media) is muted. |
| namespaceURI | Retrieves the namespace URI of the fully qualified XML declaration for a node. |
| networkState | Gets the current network activity for the element. |
| paused | Gets a flag that specifies whether playback is paused. |
| playbackRate | Gets or sets the current speed for the media resource to play. This speed is expressed as a multiple of the normal speed of the media resource. |
| played | Gets TimeRanges for the current media resource that has been played. |
| prefix | Retrieves the local name of the fully qualified XML declaration for a node. |
| preload | Gets or sets a hint to how much buffering is advisable for a media resource, even if autoplay is not specified. |
| seekable | Returns a TimeRanges object that represents the ranges of the current media resource that can be seeked. |
| seeking | Gets a flag that indicates whether the the client is currently moving to a new playback position in the media resource. |
| src | The address or URL of the a media resource (video, audio) that is to be considered. |
| textContent | Sets or retrieves the text content of an object and any child objects. |
| volume | Gets or sets the volume level for audio portions of the media element. |
Examples
Basic usage
HTML
<audio src="http://developer.mozilla.org/@api/deki/files/2926/=AudioTest_(1).ogg" autoplay> Your browser does not support the audio element. </audio>
Notes
Remarks
Beginning with Internet Explorer 9, any audio or video content needs the correct mime type set on the server, or the files won't play. Internet Explorer 9 supports MP3 audio, and MP4 audio and video. WebM audio and video files can be supported by installing the WebM components from The WebM project. The following table shows the required settings for your web server to host these files correctly.
| Media file to serve | Extension setting | Mime type setting |
|---|---|---|
| Audio mp3 | mp3 | audio/mpeg |
| Audio mp4 | m4a | audio/mp4 |
| Audio WebM | webm | audio/webm |
| Video mp4 | mp4 | video/mp4 |
| Video webm | webm | video/webm |
Compatibility
Desktop
| Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| Basic Support | 3 | 3.5 | 9 | 10.50 |
4
|
| MP3 | 3 | Unsupported | 9 | Unsupported |
4
|
| OGG (Vorbis) | 3 | 3.5 | Unsupported | 10.50 |
Unsupported
|
| WebM (Vorbis) | 6 | 4 | Unsupported | 10.60 |
Unsupported
|
| WAV (PCM) | 8 | 3.5 | ? | ? |
4 |
Mobile
| Feature | Android | BlackBerry | Chrome for mobile | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Opera Mini | Safari Mobile |
|---|---|---|---|---|---|---|---|---|
| Basic Support | 2.3 | 7.0 | 18.0 | 15.0 | 9.0 | 11.0 | Unsupported | 4.0
|
| MP3 | 2.1 | ? | ? | ? | 9.0 | ? | ? | 3.2
|
| OGG | Unsupported | ? | ? | ? | Unsupported | ? | ? | Unsupported
|
| WAV | Unsupported | ? | ? | ? | 10.0 | ? | ? | 3.2
|
| AAC-LC | Unsupported | ? | ? | ? | 9.0 | ? | ? | 3.2
|
| HE-AAC | Unsupported | ? | ? | ? | 9.0 | ? | ? | 3.2 |
Compatibility notes
| Browser | Version | Note |
|---|---|---|
| Mobile Safari (and WebKit wrappers) | Audio is always played using a full screen player. | |
| Mobile (Android, IE, Safari) | All | Cannot play more than one audio file at the same time. |
See also
Related articles
HTML
- audio
Related pages (MSDN)
Audio objectHow to use HTML5 to Add an Audio Player to your Webpage
This article contains content originally from external sources.
Portions of this content come from the Mozilla Developer Network 
: Article
Portions of this content come from the Microsoft Developer Network: [Windows Internet Explorer API reference Article]
This tool helps to make and review comments inline.
How to Use
insert instructions, with images, here