Add An MP3 Music Player To Your BlogSpot Blog

Demo of the player is a floating bar at the bottom of this page
Songs used in Demo (autoplay enabled):
1. Airtel Theme
2. Hutch Ringtone

---

The previous embeddable MP3 player discussed on BloggerStop had many limitations and was quite complicated in terms of customizing it.

So this tutorial will help you to add a customized music player and create your own playlist. The first 2 steps of this tutorial will let you add the songs to your blog (Repeat these steps whenever you want to add more songs to your blog/posts), and step #3 will add a floating MP3 player to your blog.

For this tutorial you will have to open an account here:
1. OpenDrive (online storage).

STEP #1:
Upload songs (MP3 files) to your newly registered OpenDrive account,
right click on the file and then click on the hyperlink "links" as shown in the screenshot below:

Then copy the "DIRECT LINK" (Streaming) to that file.

STEP #2:
Now, paste it as a hyperlink in to your blog:
1. Either paste it in the sidebar (Blogger -> Design -> Page Elements -> "Add a Gadget -> HTML/JavaScript") to play the songs site-wide,
2. Or paste it in a blog-post (anywhere in the post), if you want to play the songs only in a particular post.
(List all the songs you want to play as these hyperlinks)

The hyperlinks to the songs should look like this:

<a href="http://DIRECT_LINK_TO_SONG_1" style="display:none;">Song_1_Title</a>
<a href="http://DIRECT_LINK_TO_SONG_2" style="display:none;">Song_2_Title</a>

Replace the links highlighted in RED with the DIRECT LINKS you got from OpenDrive in STEP #1.
The code style="display:none;" will hide the hyperlinks (song titles). If you want to show the links to your visitors, then delete the code highlighted in BLUE, before saving the widget/post.

STEP #3
Finally, to play these songs we will add the floating MP3 player to the blog.
Go to this page: StreamPad

And click on the Blogger logo:

Before copying the code, go to the bottom of the page:

And customize the player as you want: Enable Autoplay, change colors, Allow popout etc.

Finally copy the code from Step 5 in that page.
If the code in Step 5 does not get updated when you customize the options, then simply use this code:

<script type="text/javascript" src="http://o.aolcdn.com/art/merge?f=/_media/sp/sp-player.js&f=/_media/sp/sp-player-blogger.js&expsec=86400&ver=11&clicktext=Click%20to%20Play%20the%20DEMO%20Song&showplaylist=false&showplaylistbutton=true&autoplay=true&showpop=true&popup=false"></script>

Change the values highlighted in RED from true to false or vice-versa And paste that code in to your blog:
Go to Blogger -> Design -> Page Elements -> Add a Gadget -> HTML/JavaScript"
Paste the code and save widget.

NOTE 1 (Important): In case you want to "show" this widget only in a single post or in a group of posts, then instead of pasting the above code in the sidebar widget, paste it inside the post (anywhere in the post) where you want to display the widget (floating bar MP3 player).
NOTE 2: If you paste the code in the sidebar, then the bar is shown across all the pages on your blog and wherever (either the sidebar/blog posts) songs are detected, it will be added to the floating bar as long as the visitor remains in a particular page.
NOTE 3: As an alternative MP3 player, you may try the media Player from Yahoo (with Video support) instead of the one from Streampad (in step #3).

This widget can detect all the links to songs on any page (which you have already added in STEP #2 of this tutorial) and will start playing them as a playlist, in a floating bar from the bottom of the page.

Now sit back & Let The Music Play