HTML DOM Audio Object

The HTML DOM Audio Object represents the HTML <audio> element. The audio element newly introduced in HTML 5. Using the audio object we can manipulate the audio element to get information about audioTrack , change to autoplay, etc.

Properties

Following are the properties of HTML DOM Audio Object −

Property	Description
audioTracks	To return audioTrackList object containing available audio tracks
autoplay	To return or set the audio to start playing automatically.
buffered	To return a TimeRanges object containing all buffered parts of an audio.
controller	To return the MediaController object representing the current media controller of an audio.
controls	To set or return whether the audio should have play/pause control displayed or not
crossOrigin	To set or return the CORS settings of an audio
currentSrc	To return the URL of the current playing audio.
currentTime	To set or return the current playback position(in seconds).
defaultMuted	Sets or returns whether the audio should be muted by default
defaultPlaybackRate	Sets or returns whether the default playback speed of the audio
duration	To return the length of an audio in seconds.
ended	To return whether the playback has ended or not.
error	To return an object of type MedioError representing the error state of the audio.
loop	To set or return whether the audio should start playing again once it is finished
mediaGroup	To set or return the media group name the audio is part of.
muted	To set or return whether audio should be turned off or not.
networkState	To return the current network state of an audio
paused	To set or return whether an audio is paused or not.
playbackRate	To set or return the playback rate of an audio.
played	To return an object of type TimeRanges object representing the played parts of the audio.
preload	To set or return the preload attribute of the audio.
readyState	To return the current ready state of an audio.
seekable	To return a TimeRanges object representing the seekable parts of an audio
seeking	To return whether the user is currently seeking in the audio
src	To set or return the value of the src attribute of an audio
textTracks	To return a TextTrackList object representing all the available text tracks
volume	To set or return the volume of the audio.

Methods

Following are the methods of Audio Object −

Method	Description
addTextTrack()	To add a new text track to the given audio.
canPlayType()	To check whether the browser can play the specified audio type.
fastSeek()	To seek to a specified time in the audio player/
getStartDate()	To return a new Date object, representing the current timeline offset.
load()	To re-load the audio element.
play()	To start playing the audio.
pause()	To pause the currently playing audio.

Syntax

Following is the syntax for −

Creating an audio element

var x= document.createElement("AUDIO")

Accessing an audio element

var x = document.getElementById("demoAudio")

Example

Let us see an example for Audio Object −

<!DOCTYPE html>
<html>
<body>
<h1>MUSIC</h1>
<audio id="Audio" controls>
<source src="sample.mp3" type="audio/mpeg">
Audio not supported in your browser
</audio>
<p>Click the button to get the duration of the audio, in seconds.</p>
<button onclick="AudioDur()">Duration</button>
<button onclick="CreateAudio()">CREATE</button>
<p id="SAMPLE"></p>
<script>
   function AudioDur() {
      var x = document.getElementById("Audio").duration;
      document.getElementById("SAMPLE").innerHTML = x;
   }
   function CreateAudio() {
      var x = document.createElement("AUDIO");
      x.setAttribute("src","sample1.mp3");
      x.setAttribute("controls", "controls");
      document.body.appendChild(x);
   }
</script>
</body>
</html>

Output

It will produce the following output −

HTML DOM Audio Object

On clicking ”Duration” −

HTML DOM Audio Object

On clicking CREATE −

HTML DOM Audio Object

In the above example −

We have first created an audio element and specified the audio source and type.

<audio id="Audio" controls>
<source src="sample.mp3" type="audio/mpeg">
Audio not supported in your browser
</audio>

Then we have created two buttons “Duration” and CREATE to execute functions AudioDur() and CreateAudio() respectively.

<button onclick="AudioDur()">Duration</button>
<button onclick="CreateAudio()">CREATE</button>

The AudioDur() function gets the element with id “Audio” associated with it. It gets the <audio> element and uses the duration property to get its duration. The duration is displayed in the paragraph with id “Sample” associated with it.

function AudioDur() {
   var x = document.getElementById("Audio").duration;
   document.getElementById("SAMPLE").innerHTML = x;
}

The CreateAudio() function creates an audio element and sets its attributes such as src to “sample1.mp3” and enables its controls by setting “controls” attribute. The element is then appended to the body using the appendChild() method.

function CreateAudio() {
   var x = document.createElement("AUDIO");
   x.setAttribute("src","sample1.mp3");
   x.setAttribute("controls", "controls");
   document.body.appendChild(x);
}