Adding a clean simple music player

In preparation for explaining how to podcast with Blogger, this tutorial explains how to easily add an HTML5 mp3/audio player to your blog posts or layout. No JavaScript, Flash or plugins are required, and with a fallback for older browsers which don't support the player.

I've even created a simple form to generate basic tags for you! Adding music to your Blogspot site has never been so easy!

Basic HTML5 Audio Tags Explained

The <audio> tag is a new feature of HTML5 which we can use to natively embed audio playback in our sites.

It is supported in Internet Explorer 9, Firefox, Opera, Chrome, and Safari, and can be set to play the linked audio file automatically (autoplay) or loop if required.

There is a sample widget using the <audio> elementon the right sidebar, The audio player is produced using the following HTML code.

<div align="middle">
<audio controls autoplay loop>
<source src="your-audio-url" />
If you cannot see the audio controls, <a href="your-audio-url">listen/download the audio file here</a>
</source>
</audio>
</div><br />
<font size="1"><div align="right"><a href="http://jkelvin5989.blogspot.com/2012/11/adding-clean-simple-music-player.html">Get This ></a></div></font>

Replace both your-audio-url to the DIRECT LINK of the music file. And add this html code to your website/blog.