Summary -
In this topic, we described about the below sections -
Why Audio tag required?
Earlier, audios could be only played on webpages using web plugins like Flash player etc. Since the release of HTML5, the audio element can be used to add audio content to a web page without having additional plugins.
What is HTML5 audio?
The newly introduced HTML5 <audio> element provides a standard way to embed audio files in web pages. However, the audio element is relatively new, however it works in most of the modern web browsers. Files embedded with the path are played by the audio playback engine developed in all HTML5 compatible browsers.
The <audio> tag very helpful to add audios such as recordings, songs, etc. on webpage. The syntax is very easy, or it can be made additional complex by adding in various file formats as well as fallback options for unsupported browsers.
HTML5 Audio includes audio playback, synthesis, and input, as well as talking to text, in the browser. The HTML5 <audio> element identifies a standard path to insert audio in a webpage.
Advantages -
There are two massive benefits of using the audio tag -
- Hardware acceleration - Performing a audio in a hardware accelerated browser uses substantially less CPU power when compared to the usage in a new browser.
- Plug-in free - We don’t have to worry about downloading the correct plug-in or the difficulties playing as the audio is plug-in free.
<audio> element
<audio> tag is introduced in HTML5. <audio> element is used to play audio files on the webpages. Presently, there are 3 backed file formats for the <audio> element: MP3, WAV, and OGG. The following table describes the HTML5 audio tag supported media types -
| File Format | Media Type |
|---|---|
| MP3 | mpeg/audio |
| OGG | ogg/audio |
| WAV | wav/audio |
Syntax -
XHTML/HTML: <audio>...</audio>
How it works?
The control attribute adds audio controls like volume, pause, and play. The text coded in between <audio> and </audio> tags can display only when the <audio> tag executed on non-supporting browser versions. The following table displays the attributes that are specific to the <audio> tag -
| Attribute | Value | Description |
|---|---|---|
| autoplay | autoplay | This Boolean attribute describes that the audio start playing spontaneously as shortly as possible after loading the page data. |
| controls | controls | If specified, the browsers show controls like audio playback, like volume, pause, play, etc to the user and accepts the user actions to control audio. |
| loop | loop | This Boolean attribute describes that the next/current audio spontaneously start over again after reaching the end of current audio. |
| muted | muted | The Boolean attribute indicates the audio initially muted. The default value is false, means the audio gets played with sound by default if not specified. |
| preload | auto metadata none | Specifies a hint to the browser about when to download of the audio itself or its metadata. The autoplay attribute can take over this attribute, as if we require to automatically play a audio, the browser will definitely need to download it afront. |
| src | URL | Describes the source of the audio file. Instead, we can use the preferred <source> tag as it accepts for multiple options. |
Example -
Following example describes how the <audio> tag used in webpage.
<!DOCTYPE html>
<html lang="en">
<head>
<title>audio tag of HTML5</title>
</head>
<body>
<audio controls="controls" src="audio/new.mp3"></audio>
</body>
</html>
Output -
Autoplaying audio on a Webpage -
This Boolean attribute describes that the audio start playing spontaneously as shortly as possible after loading the webpage.
Example: -
The following example describes about autoplaying audio.
<!DOCTYPE html>
<html>
<body>
<audio controls autoplay>
<source src="audio/new.mp3" type="audio/mp3">
<source src="audio/new.ogg" type="audio/ogg">
</audio>
</body>
</html>
Output -
Adding muted audio file on a Webpage -
The Boolean attribute indicates the audio initially muted. The default value is false, means the audio gets played with sound.
Example: -
The following example describes about muted audio.
<!DOCTYPE html>
<html>
<body>
<audio controls muted>
<source src="audio/new.mp3" type="audio/mp3">
<source src="audio/new.ogg" type="audio/ogg">
</audio>
</body>
</html>
Output
Adding audio using the source element -
src describes the source of the audio file. Instead of src, we can use the preferred <source> tag as it accepts for multiple options.
Example:-
The following example describes audio element source attribute.
<!DOCTYPE html>
<html>
<body>
<audio controls autoplay>
<source src="audio/new.mp3" type="audio/mp3">
</audio>
</body>
</html>
Output-
Adding audio with multiple sources -
Audios from multiple sources can be specified to the browser. If the browser is unable to perform the initial source, then it spontaneously jump to the second source and try to play it.
Example: -
The following example describes about how to include audio from multiple sources.
<!DOCTYPE html>
<html>
<body>
<audio controls autoplay>
<source src="audio/new.mp3" type="audio/mp3">
<source src="audio/new.ogg" type="audio/ogg">
</audio>
</body>
</html>
Output -
Global attribute and event attribute -
Like all other tags, <audio> tag supports both global and event attribute.
Methods, properties, and events -
HTML5 classifies DOM events, properties, and methods for the <audio> element. This accepts you to load, pause, and play audios, as well as fix time duration and sound.
<audio>/<video> Methods
| Method | Description |
|---|---|
| addTextTrack() | Adds a fresh text track to the video or audio. |
| canPlayType() | Tests if the browser can play the specific audio or video type. |
| load() | Re-loads the video or audio element. |
| play() | Begins playing the video or audio. |
| pause() | Pauses the presently performing audio or video. |
<audio>/<video> Properties
| Property | Description |
|---|---|
| audioTracks | Returns or sets an AudioTrackList object representing accessible audio tracks. |
| autoplay | Returns or sets whether the audio or video should begin playing as quickly as it is loaded. |
| buffered | Returns a TimeRanges object representing the buffered parts of the audio or video. |
| controller | Returns the MediaController object representing the existing media controller of the audio or video. |
| controls | Returns or sets whether the video or audio should exhibit controls like pause or play etc. |
| crossOrigin | Returns or sets the CORS settings of the video or audio. |
| currentSrc | Returns the URL of the existing video or audio. |
| currentTime | Returns or sets the existing playback spot in the video or audio(in seconds). |
| defaultMuted | Returns or sets whether the video or audio should be muted by default. |
| defaultPlaybackRate | Returns or sets the default pace of the video or audio playback. |
| duration | Returns the duration of the existing video or audio (in seconds). |
| ended | Returns whether the playback of the video or audio has ended or not. |
| error | Returns a MediaError object representing the error state of the video or audio. |
| loop | Returns or sets whether the video or audio should begin over again when completed. |
| mediaGroup | Returns or sets the group the video or audio belongs to (used to link numerous audios or video elements). |
| muted | Returns or sets whether the video or audio is muted or not. |
| networkState | Returns the existing network state of the video or audio. |
| paused | Returns whether the video or audio is paused or not. |
| playbackRate | Returns or sets the pace of the video or audio playback. |
| played | Returns a TimeRanges object representing the played sections of the video or audio. |
| preload | Returns or sets whether the video or audio should be loaded when the page loads. |
| readyState | Returns the existing ready state of the video or audio. |
| seekable | Returns a TimeRanges object representing the seek able sections of the video or audio. |
| seeking | Returns whether the client is presently seeking in the video or audio. |
| src | Returns or sets the existing source of the video or audio element. |
| startDate | Returns a Date object representing the existing time offset. |
| textTracks | Returns a TextTrackList object representing the accessible text tracks. |
| videoTracks | Returns a VideoTrackList object representing the accessible video tracks. |
| volume | Returns or sets the volume of the video or audio. |
<audio>/<video> Events
| Event | Description |
|---|---|
| abort | Triggers when the loading of a video or audio is aborted. |
| canplay | Triggers when the browser can begin performing the video or audio. |
| canplaythrough | Triggers when the browser can play through the video or audio without blocking for buffering. |
| durationchange | Triggers when the duration of the video or audio is altered. |
| emptied | Triggers when the present playlist is unoccupied. |
| ended | Triggers when the present playlist is ended |
| error | Triggers when an error happened during the loading of a video or audio. |
| loadeddata | Triggers when the browser has loaded the existing frame of the video or audio. |
| loadedmetadata | Triggers when the browser has loaded meta data for the video or audio. |
| loadstart | Triggers when the browser begins exploring for the video or audio. |
| pause | Triggers when the video or audio has been paused |
| play | Triggers when the video or audio has been beginning or is no lengthier stopped. |
| playing | Triggers when the video or audio is playing after having been stopped or paused for buffering. |
| progress | Triggers when the browser is downloading the video or audio. |
| ratechange | Triggers when the performing speed of the video or audio is changed. |
| seeked | Triggers when the client is completed skipping or moving to a new spot in the video or audio. |
| seeking | Triggers when the client begins skipping or moving to a new spot in the video or audio. |
| stalled | Triggers when the browser is attempting to get media information, but information is not accessible. |
| suspend | Triggers when the browser is deliberately not getting media information. |
| timeupdate | Triggers when the existing playback position has altered. |
| volumechange | Triggers when the volume has been changed. |
| waiting | Triggers when the video ends because it wants to buffer the next frame. |
Browsers Support for Audio formats
There are three supported audio formats in HTML5 - OGG MP3, and WAV. The individual browser support for the various formats are -
| Browser | MP3 | WAV | OGG |
|---|---|---|---|
| Edge/IE | Yes | No | No |
| Chrome | Yes | Yes | Yes |
| Firefox | Yes | Yes | Yes |
| Safari | Yes | Yes | No |
| Opera | Yes | Yes | Yes |
Browser Support for Audio tag
The following browsers with versions in the table indicates the initial browser version that that completely supports the <audio> element -
| Element | Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| <audio> | 4.0 and above | 9.0 and above | 3.5 and above | 4.0 and above | 10.5 and above |