The Audio object is used for representing an HTML <audio> element. The Audio Object is a new object in HTML5.
Syntax:
- For creating an <audio> element:
let gfg = document.createElement("AUDIO")
- For accessing an <audio> element:
let x = document.getElementById("myAudio")
Property Values:
| Value |
Description |
| audioTracks |
It is used for returning an AudioTrackList object representing available audio tracks. |
| autoplay |
It is used for setting or returning whether the audio should start playing as soon as it is ready. |
| buffered |
It is used for returning a TimeRanges object representing the buffered parts of an audio. |
| controller |
It is used for returning the MediaController object representing the current media controller of an audio. |
| controls |
It is used for setting or returning whether an audio should have controls displayed (play/pause etc). |
| crossOrigin |
It is used for setting or returning the CORS settings of an audio. |
| currentSrc |
It is used for returning the URL of the current audio. |
| currentTime |
It is used for setting or returning the current playback position in an audio (in seconds). |
| defaultMuted |
It is used for setting or returning whether the audio should be muted by default. |
| defaultPlaybackRate |
It is used for setting or returning whether the search field is read-only, or not. |
| duration |
It is used for returning the length of an audio(in seconds). |
| ended |
It is used for returning whether the playback of the audio has ended. |
| error |
It is used for returning a MediaError object representing the error state of the audio. |
| loop |
It is used for setting or returning whether the audio should start playing over again, every time it is finished. |
| mediaGroup |
It is used for setting or returning the name of the media group the audio(s) is a part of. |
| muted |
It is used for setting or returning whether the sound should be turned off. |
| networkState |
It is used for returning the current network state of an audio. |
| paused |
It is used for setting or returning whether an audio is paused. |
| playbackRate |
It is used for setting or returning the speed of the audio playback. |
| played |
It is used for returning a TimeRanges object representing the played parts of the audio. |
| preload |
It is used for setting or returning the value of the preload attribute of an audio. |
| readyState |
It is used for setting or returning the current ready state of an audio. |
| seekable |
It is used for returning a TimeRanges object representing the seekable parts of an audio. |
| seeking |
It is used for returning whether the user is currently seeking in the audio. |
| src |
It is used for setting or returning the value of the src attribute of an audio. |
| textTracks |
It is used for returning a TextTrackList object representing the available text tracks. |
| volume |
It is used for setting or returning the audio volume of an audio. |
Audio Object Methods:
| Value |
Description |
| addTextTrack() |
It is used for adding a new text track to the audio. |
| canPlayType() |
It is used for checking whether the browser can play the specified audio type. |
| fastSeek() |
It is used for seeking to a specified time in the audio player. |
| getStartDate() |
It is used for returning a new Date object, representing the current timeline offset. |
| load() |
It is used for re-loading the audio element. |
| play() |
It is used for start playing the audio. |
| pause() |
It is used for pausing the currently playing audio. |
The below programs illustrate the Audio Object :
Example-1: Creating a <audio> element.
html
<!DOCTYPE html>
<html>
<head>
<title>Audio Object</title>
<style>
h1 {
color: green;
}
h2 {
font-family: Impact;
}
body {
text-align: center;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h2>Audio Object</h2>
<p>Double Click the "Create"
button to create an Audio Object.</p>
<button ondblclick="Create()">
Create
</button>
<script>
function Create() {
// Create audio element.
let m = document.createElement(
"AUDIO");
if (m.canPlayType("audio/mpeg")) {
m.setAttribute("src", "bells.mp3");
} else {
m.setAttribute("src", "bells.ogg");
}
m.setAttribute("controls", "controls");
document.body.appendChild(m);
}
</script>
</body>
</html>
|
Output:
HTML DOM audio object
Example-2: Accessing a <audio> element.
html
<!DOCTYPE html>
<html>
<head>
<title>Audio Object</title>
<style>
h1 {
color: green;
}
h2 {
font-family: Impact;
}
body {
text-align: center;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h2>Audio Object</h2>
<audio id="track" controls>
<source src="bells.ogg"
type="audio/ogg">
<source src=
type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<p>Double-click the "Access Audio" button
to get the duration of the audio, in seconds.</p>
<button onclick="access()">Access Audio</button>
<p id="test"></p>
<script>
function access() {
// Accessing audio element duration.
let m = document.getElementById(
"track").duration;
document.getElementById("test").innerHTML = m;
}
</script>
</body>
</html>
|
Output:
HTML DOM audio object
Supported Browsers: The browser is supported by HTML DOM Audio Object are listed below:
- Google Chrome
- Internet Explorer
- Firefox
- Opera
- Apple Safari
Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape,
GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out -
check it out now!
Last Updated :
07 Jul, 2023
Like Article
Save Article