Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
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 −
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);
}
493 Views
