HTML DOM Audio Object

HTMLWeb DevelopmentFront End Technology

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 −

PropertyDescription
audioTracksTo return audioTrackList object containing available audio tracks
autoplayTo return or set the audio to start playing automatically.
bufferedTo return a TimeRanges object containing all buffered parts of an audio.
controllerTo return the MediaController object representing the current media controller of an audio.
controlsTo set or return whether the audio should have play/pause control displayed or not
crossOriginTo set or return the CORS settings of an audio
currentSrcTo return the URL of the current playing audio.
currentTimeTo set or return the current playback position(in seconds).
defaultMutedSets or returns whether the audio should be muted by default
defaultPlaybackRateSets or returns whether the default playback speed of the audio
durationTo return the length of an audio in seconds.
endedTo return whether the playback has ended or not.
errorTo return an object of type MedioError representing the error state of the audio.
loopTo set or return whether the audio should start playing again once it is finished
mediaGroupTo set or return the media group name the audio is part of.
mutedTo set or return whether audio should be turned off or not.
networkStateTo return the current network state of an audio
pausedTo set or return whether an audio is paused or not.
playbackRateTo set or return the playback rate of an audio.
playedTo return an object of type TimeRanges object representing the played parts of the audio.
preloadTo set or return the preload attribute of the audio.
readyStateTo return the current ready state of an audio.
seekableTo return a TimeRanges object representing the seekable parts of an audio
seekingTo return whether the user is currently seeking in the audio
srcTo set or return the value of the src attribute of an audio
textTracksTo return a TextTrackList object representing all the available text tracks
volumeTo set or return the volume of the audio.

Methods

Following are the methods of Audio Object −

MethodDescription
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 −

Live Demo

<!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 −

On clicking ”Duration” −

On clicking CREATE −

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);
}
raja
Published on 06-Aug-2019 13:11:39
Advertisements