Monday, October 1, 2012

How To Add Mp3 Music Player In Blogger Blog

Author: Gagan Masoun
How To Add Mp3 Music Player In Blogger Blog
Some times you need to podcast with Blogger blog, this tutorial guides how to simply add an HTML5 Mp3/Audio player in your blogger blog posts or in sidebar widgets. Its will work without JavaScript, Flash or plugins.This player is supported in IE 9, Mozilla, Opera, Chrome, & Safari.

You can play linked Mp3 file automatically (autoplay) or loop if wanted.Users can playback when (or if) they want, and to adjust the volume.I personally liked it a so much!Let's start the tutorial:

How To Add Music Player To Your Blog?

  • Go to Blogger Dashboard > Layout > Add A Gadget
  • HTML/Javascript > Copy Below Code
  • Paste Copied Code In HTML/Javascript & Save Gadget
<audio controls="controls"><source src="BlogsDaddy.mp3" autoload="true" autoplay="true" hidden="true" type="audio/mp3" /></source></audio>
  • If You Need Player With Auto Play Then Add Below Code
<audio controls autoplay="controls"><source src="BlogsDaddy.mp3" autoload="true" autoplay="true" hidden="true" type="audio/mp3" /></source></audio>
  • If You Need With Loop Element (specify that the audio will start over again, every time it is finished) Then Add Below Code
<audio controls loop="controls"><source src="BlogsDaddy.mp3" autoload="true" autoplay="true" hidden="true" type="audio/mp3" /></source></audio>
Note: Replace BlogsDaddy.mp3 With Your Mp3 File URL

How to Add a Music Player In Blog Post

If you want to add music player in blogger blog posts then copy code mentioned above or use the code generator below and paste into your blog post.

Keep in mind that post copied or generated code in post's HTML area.Switch to the HTML mode when composing a post and paste your code as HTML.

Generate code for audio player



Preview of audio player will appear here

Troubleshooting

If you need our help then do not hesitate to post your query in comments below. Would be a happy to help you.I just hope you find useful and easy to implement. I will be publishing many other types of music players soon "Waheguru". Happy Blogging & Stay Blessed.

Author
Author - Gagan Masoun is the owner of Blogs Daddy Blog.Gagan lives in India, has been blogging since 2010 and writing Blogs Daddy Blog since 2011.You can find him in the usual social networks.

2 comments:

  1. how can I resize this player ?

    ReplyDelete
  2. Thank you for this interesting post! Indeed it is very useful :)

    ReplyDelete