The new tags for the audio video display in HTML 5 have resulted in audio playback in the browser is now very easy. Before these tags were run with a tag named embed, but there were many problems. For example, an embed tag would have to be installed on the plugin (in the browser). Among them, a plug-in is a Flash player, Quick Time, VLC, Windows Media Player etc.

The problem was that if there was no media player plug-in installed in the user’s browser. Whatever HTML 5 has come to solve these problems. If still IE (Internet Explorer) does not support HTML 5, then these solutions are coming in the latest version of IE (IE 9+).

Since most people now use Mozilla or Google Chrome browser, we are giving tutorial based on HTML 5.

Using HTML 5 here we play mp3 files and there is no plug-in for it. It can be done with the name of the audio name.

<audio controls>
<source src="/media/Duniya_Ke_Ae_Musafir.ogg" type="audio/ogg" />
<source src="/media/Duniya_Ke_Ae_Musafir.mp3" type="audio/mpeg" />
<h1>Your Browser doesn't support audio tag</h1>

</audio>

** Does not support mp3 mp3 in ogg format but mp3 chrome will run.

 

** Look at the source tag, but you should think that one should have given it. It’s okay because the browser supports the format using the fallback format method. Check one after another to see which supported format it will start playing.

** Type attribute is optional, but performance will increase.

Inside of <audio> controls = “controls” can be done or how I gave it. It is for pause/play, sound etc. to show in the player. Then there is another attribute like autoplay, like controls, if it will play automatic music.

If there is an attribute in the loop, then if the music ends, then it will start from the beginning and rotate in this way.

There is another attribute named “preload” for audio elements and it can be given 3 types of values.

1. Auto will download the audio before the page loads

2. Metadata such as author etc will be loaded as soon as the page is loaded with meta.

3. None will be able to load the metadata or audio before the page.

 

** Notwithstanding the source tag, the source tag of the source file will be shown with the src tag on the audio tag.

 

Now the problem is that since the audio tag does not support all the browsers, then mp3, ogg, wav, except for wav, so you can use an embed tag for all browser compatibility. But for this, any media player must be installed in your browser. Usually VLC media player is installed on your PC, a small plugin named VLC Web Plugin is automatically installed on your browser.

<object width="300" height="42" type="audio/mpeg" data="audio/my_music.mp3">
<param name="src" value="/media/Duniya_Ke_Ae_Musafir.mp3" />
<embed src="/media/Duniya_Ke_Ae_Musafir.mp3" width="300" height="42">
</embed>
</object>