Web/API/HTMLAudioElement

The HTMLAudioElement interface provides access to the properties of <audio> elements, as well as methods to manipulate them. It's based on, and inherits properties and methods from, the HTMLMediaElement interface.

  <div id="interfaceDiagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveAspectRatio="xMinYMin meet"><a xlink:href="https://developer.mozilla.org/en-US/docs/Web/API/EventTarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#D4DDE4" stroke-width="2px" /><text  x="56" y="30" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">EventTarget</text></a><polyline points="111,25  121,20  121,30  111,25" stroke="#D4DDE4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#D4DDE4"/><a xlink:href="https://developer.mozilla.org/en-US/docs/Web/API/Node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#D4DDE4" stroke-width="2px" /><text  x="188.5" y="30" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">Node</text></a><polyline points="226,25  236,20  236,30  226,25" stroke="#D4DDE4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#D4DDE4"/><a xlink:href="https://developer.mozilla.org/en-US/docs/Web/API/Element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#D4DDE4" stroke-width="2px" /><text  x="303.5" y="30" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">Element</text></a><polyline points="341,25  351,20  351,30  341,25" stroke="#D4DDE4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#D4DDE4"/><a xlink:href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#D4DDE4" stroke-width="2px" /><text  x="436" y="30" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">HTMLElement</text></a><polyline points="491,25  501,20  501,30  491,25" stroke="#D4DDE4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#D4DDE4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#D4DDE4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#D4DDE4"/><a xlink:href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement" target="_top"><rect x="331" y="65" width="160" height="50" fill="#fff" stroke="#D4DDE4" stroke-width="2px" /><text  x="411" y="94" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">HTMLMediaElement</text></a><polyline points="331,89  321,84  321,94  331,89" stroke="#D4DDE4" fill="none"/><line x1="321" y1="89" x2="291" y2="89" stroke="#D4DDE4"/><a xlink:href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLAudioElement" target="_top"><rect x="131" y="65" width="160" height="50" fill="#F4F7F8" stroke="#D4DDE4" stroke-width="2px" /><text  x="211" y="94" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">HTMLAudioElement</text></a></svg></div>

  a:hover text { fill: #0095DD; pointer-events: all;}

Constructor

Audio(): Creates and returns a new HTMLAudioElement object, optionally starting the process of loading an audio file into it if the file URL is given.

Properties

No specific properties; inherits properties from its parent, HTMLMediaElement, and from HTMLElement.

Methods

Inherits methods from its parent, HTMLMediaElement, and from HTMLElement. It offers no methods of its own.

Obsolete Mozilla-only methods

The following methods are non-standard and should not be used.

mozCurrentSampleOffset() ' ': Returns the number of samples form the beginning of the stream that have been written so far into the audio stream created by calling mozWriteAudio().
mozSetup() ' ': Sets up the audio stream to allow writing, given the number of audio channels (1 or 2) and the sample rate in kHz.
mozWriteAudio() ' ': Writes a batch of audio frames to the stream at the current offset, returning the number of bytes actually written to the stream.

Examples

Basic usage

You can create a HTMLAudioElement entirely with JavaScript using the Audio() constructor:

var audioElement = new Audio('car_horn.wav');

then you can invoke the play() method on the element

audioElement.play();

A common gotcha is trying to play an audio element immediately on page load. Modern browser's default autoplay policy will block that from happening. Refer to firefox and chrome for best practices and work arounds.

Some of the more commonly used properties of the audio element include src, currentTime, duration, paused, muted, and volume. This snippet copies the audio file's duration to a variable:

var audioElement = new Audio('car_horn.wav');
audioElement.addEventListener('loadeddata', () => {
  let duration = audioElement.duration;
  // The duration variable now holds the duration (in seconds) of the audio clip 
})

Events

Inherits methods from its parent, HTMLMediaElement, and from its ancestor HTMLElement. Listen to events using addEventListener() or by assigning an event listener to the oneventname property of this interface.

Specifications

Specification	Status	Comment
HTML Living StandardThe definition of 'HTMLAudioElement' in that specification.	Living Standard
HTML5The definition of 'HTMLAudioElement' in that specification.	Recommendation

Browser compatibility

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`HTMLAudioElement`	Chrome Full support 1	Edge Full support 12	Firefox Full support 3.5	IE Full support 9	Opera Full support 10.5	Safari Full support 3.1	WebView Android Full support 1	Chrome Android Full support 18	Firefox Android Full support 4	Opera Android Full support 11	Safari iOS Full support 2	Samsung Internet Android Full support 1.0
`Audio()` constructor	Chrome Full support Yes	Edge Full support 12	Firefox Full support 3.5	IE Full support 10	Opera Full support Yes	Safari Full support Yes	WebView Android Full support Yes	Chrome Android Full support Yes	Firefox Android Full support 4	Opera Android Full support Yes	Safari iOS Full support Yes	Samsung Internet Android Full support Yes
`mozCurrentSampleOffset()` Deprecated'Non-standard'	Chrome No support No	Edge No support No	Firefox No support 4 — 31	IE No support No	Opera No support No	Safari No support No	WebView Android No support No	Chrome Android No support No	Firefox Android No support ? — 31	Opera Android No support No	Safari iOS No support No	Samsung Internet Android No support No
`mozSetup()` Deprecated'Non-standard'	Chrome No support No	Edge No support No	Firefox No support 4 — 31	IE No support No	Opera No support No	Safari No support No	WebView Android No support No	Chrome Android No support No	Firefox Android No support ? — 31	Opera Android No support No	Safari iOS No support No	Samsung Internet Android No support No
`mozWriteAudio()` Deprecated'Non-standard'	Chrome No support No	Edge No support No	Firefox Full support 4	IE No support No	Opera No support No	Safari No support No	WebView Android No support No	Chrome Android No support No	Firefox Android Full support Yes	Opera Android No support No	Safari iOS No support No	Samsung Internet Android No support No

Legend

Full support: Full support
No support: No support
Non-standard. Expect poor cross-browser support.': Non-standard. Expect poor cross-browser support.
Deprecated. Not for use in new websites.': Deprecated. Not for use in new websites.