Earlier in order to play an audio file in browser Flash was used. But with HTML5 audio element we can play the audio files without the need of the flash.
It supports formats like:
- mp3
- ogg
- wav
The syntax of <audio> element is:
<audio controls >
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mp3">
</audio>
The attribute controls add audio controls to the audio element like play, pause and volume.
Audio tag has numbers of attributes but the basic attributes that are used in the audio element are:
| S.No. |
Attributes |
Description |
| 1 |
autoplay |
This attributes automatically play the audio in the source as soon as the element is loaded. |
| 2 |
loop |
This attributes re-play the song as soon as it is finished. |
| 3 |
src |
This attributes is used to set the current song source path. |
| 4 |
preload |
This attributes loads the audio at the page load, but autoplay attribute is present this attribute is ignored. |
Note: <audio> tag is fully supported in Chrome, but in-order to play .mp3 files in mozilla you will need a third party music player installed in your systems like VLC, Media Player, etc. and I.E. does not support .wav and .ogg format.
Sometime the browser does not play the .mp3 or .ogg files automatically so we need to define there mime types in the source attribute i.e.:
AddType audio/mp3 .mp3
AddType audio/ogg .ogg
AddType audio/wav .wav
Here is jsfiddle link of the <audio> tag:
https://jsfiddle.net/r6te6n76/7/
0 Comment(s)