Knowledge is good only if it is shared. As a new blogger, I had learned to change the Web template, and found out the tips, tricks, hacks, and tweaks of altering the Blogger template, customizing CSS, widgets, layout, blog design, inserting JavaScripts, HTML codes, Google AdSense, and other settings the hard way, through many trials and errors. For the purposes of this guide, I had started with the old Blogger “Minima” template. As I made the changes or learned something new, I had documented them. Before changing any template, please remember to save a copy of the current template. After editing the template, preview it, and save it when you are satisfied with the change. Hope this guide will help those who are finding the way around, just like me.

Search Tips for New Bloggers

We have extended our month-long vacation by a couple of days. We shall be posting articles the moment we return. We noticed that Google had updated the Page Ranks. New bloggers who have been waiting anxiously for this can check their blogs' Page Ranks. We have the PR checker link in our SEO Tools - Search Engine Optimization article.

The blog we created recently in Aug 2007, Blogger FAQ and Help, has also got its first Page Rank, a PR4. All our blogs are now ranked:-

Tips for New Bloggers - PR6
Business Fables and Management Lessons - PR4
Famous Motivational and Inspirational Quotes - PR4
Blogger FAQ and Help - PR4

Thanks to everyone for the support!

Sep 27, 2007

Digg This Story

Flash Music Player and Music Playlists

In our earlier article, Add Music to Blogspot Blog, we talked about how music can be played in the background of the blog or through a hyperlink or music console player. Readers had requested for an option to play more than one song via a playlist. We have been looking at cross-browser music players that allow us to display a music playlist of selected musical pieces for Blog readers to listen to. Here, we shall discuss what we believe is a good music player that can be played in both Firefox and Internet Explorer. The following are the instructions on how to embed the music player into the Blogger blog.


On the internet, there are several sites that offer music player widgets and gadgets (including Google Gadgets) that can be added to your blogs. Most of them have easy-to-navigate user interface, and sites like Sonific even offer free licensed music tracks that can be inserted into the widget. These are commercial sites and needless to say, in order to sustain their operations, there will be advertisements and sales promotions. Furthermore, the available songs that they have may not be the latest hits or to your liking.

If you would like more control over the choice of songs for your blog, follow the steps in this tutorial to upload the songs that you like and add a music player code into the Blogger blog. The music player plays MP3 songs which have smaller file size than .wav files.

XML Shareable Playlist Format

You may have come across file extensions .m3u and .asx. These are playlist files and clicking them will play the music or video files stored in the playlists. The new XML Shareable Playlist Format (XSPF) (pronounced 'spiff') is another playlist format for digital media. Although it is still in the early stages of being recognized as an Internet standard, many browsers are able to execute such file formats.

XSPF MP3 Music Player

The site that explains quite fully how a music player application using this XSPF playlist format works is In that article by Fabricio Zuardi, you can find different player styles i.e., a Slim version that displays the basic controls and current music track; an Extended version that shows the controls, list of songs, album cover and music track; and a Button version that is simply a start and stop button. There is also an option for inclusion of the player into the Mozilla Firefox sidebar. What this does is to give readers an option to go to their Firefox Bookmarks and click “My Music Player” link to open the music player in their browser sidebar and listen to the songs while surfing other sites.

Extended Music Player

Flash Music Player and Music Playlists

We shall focus on this extended music player version (demo at the bottom of this blog) which essentially displays a scrollable list of songs, have album pictures, and enable user control over the volume and play mode. First, click this link to download the music player files. Unzip the folder and save it. The files are free from virus and spam ware but you can of course scan them before downloading.

Next, upload all the player application files contained within the unzipped folder onto a web server. For our illustration, we have uploaded our files onto the free server at Google Page Creator. You can also refer to our article on Manage Blogger Image Storage Space for a list of other free file hosting services. Choose one that allows uploading of all types of files as well as hotlinking to those files. To test whether they allow hotlinking, upload a music file and if you type that music file url into an internet browser, you should be listening to that music instead of being brought to a page with other contents. If you have uploaded the application onto Google Pages, the player file will be located at [Do note that Google Pages has a limit of 100MB in storage space.]

Upload Music Files

The aim is to allow readers to listen to your music pieces. Of course, we have to assume you already have the music files either in a music CD or computer. Convert them to MP3 formats. If you need a free music converter, look for one at Upload these MP3 files onto the free server.

Create XSPF Music Playlist

After you have uploaded the songs, it is time to create the Playlist file. Open the application Microsoft Notepad. For most Windows users, the link should be at the Start Programs -> Accessories folder. Copy and paste the following into the Notepad.

<?xml version="1.0" encoding="UTF-8"?>
<playlist version="0" xmlns = "">
<!-- Insert the information into the colored portions. If there is none, just leave the field blank. Refer to for updates to the code. -->

