Add Audio to Blog

With the <audio> tag in HTML5 it is now easy as 123 to add a player and sound to your blog or website.

 
This audio tag is supported in Internet Explorer 9, FireFox, Opera, Chrome, Safari and any other open source browser that supports HTML5. The player can be set to start manually or can be set to play the linked audio file automatically (autoplay) or to play continuous (loop) if required.

The only problem is that not all the browsers recognize mp3 files. To overcome this we need to convert the mp3 file to the “ogg” format and include both in the html code. There are many free online converters like media.io that is very easy and convenient to use.

The next step is to upload the audio files to a free file hosting server. Once uploaded you will be provided with a direct link to the audio files. An alternative method to upload the audio files is to signup with a free web hosting service. Use the url that direct you to the audio file once uploaded. A few of these free services are http://www.biz.nf/ and http://www.freehostingeu.com/

How to add the audio player to a blog post

While using the compose tab, write the content of your post as normal, then place your cursor where you would like the audio player to appear.

Switch to the HTML mode and paste your code as HTML using any of the examples below.

Remember to use your own url or link to your audio files in the examples.

Example 1

The visitor to your blog needs to manually start the player:

<audio controls>
<source src="YOUR OWN URL or LINK.mp3"></source>
<source src=" YOUR OWN URL or LINK.ogg"></source>
</audio>

Example 2

The visitor to your blog start the player manually and the audio will play continuously:

<audio controls loop>
<source src="YOUR OWN URL or LINK.mp3"></source>
<source src=" YOUR OWN URL or LINK.ogg"></source>
</audio>

Example 3

The player will start automatically:

<audio controls autoplay>
<source src="YOUR OWN URL or LINK.mp3"></source>
<source src=" YOUR OWN URL or LINK.ogg"></source>
</audio>

By default blogger will place the player to the left of your content. To center your player or to place it to the right, add one off the following codes to your player:

<div align="center">

<div align="right">

The example code will then look like this:

<div align="center">
<audio controls loop>
<source src="YOUR OWN URL or LINK.mp3"></source>
<source src=" YOUR OWN URL or LINK.ogg"></source>
</audio>

You can try this player created by the code in example 2. The music is from the royalty free Audio Library – YouTube.

Add an audio player gadget to Blogger

You could also use the example codes above and paste into an HTML/JavaScript gadget in your Blogger layout.