Pages

Advertisement (468 x 60px )

 Link to BloggerStop.Net

Add An MP3 Music Player To Your BlogSpot Blog

Posted: 06 Oct 2016 10:08 AM PDT

*UPDATE 06 October'16: Streampad music player is no longer working. So, read this post 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:


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

How To Add Music or MP3 Songs in Your Blogspot Blog

Posted: 06 Oct 2016 07:08 AM PDT


*UPDATE 06 October'16: Google Media Player is no longer working. So, read this post to add a better and more customizable MP3/Music player to your blog : Add MP3 player to your blog
If you want to embed any music file or mp3 in to your website so that your audience can listen and enjoy it, then here's a simple way to do it !

First of all you need a DIRECT link of the song/ mp3 file.
So upload it to:
OpenDrive
Now you will be having a link to your music file like this:
http://www.opendrive.com/files/7285877_812bb/airtel_1.mp3
Use the code, displayed below:
<embed type="application/x-shockwave-flash" wmode="transparent" src="http://www.google.com/reader/ui/3523697345-audio-player.swf?audioUrl=YOUR_MP3_FILE_ADDRESS" height="27" width="320"></embed>
Replace the text in RED, with the DIRECT LINK of the MP3 file (from your OpenDrive account).
This plays the song like this:

Google has stopped providing the free player :(