How to use HTML5 Audio tag ?

The audio tag defines the sound like audio streaming which allows .mp3, .ogg, and .wav formats. <audio> tag is getting used to embed music on websites. All the WebKit-based browsers like safari/chrome support mp3 but on the other hand, previous Mozilla firefox versions were only supporting the .ogg format. After 2013, Firefox 26 was released, which gives native MP3 audio support for all the versions of Windows.

If a browser is not supporting .mp3 file format then you can convert .mp3 to .ogg file format either by using some online tools or developers can perform this conversion automatically by using FFMPEG libraries while uploading audio files.

You can use the audio tag by following ways –

// To include .mp3 file
<audio src="audio_file.mp3" controls="controls">

// To include .ogg file
<audio src="audio_file.ogg" controls="controls">

// To include .mp3 file with autoplay & controls
<audio autoplay="autoplay" controls="controls">
<source src="audio_file.mp3" />
</audio>

// To include .ogg file with autoplay & controls
<audio autoplay="autoplay" controls="controls">
<source src="audio_file.ogg" />
</audio>

// To include .mp3 & .ogg file with autoplay & controls
<audio autoplay="autoplay" controls="controls">
<source src="audio_file.ogg" />
<source src="audio_file.mp3" />
</audio>

source of the audio file can be either relative(/var/www/html/uploads/audio_file.mp3) or absolute(http://your_website.com/uploads/audio_file.mp3)

Following mentioned are some of the useful attributes of <audio> tag –
1. Autoplay – As soon as audio is ready, it will start playing
2. Control – Audio controls will get displayed
3. Loop – Audio will start over again once it is finished
4. Preload –   this one has three parameters: auto, which plays once it has loaded, metadata, which only displays the data associated with the audio file, and none, which means it will not preload
5. Src – Contain URL of the audio file needs to get played

For eg. –

<audio loop="loop" autoplay="autoplay" controls="controls">
<source src="audio_file.ogg" />
<source src="audio_file.mp3" />
</audio>

Audio compatibilities for various browsers are as below-
1. Internet Explorer  –  MP3
2. Chrome  –  MP3/Wav/Ogg
3. Firefox  –  MP3/Wav/Ogg
4. Safari  –  MP3/Wav
5. Opera  –  MP3/Wav/Ogg

MIME Types for Audio Formats
Format    MIME-type
MP3    audio/mpeg
Ogg    audio/ogg
Wav    audio/wav