HTMLAudioElement

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

The HTMLAudioElement interface provides access to the properties of <audio> elements, as well as methods to manipulate them.

This element is based on, and inherits properties and methods from, the HTMLMediaElement interface.

EventTarget Node Element HTMLElement HTMLMediaElement HTMLAudioElement

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.

Instance properties

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

Instance methods

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

Examples

Basic usage

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

js
const audioElement = new Audio("car_horn.wav");

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

js
audioElement.play();

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

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:

js
const 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
HTML
# htmlaudioelement

Browser compatibility

desktop mobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
HTMLAudioElement
Chrome – Full support
Chrome 3 (Release date: 2009-09-15)
footnote Full support
Edge – Full support
Edge 12 (Release date: 2015-07-29)
footnote Full support
Firefox – Full support
Firefox 3.5 (Release date: 2009-06-30)
footnote Full support
Opera – Full support
Opera 10.5 (Release date: 2010-03-02)
footnote Full support
Safari – Full support
Safari 3.1 (Release date: 2008-03-18)
footnote Full support
Chrome Android – Full support
Chrome Android 18 (Release date: 2012-06-27)
footnote Full support
Firefox for Android – Full support
Firefox for Android 4 (Release date: 2011-03-29)
footnote Full support
Opera Android – Full support
Opera Android 11 (Release date: 2011-03-22)
footnote Full support
Safari on iOS – Full support
Safari on iOS 3 (Release date: 2009-06-17)
footnote Full support
Samsung Internet – Full support
Samsung Internet 1 (Release date: 2013-04-27)
footnote Full support
WebView Android – Full support
WebView Android 4.4 (Release date: 2013-12-09)
footnote Full support
WebView on iOS – Full support
WebView on iOS 3 (Release date: 2009-06-17)
footnote Full support
Audio() constructor
Chrome – Full support
Chrome 4 (Release date: 2010-01-25)
footnote Full support
Edge – Full support
Edge 12 (Release date: 2015-07-29)
footnote Full support
Firefox – Full support
Firefox 3.5 (Release date: 2009-06-30)
footnote Full support
Opera – Full support
Opera 12.1 (Release date: 2012-11-20)
footnote Full support
Safari – Full support
Safari 3.1 (Release date: 2008-03-18)
footnote Full support
Chrome Android – Full support
Chrome Android 18 (Release date: 2012-06-27)
footnote Full support
Firefox for Android – Full support
Firefox for Android 4 (Release date: 2011-03-29)
footnote Full support
Opera Android – Full support
Opera Android 12.1 (Release date: 2012-10-09)
footnote Full support
Safari on iOS – Full support
Safari on iOS 3 (Release date: 2009-06-17)
footnote Full support
Samsung Internet – Full support
Samsung Internet 1 (Release date: 2013-04-27)
footnote Full support
WebView Android – Full support
WebView Android 4.4 (Release date: 2013-12-09)
footnote Full support
WebView on iOS – Full support
WebView on iOS 3 (Release date: 2009-06-17)
footnote Full support

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

See also