Ticker

6/recent/ticker-posts

Header Ads Widget

Shared Hosting with Namecheap. Free .Website domain & WhoisGuard

How to embed html audio player in any website

Most of us want to embed additional functionalities to our website without increasing the load time.

For WordPress users, the use of additional plugin will increase the load time of website in most of the cases.

The best way is to use HTML codes which will not require any additional plugin. It will simply work on the website.

For including the audio player in your website, use the code shown below :

 <audio controls>  
  <source src="yourfile.ogg" type="audio/ogg">  
  <source src="yourfile.mp3" type="audio/mpeg">  
  Your browser does not support the audio element.  
 </audio>  

Remember to replace yourfile.ogg/yourfile.mp3 with the actual location of your audio file.
If you are using only mp3 files, you can remove the line which includes .ogg file.

Your audio player will look like this :



There are additional functionalities which you can add to this simple player.

1)Adding Autoplay to audio player

For making the player auto play the audio file as soon as the visitors opens your page, you just need to add "autoplay" in the first line.

Now your code will look like :

 <audio controls autoplay>  
  <source src="horse.ogg" type="audio/ogg">  
  <source src="horse.mp3" type="audio/mpeg">  
  Your browser does not support the audio element.  
 </audio>  

2) Restricting the player to auto stream content when the page is loaded

Whenever the page where the audio player is opened, the audio player will start to stream the audio file so that when the user plays the audio, it is available without buffering.

However, in certain cases when there are multiple audio embedded in a single page, for example say a page which contains a music album, in that case, if the audio player stream all of the audio, then it will surely affect the visitors internet speed and data. Also if a visitor is on the webpage to listen only one of the several audios, still the audio player will stream all the audio files.

To restrict the preloading of audio files, use the code preload="none"

the modified code will look like :

 <audio controls preload="none">  
  <source src="horse.ogg" type="audio/ogg">  
  <source src="horse.mp3" type="audio/mpeg">  
  Your browser does not support the audio element.  
 </audio>  

Post a Comment

0 Comments