<title>Title to be displayed at top of player</title>

<annotation>Song1 display text</annotation>

<annotation>Song2 display text</annotation>

<annotation>Song3 display text</annotation>

<annotation>Song4 display text</annotation>

<annotation>Song5 display text</annotation>


Insert into the colored portions the music URLs and the corresponding titles or text that you want to display. If there are no album covers or images that you want to upload, leave the fields blank. You can add more songs to the list. Copy and repeat the block of code (in italics).

After you have inserted all the information in Microsoft Notepad, click “Save As”. Under the drop down option “Save as type”, choose “All Files”. Assign a file name and end it with .xspf extension. For instance, if you decide to call it myplaylist, then enter the “File name” as “myplaylist.xspf”. Save the file and similarly, upload this file onto the free server. The playlist file will have a URL like this:-

Insert Music Player into Blog

The final step is to embed the music player onto the Blogger blog. Decide where you want to place the music player console. Then go to Template -> Page Elements -> Add a Page Element and select “HTML/JavaScript”. If you want the music console in your post, when you are at the Post Editor, change to the “HTML” mode rather than “Compose” mode.

Copy and paste the following code:-

<!-- Change the colored values. Refer to for updates to the code. -->
<object codebase="" type="application/x-shockwave-flash" height="160" standby="Player is loading ..." width="400" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000">
<param name="_cx" value="10583">
<param name="_cy" value="4445">
<param name="FlashVars" value="">
<param name="Movie" value="">
<param name="Src" value="">
<param name="WMode" value="Window">
<param name="Play" value="0">
<param name="Loop" value="-1">
<param name="Quality" value="High">
<param name="SAlign" value="LT">
<param name="Menu" value="-1">
<param name="Base" value="">
<param name="AllowScriptAccess" value="sameDomain">
<param name="Scale" value="NoScale">
<param name="DeviceFont" value="0">
<param name="EmbedMovie" value="0">
<param name="BGColor" value="E2E2E2">
<param name="SWRemote" value="">
<param name="MovieData" value="">
<param name="SeamlessTabbing" value="1">
<param name="Profile" value="0">
<param name="ProfileAddress" value="">
<param name="ProfilePort" value="0">
<param name="AllowNetworking" value="all">
<param name="AllowFullScreen" value="false">
<embed src="" quality="high" bgcolor="#E2E2E2" name="xspf_player" allowscriptaccess="sameDomain" type="application/x-shockwave-flash" pluginspage="" align="center" height="160" width="400">

The variables that you should remember to change are:-

1. The domain or location where the player application was uploaded (shown in purple).

2. The location of the music playlist file (shown in red).

3. The background color code of the music player (shown in blue). You have limited choices here because the gray panel colors are fixed. For a list of color codes, refer to our Hexadecimal Color Code Chart.

4. The width and height of the music player interface (shown in green).

Once you are done, save the widget and refresh the Blog. You should now see a MP3 Music Player that has a music playlist of your favorite songs for readers to view, select and listen to.

Have fun toying with the new music player widget!

© Tips for New Bloggers

Found this article useful? Mention us in your post, subscribe to our feed, link to us, or bookmark this site. Thanks for your support!AddThis Social Bookmark Button


CHRIS said...

very good i use a diffrent mp3 player for my blog, i was thinking of changing because it supports streaming music which i need for my online radio station

mara said...

Although I'm not a very new blogger I still find this blog really helpful.
You've done a great work in a few months time!
Plus, the template and layout also look great!

canuckhiphop said...

Thanks a lot for this. I was wondering if customizations for this style of player are limited to everything you have listed above? In any case, it worked for me and i'm happy with it.

Digivolve said...


I have been trying to get this music player to work but it will not load. I have 11 different songs, and all of them including the cover art are stored in a google group. can you please help me!

bizwhiz said...

Hi Digivolve

When you enter the song url into your browser, do you hear the song? Would you like to experiment with one song uploaded onto Google Pages and creating a playlist for that one song just to see if Google Groups is the cause of the problem?

Ellie said...

Wow, thanks I love your blog!! I have stumbled alot and in my stumbling along found you. You are and will continue to be of great help ...thank you so much for such a awsome site. So much information.

Jimi said...


I have to thank you for all the help you've given me personalizing my blog. One thing that I could not find and wanted to do after adding this widget was center it in the footer. Ditto with a picture I have placed there. If this was simple I would just align:center the interior of the widgets. But my desires exceed my very limited coding skills.

You have a wonderful blog that contributes to the community enormously and thankya again for it!

bizwhiz said...

Hi Jimi

You can read our article on How to center align page elements.

Jimi said...

