How to play Audio File on HTML5?

HTML code for audio file
Run audio file using html

photo credit: pixabay.com




It is very easy to play audio file on HTML 5. In the past, we need to use audio plug in and flash player was a must to play the audio files.  Now, it is lot more easier to run an audio file in an webpage. Let's see the code-


< audio controls>
< source src="source of the file" type="audio/mpeg"/>
< /audio>

Here,
source of the file= media/audio/something.mp3

No need to use any plugin, just copy the above mentioned code and paste inside your webpage's HTML code where you want to show the audio player. Type attribute is not mandatory, you can ignore that attribute.


Further Explanation:

You can use 'autoplay' instead of 'controls' at the starting of audio tag. In that case, the audio will run automatically. Use of 'controls' ensure that play, pause etc are enable in the player. The audio started running after pressing play button.

You can use 'loop' attribute to run audio file again and again without any end. <audio loop> . You can show source without using source tag. In that case you need to use src like this <audio src="souce of the file">.

Another attribute is 'preload' attribute. It indicate when will your audio load. 

<audio preload='auto/meta/none'>

  • Auto- Audio will load before the page
  • Meta- Metadata will load at the same time with the of web page
  • None- Page will load first the the other attribute

Caution:
Audio tag is not supported in all the browsers. So, you need to use embed tag to run all the video format and in all the browsers. Here is the old embed tag for you-


<object width='100' height='30' type='audio/mpeg' data='audio/something.mp3' />
<embed src='/media/audio/something.mp3' width='100' height='30'>
</embed>
</object>

I prefer HTML 5 and audio tag for my website. I think you will prefer like me. If so, use audio tag where you can. Have a nice day.
Recipes best recipes recipe easiest recipes Indian recipe chineese recipe Frence recipe thai recipe Recipes best recipes recipe easiest recipes Indian recipe chineese recipe Frence recipe thai recipe Recipes best recipes recipe easiest recipes Indian recipe chineese recipe Frence recipe thai recipe amazing recipe

Comments