HTML5 Audio
HTML5 Audio
HTML5 <audio> element is used to attach an audio to a webpage.
How to Play HTML5 audio Element?
To embed an audio into an HTML5 document, use <audio> tag:
Example
<!DOCTYPE html>
<html>
<head>
<title> HTML5 Audio Element </title>
</head>
<body>
<audio controls>
<source src="sample_audio1.mp3" type="audio /mpeg">
Your browser does not support HTML5 audio element
</audio>
<audio controls>
<source src="sample_audio2.ogg" type="audio /ogg">
Your browser does not support audio
</audio>
</body>
</html>
The output of this code will be
How HTML5 Audio Element Works?
HTML5 audio tag contains some attributes. Below we’ll discuss all of them in a bit of detail.
The control attribute adds controls to the audio element like pause, play, and volume of the audio. The source attribute defines the path of audio. Also, it tells the browser format of audio so the browser can play that accordingly.
The text enclosed between the <audio> tag will only be displayed by the browser if a browser doesn’t support an audio element.
HTML5 <audio> Autoplay Feature
To start an audio automatically, incorporate an autoplay attribute in an HTML5 <audio> tag.
Example
<!DOCTYPE html>
<html>
<head>
<title> HTML5 Audio Element </title>
</head>
<body>
<audio controls autoplay>
<source src="sample_audio1.mp3" type="audio /mpeg">
Your browser does not support HTML5 audio element
</audio>
<audio controls autoplay>
<source src="sample_audio2.ogg" type="audio /ogg">
Your browser does not support audio
</audio>
</body>
</html>
The output of this code will be
Unfortunately, many chromium browsers do not support the autoplay attributes. However, if the muted attribute is added with autoplay then this problem will be resolved.
Add both muted and autoplay attribute to your audio element to start your audio playing automatically but muted at the beginning.
Example
<!DOCTYPE html>
<html>
<head>
<title> HTML5 Audio Element </title>
</head>
<body>
<audio controls autoplay muted>
<source src="sample_audio1.mp3" type="audio /mpeg">
Your browser does not support HTML5 audio element
</audio>
<audio controls autoplay muted>
<source src="sample_audio2.ogg" type="audio /ogg">
Your browser does not support audio
</audio>
</body>
</html>
The output of this code is
Browsers Support
The table listed below discusses all the browsers and their versions that support <audio> element.
|
Element |
Google chrome 4.0 |
Microsoft Edge 9.0 |
Firefox 3.5 |
Safari 4.0 |
Opera 10.5 |
|
<audio> |
Supported |
Supported |
Supported |
Supported |
Supported |
HTML5 Audio Formats
HTML5 supports three main audio formats that are mp3, wav, and ogg. In order to help you understand which browser supports which audio format, we’ve attached a table.
|
Browsers |
MP3 |
WAV |
OGG |
|
Microsoft Edge |
Yes |
Yes |
Yes |
|
Google Chrome |
Yes |
Yes |
Yes |
|
Firefox |
Yes |
Yes |
Yes |
|
Safari |
Yes |
Yes |
No |
|
Opera |
Yes |
Yes |
Yes |
HTM5 Media Types
|
File Format |
Media Types |
|
MP3 |
audio/mpeg |
|
OGG |
audio/ogg |
|
WAV |
Adio/wav |
Methods, Properties, and Events for HTML5 Audio
HTML DOM defines the methods, properties, and events for HTML5 <audtio> element. Using this reference, you can pause, play, or set the duration for your audio.
There are other DOM elements that can tell the users when specific audio will play or pause? To know more about it, visit the HTML audio DOM reference