What can I say?

Thanks again!

Jimi said...

Sigh, I have another question. I can see my player in Firefox on my blog. I can see the player at the bottom of your blog in Firefox and IE. On my blog I cannot see the player. I do get a box that outlines the player and says click to activate in a rollover, but then goes away once clicked. The space for the player stays. I have the most recent flashplayer. Any thoughts?


bizwhiz said...

Hi Jimi

We used the same code and method for our sample music player. If you can see ours in IE but not yours, you may want to double check the code that you have inserted e.g., omission of "".

Ron & Jessica said...

Is there a way to Auto Start it?

bizwhiz said...

You can try the code in Add Music to Blog article and use autostart="true".

Ron & Jessica said...

Does that mean there's no way to auto start the flash player?

Jimi said...

Is there a way to stop files from being downloaded (right click) with this player? I don't want any issues with free downloading these kinds of files. I guess in a nutshell is it legit?

bizwhiz said...

Hi Jimi

You can't right click on the player. You also can't prevent people from downloading the songs if they know how. You can put words of caution and remind them that you own the rights to the songs, that is if you truly own the rights.

kazzy said...

thank you for posting this..

Anyways I have a question. is there any possible way that the player would start automatically?

Anonymous said...

I used Project Playlist. Its easy, free, and you can add more than one song. When you add songs it automatically updates your playlist on your blog. After trying so many different ways to add music to my blog, I found this one to be the best.

BOB SAKOUI said...


I could not get this to work properly either...

The player comes up on the page - but it is in it's default colouring, and has no songs loaded - it says 'undefined'

Im using google page creater to upload the mp3s and the playlist...

can you help ?

bizwhiz said...

Hi Bob

Maybe something in the code that you have pasted is not right. Since you do not have it on your site now, we won't be able to see where the problem might be.

maria said...

This worked great! Thanks!

madhopper said...

I have try on my blog but its failed.
After I added everything it only shown a blank gray square on there.
I upload everything to my google page creator
So now I just can add a midi on mine.
I tot wanna made a Jingle Bell Remix mp3 on it, at last only a midi there.

visar said...

bizwhiz said...

You can try the code in Add Music to Blog article and use autostart="true".

Where should I put this line - autostart="true"?

The Sandman Cometh said...

This is an amazing blog, and the html codes help me do what I otherwise couldn't. However, I'm having the same problem as Jimi. The widget never shows up, and the phishing filter doesn't finish. I noticed that after I submit changes, if I look at the code again, it's changed around. I'm not sure why that is, or how to fix it. Please help?

>> said...

i have a problem about purple part. i didnt get it, can u be more clear please?

>> said...

its really great job, but i have a problem: i can make it autostart. i tried everyway, i'm going nuts, please help!

Jeff said...

This site rocks!! keep it going

sarah said...

I just love this blog!

eddie said...


Is there a way to let music continue playing even when I navigate to other posts in the blog? Maybe auto-open a pop-out window just for the embedded player?


lawful said...

Thank you so much for this post.. it really helped me :)

vimmuuu said...

A simply gr8 blog. However, when I tried downloading the music player from the link that you had provided. Guess it isnt working. Can u help ?

Minion of Jutu said...


Thank you for putting this up.... I've been surfing for days looking for info on how play audio from my blog. Your explanation made it spectacularly easy. Now if u'll excuse me, i gotta go spread some looooove around the world....

Thanks again!

Anonymous said...

Help. I did as instructed and it worked first time exactly as described. But after just under a week it has suddenly gone quiet. The player is still there, the songs and album art. But no sound - and I've changed nothing. Please help. I love this player.

Somnium said...

Hey sorry this is silly but how Do i get it to autoplay ? I looked around and some people say autoplay "1" should do the trick but it doesn't. I know you may frown upon auto play but this music is relaxational lol.

Manjusha said...


I basically want to insert an mp3 playlist in my blog post. Googling for this landed me in your site. I have followed all the steps as suggested, and was quite happy to see a player on my blog. However, to my surprise, the playlist displayed wasn't mine. I did upload my own playlist in xspf format, but the songs that I see in the player are: My brightest diamond, tiny wipers, etc.. Could you help me out with this?


Praveen said...

I have found your tips very useful and also have implemented quite a few of them. However, I was looking to add a sopcast player to my blog to stream live TV. I have seen a couple of sites doing that. Let me know if you have any tips on doing that. Thanks.

Tim said...

Hey man... Thx for such an awesome instuctional blog! Couldnt have done a lot without it.

I have a question:
How do I get the playlist to autostart when the page loads?

Heartily said...


i tried uploading this widget in my blog and there were some problems. i've followed all the steps n copied the right stuffs, a few times, n checked to make sure i made no mistakes. and here's wat i came up with so far.

