To know the events details of multimedia elements of HTML5, read this. In this post, we shall learn how to handle audio media in web page using HTML5.
To play audio in HTML5, we can use the <audio> tag which is introduced in HTML5. At the time of writing this post, any one of .mp3, .wav or .ogg audio files are supported in all new browsers like Google Chrome, FireFox etc. Below are html5 audio player code.
<!DOCTYPE html> <html> <body> <audio controls> <source src="horse.ogg" type="audio/ogg"> <source src="horse.mp3" type="audio/mpeg"> Your browser does not support the audio element. </audio> <p><strong>Note</strong> − Your browser does not support the HTML5 Audio element.</p> </body> </html>
Note − Your browser does not support the HTML5 Audio element.
The following table shows the attributes that are specific to the <audio> tag.
| Attribute | Value | Description |
|---|---|---|
| autoplay | autoplay | This Boolean attribute specifies that the audio will automatically start playing as soon as it can do so without stopping to finish loading the data. |
| controls | controls | If specified, the browsers will display controls to allow the user to control audio playback, such as play/pause, volume, etc. |
| muted | muted | This Boolean attribute specifies whether the audio will be initially silenced. The default value is false, meaning that the audio will be played. |
| loop | loop | This Boolean attribute specifies that the audio will automatically start over again, upon reaching the end. |
| src | URL | Specifies the location of the audio file. Alternatively, you can use the preferred <source> tag as it allows for multiple options. |
The <audio> tag also supports the event attributes in HTML5.