HTML | DOM Audio Object
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:
var gfg = document.createElement("AUDIO") - For accessing an <audio> element:
var 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. |
Below programs illustrate the Audio Object :
Example-1: Creating a <audio> element.
<!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. var 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:
- Before clicking the button:
- After clicking the button:
Example-2: Accessing a <audio> element.
<!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="bells.mp3" 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. var m = document.getElementById( "track").duration; document.getElementById("test").innerHTML = m; } </script> </body> </html> |
Output:
- Before clicking the button:
- After clicking the button:
Supported Browsers: The browser supported by HTML | DOM Audio Object are listed below:
- Google Chrome
- Internet Explorer
- Firefox
- Opera
- Apple Safari
Please Login to comment...