Add An MP3 Music Player To Your BlogSpot Blog


UPDATE 06 October’16: Streampad music player is no longer working. So, read this new tutorial to add a better and more customizable MP3/Music player to your blog : Add MP3 player to your 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:

Add An MP3 Music Player To Your BlogSpot Blog

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:

Add An MP3 Music Player To Your BlogSpot Blog

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

Add An MP3 Music Player To Your BlogSpot Blog

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="https://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

Leave a Reply

207 Comments on "Add An MP3 Music Player To Your BlogSpot Blog"

Notify of
avatar
Sort by:   newest | oldest | most voted
Pranay
Guest

hey thnx for the widget.. that’s really cool!

View Comment
Mohammad Mustafa Ahmedzai
Guest

haha Dsai the music was interesting and that pop styled yo-man looked cool too. I will surely try it.

I have two questions Dsai that are very important for me,

1.Can I just buy a new domain without changing my hosting service (which is blogger)? Plz answer this one in detail

2. I have submitted all my sitemaps to google but still google has indexed just my homepage with three other internal pages. I have written more than 40 posts why isn’t google indexing them. My status only shows one link in webmaster tools.

View Comment
Divya Sai
Guest

Yes of course Mohammad you can do it…you may read this post & it's comments, they are quite in detail…
https://bloggerstop.net/2008/10/get-domain-unlimited-hosting-and.html

Regarding your webmasters a/c, the frequency of indexing your blog will inc with increasing popularity of your blog, so you just need to wait a few days.
BTW, congrats for your blog's review at BlogsWithWings.com, you are already on the correct path !

View Comment
Mohammad Mustafa Ahmedzai
Guest

Dsai, I have already read that post and have re-read it. Tell me one thing are you using blogger as your host or 10n1? Well encourage me whether I should or should not change my hosting with blogger?

And yeh the review was really encouraging 😀

Dsai many people have linked to my blog even blogger accessories but when I write link:http://tnt-by-stc.blogspot.com in google serach box I only get 6 links which does not show a link from blogger accessories, now techieblogger.com and neither one from you.
Whats wrong?

View Comment
bloggerstop.net
Guest

Well I have only bought my domain from 1and1 and I have my blog hosted at blogger only.
If you want to enjoy the plug-ins of WP, then you should shift to WP, presently I am quite comfortable with Blogger, and so I am continuing with it.

And regarding the linkbacks….well all i can say is understanding the Google’s algo is really difficult 😉

View Comment
Guest
Guest

Doesn't work worth a damn. Wasted LOTS of my time.

View Comment
Divya Sai
Guest

Register at hotlinkfiles.com (instead of boxstr.com) and then repeat the process.

View Comment
Bollywood
Guest

It,s great post.

View Comment
Bollywood
Guest
Anonymous
Guest

Can't find working URLs

View Comment
Divya Sai
Guest

Upload songs from your pc to mydatanest.com and copy the DIRECT LINKS and use them at mixpod.com

View Comment
life with naomi
Guest

mydatanest.com and hotlinkfiles.com wont work 🙁

View Comment
Sai @ Blogger Widgets
Guest

As you can see in this page itself (demo player), mydatanest do work for hosting mp3 files. Make sure, that the folder where you have uploaded the song has the set the permissions as "hidden" and NOT AS "private"

View Comment
greekbox
Guest

thanks for the great tip.
you can see it working now on my blog:
greekbox.blogspot.com

View Comment
Sahara
Guest

Thank you! A music player that runs smoothly in other browsers besides firefox. Flash is a nightmare for me, and this "pre-made" flash player is a lifesaver.

View Comment
BloggerStop.Net
Guest

@Sahara
Happy for you 🙂

View Comment
MP3 Player For Blogger !!!
Guest

In Italy, music player per blogger means music player for blogger

View Comment
Debasish
Guest

it rocks….:))

View Comment
hip hop
Guest

thansk you

View Comment
SHAHADA FAUZI
Guest

THANX 4 THE AWESOME TIPS…SIMPLE N EASY 2 FOLLOW…IT'S REALLY COOL…LOVE IT!!!:D

View Comment
wpDiscuz