HTMLAudioElement

{{APIRef("HTML DOM")}} 

The HTMLAudioElement interface provides access to the properties of {{HTMLElement("audio")}}  elements, as well as methods to manipulate them.

This element is based on, and inherits properties and methods from, the {{domxref("HTMLMediaElement")}}  interface.

{{InheritanceDiagram}} 

Constructor

• {{domxref("HTMLAudioElement.Audio", "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, {{domxref("HTMLMediaElement")}} , and from {{domxref("HTMLElement")}} .

Instance methods

Inherits methods from its parent, {{domxref("HTMLMediaElement")}} , and from {{domxref("HTMLElement")}} . It offers no methods of its own.

Examples

Basic usage

You can create a HTMLAudioElement entirely with JavaScript using the {{domxref("HTMLAudioElement.Audio", "Audio()")}}  constructor:

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

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

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 work arounds.

Some of the more commonly used properties of the audio element include {{domxref("HTMLMediaElement.src", "src")}} , {{domxref("HTMLMediaElement.currentTime", "currentTime")}} , {{domxref("HTMLMediaElement.duration", "duration")}} , {{domxref("HTMLMediaElement.paused", "paused")}} , {{domxref("HTMLMediaElement.muted", "muted")}} , and {{domxref("HTMLMediaElement.volume", "volume")}} . This snippet copies the audio file’s duration to a variable:

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, {{domxref("HTMLMediaElement")}} , and from its ancestor {{domxref("HTMLElement")}} . Listen to events using addEventListener() or by assigning an event listener to the oneventname property of this interface.

Specifications

{{Specifications}} 

Browser compatibility

{{Compat}} 

See also

• Web media technologies
• Audio and Video Delivery
• HTML element implementing this interface: {{HTMLElement("audio")}} .