1. i copy the exact codings n replace links as instructed, i get the whole player but my playlist does not appear, only the words "Loading Playlist..." appeared.

//--param name="Movie" value=""--//

2. i copy the exact codings n put a space "_" in between the "swf? playlist" lk so, and i get another different playlist that is not mine.

what did i miss out?

Bharath said...

Thanks mate. Though I had the related help files and the player with me for long, I didn't feel like trying it until I saw this page. I would have been a real shame if I didn't try out something even after seeing some one take so much pain to put something in one of the most comprehensible way that can ever be. For me, your post was more of a motivation than information. Great work, keep it up for the sake of all those enthusiasts and a few lazy bones like me...

pockanchery said...

this blog is very helpful.

Lulu M said...

Hi there

Thank you so much for so many useful tips - what a brilliant site.

One question though, I'm trying to embed a music player as per your guidance above; through Google Pages with soundfiles and a playlist code. I've re-checked the code six times now, stage by stage, and yet for some reason the music player is not loading.

When I view my blog, the page element is there, the size and colour code selected is correct, but it is as though the files uploaded into google pages are not communicating. As I said I've checked again and again that the code is correct, and the URL for my google pages is correct, and yet still there seems to be problems.

Any ideas?

Thank you ever so much in advance - and thank you again for a really useful collection of hints and tips.

My site is


sukhdeep said...

i pasted the code in a post but now all i can see is a grey box!!

thanks said...

with firefox/opera,i can hear my musics,but with internet explorer ,it appear to be a radiostation,playing songs that i dont added.

k said...

hi there.

as with all of the previous comments - GREAT page here.

I got my player all done - but no images show up for the cover art..

any suggestions are welcome!

: k

Dan said...

Is there something convenient we can use besides Microsoft Notepad for the playlist code? I use a Mac and don't have MS Office or Notepad or anything. Any free program that will save in the proper format?

Robert said...

hi....i have can get me a good link to download a mp3 songs!

thanks for the great posting and tutorial!

Robert said...

thanks you the great tutorial...
do you a good URL to find good MP3

Anonymous said...

still don't know how to autostar =_=

Shahid said...


Thank you for the instructions. It worked!

There's a little problem though.. Player doesn't loads when there are multiple instances opened.

Does it happens with you guys too?

Also, I would like to play wma files too so what do I do?


Shahid Malik said...


Thank you its a great article.

It worked on my blog however I'm not able to run multiple instances of the blog I mean the player doesn't loads when I open my blog in two windows.

It works in one window but doesn't works in the 2nd window. Can you please tell me whats wrong here?


Collapsing Horse said...

I love your blog and advice. This music player works great on my site.

I have only one question:

I am trying to make the player start automatically when my page is loaded, and I am not sure what to put where into the code.

Any help would be much appreciated!

Meezee M.Eusoff said...

Hi, I can't copy the code. I can't view the whole code. help me pls....

eric said...

I was lookin at the code and it looks like an adobe flash.

My will not work, so i saved it as a swf, but now it wont open!

any suggestions?

eric said...

im havin a hard time with the code and it will not work.

any suggestions?

Lerolero said...


I dont know why but i can't see the player in my blog. I follow every step of the list but the only thing i can see is a gray box without anything inside

Anonymous said...

hi im new in here, i just wanna ask if you have the easier steps to upload this playlist on my friendster profile? because my layout there was in javascript form...hope you can help me...thanks!c",)

Melody Goh said...

hi thanks for the info.

but I couldn't load my music into my blog, even as I followed your instructions.

I think the problem is I don't know where to insert the copied-code into my HTML.

Help, please? thanks :)

pT said...

hi, I'm trying to implement this player but i see that blogger does not allow me to cut and paste code into a new gadget; rather, the only option available is to LINK to a new gadget. That being said, how would I link to the code? Do I cut and paste it into a PHP file, host it somewhere, and link to that? Or is there some other extension I should be using? Thanks, Peter

Lexono said...

This is a such great information. Cool. Adding music to blogs.

Downloader said...

Thanks :) for the tutorial but can i create my own music player?

GAPS said...

Thank you very much for all this info!

I'm just having the issue that when posting the code on my blog, instead of getting my playlist, I get all the music that the xspf_player has (
why's that?

Anonymous said...

i followed all the instructions as mentioned and only uploaded two songs and therefore my playlist should have only 2 songs..but when i am done with the code, the play list which appear on my blog has 400+ songs..could this be from the xspf player which i downloaded?
and is there a more friendly user way if i were to add new songs into my playlist, i have to re-start from the beginning?

i cannot paste the html i used here, so i don't know how you can help me find out my mistake.

thank you for your help!