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!

Feb 25, 2007

Digg This Story

Add Music to Blogspot blog

This article is updated to address the difference in the way the code is interpreted by the different browsers, namely Internet Explorer and Mozilla Firefox. We have also included a sample music file which you can use to test the effects of adding the sound file to your Blog. As well, read our article on Flash Music Player and Music Playlists to add a playlist of several musical pieces or songs.

“Music, the greatest good that mortals know,
And all of heaven we have below.” ... Joseph Addison

Depending on the subject matter of your blog, having music played in the background may either enhance the pleasure of reading or annoy your visitor. Imagine the agony of surfing the web in discreet, only to catch the attention of your office colleagues or parents when the music automatically blasts off in the background. Not to mention, a big music file may cause a slower page download. Nevertheless, the solution, as shall be explained later, is simple - have an option for the reader to play or stop the music.

To begin, you will need to have a music file uploaded onto a server. You can read about using free hosts like Google Page Creator and Google Groups. We have also a rather comprehensive list of free Image Hosts and File Hosting Services in our article on Manage Blogger Image Storage Space. Check out those sites and choose one that is fast, reliable and enables hotlinking to the uploaded files. Upon uploading, note down the URL of the file.

Alternatively, there are several sites that offer free download of their music files. You can enter search words like “free music download” or search for a popular artist name in the Google search box. Most of the sites that offer free download will lead you to the file location stored in their servers. Copy the URL of the music file that you have chosen.


If you would like to hear how the music works on your Blog, you can also use this music file which we have uploaded onto Google Pages - http://ownlblog.googlepages.com/BalladePourAdeline.mid - whenever you are prompted to enter the “URL of music file”. This file is for testing purposes only. Please do not link permanently to this file as it may be changed or deleted in due course.

Next, you would have to decide how you want the music to be played.

Link for reader to click

This is a text link. Your visitor can click the link if he wants to hear the music.

<a href="URL of music file">Click to hear music file</a>


Remember to enter the URL of music file into the above code. This code can be inserted into your Blog post. If you want to put it in your sidebar, you can go to Template -> Page Elements -> Add a Page Element, select HTML/JavaScript and insert the code. Whatever words you type into the “Click to hear music file” will appear as the text link.

Music with a console

A music player console with controls of the volume, on and off buttons, would give your visitors a choice on how he wants the music played. With the code stated below, the music will not play unless the visitor clicks the play button.

You can either insert the music console into your Blog post or your sidebar. If you want it in the sidebar, go to Template -> Page Elements -> Add a Page Element, select HTML/JavaScript.

The code to insert is this:-

<embed autostart="false" height="40" loop="true" playcount="2" src="URL of music file" width="300"/></embed>


For instance, using the following code:-

<embed autostart="false" height="40" loop="true" src="http://ownlblog.googlepages.com/BalladePourAdeline.mid" width="300"/></embed>


this is what you see:-



It will look different in IE and Firefox, depending on the installed plugins.

Note the following attributes and how they work on different browsers:-

1. Insert your URL of music file into the code.

2. The width of the example you see above is "300". If you want it to be embedded neatly into your sidebar, the width should not be greater than the sidebar width. For example, if your sidebar width is 150px, the width of your console should be about 140px.

3. The height would depend on your preference and space constraints.

4. The autostart attribute has two options. If you choose "true", the music will automatically play when your page is loaded. As I have mentioned earlier, this is not a good option unless you are absolutely sure all your visitors would not mind the music. The better option is to state it as "false". If the visitor wishes to hear the music, he can click the play button to start the music.

Note, however, that while it works fine in Internet Explorer, it may not be so in Mozilla Firefox. The default setting for IE is "false" which means the music will not play automatically. The default setting for Firefox is "true", and when we experimented with .wma and .wav files, they automatically played even when we set the autostart to "false". If you are working on the Mac, the default setting for both browsers is "false".

5. The loop attribute indicates whether the music should stop once that particular tune ends. The common attributes are "false" or "true". If the attribute is "false", the music ends after it is played once. If it is "true", the music will automatically loop and continue playing until the visitor clicks the stop button or leaves your site. For short music pieces, you may want it to repeat and choose "true".

For certain versions of Netscape browsers, another attribute that might work is loop="n" where n is a number. If n is 2 for example, the music will play twice and stop. The similar attribute in Internet Explorer is playcount.

6. You can specify the number of times the music is to be played. In the above example, where playcount="2", the same piece of music is played twice before it stops. If you want the music to be played once, you can delete playcount altogether. Note that this only works in Internet Explorer.

Background music to play automatically

For the music to play the moment your page is loaded, the code will have to appear in the HTML document of your site. Note that in so doing, there are no controls for the visitor to choose whether or not to listen to the music, nor options to turn it off. Login to your Dashboard and under “Template”, click “Edit HTML”. Somewhere near the top, after the word <Head>, insert this code:-

<embed autostart="true" height="0" loop="true" src="URL of music file" width="0"/>


Remember to insert the URL of music file into the code. There is no image of a console and readers cannot choose to turn off the music. Use this option with discretion.

Troubleshooting

The sound files can be in any format provided that your browser has the necessary plugin to play that file. Many people have problems playing MP3 files because their Firefox browsers do not have the necessary plugins. To check what your Firefox browser can support, enter this command into your browser:-

about:plugins


It will list all the installed plugins and the media files that can be played. If you need additional Mozilla Firefox add-ons, you can visit their Add-ons Page.


Further reading:


If you are looking to have a video clip or movie file added to your blog or template, you may check out our other article Add video clip to Blog. We have also written a guide on how to add a music player to display a music playlist and allow readers to select and play the music they want to hear.

© 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

79 comments:

Women on the Verge said...

Help! I love your info, but I have a file that I burned onto a cd from itunes. I uploaded it and it saved as a .cda. When I try to use it in the media player code, all I get is the square full of shapes that I dread....

Nicole said...

I just started a blog in January, and have been frustrated trying to figure out how to spice up the template and "make it my own". I'm lovin' your blog right now, and have learned a ton of really neat things! Thank you!

Janey Loree said...

I've bookmarked your blog already! I came to welcome you to BLOG VILLAGE and found a plethora of blogging tips. Thanks for joining!!

Marsha said...

hello, I came here from blogvillage. I love your blog. I cannot wait to weed through all your tips and tricks. I have been teaching myself this stuff too, so I cannot wait to learn more.

bizwhiz said...

Thanks to all for your encouraging comments. Visited your nice blogs and bookmarked them too :)

I have also sent to "women on the verge" an email explaining what .cda format is about, and how it can be converted to other other formats. Do let me know if I can be of further help.

Hedi said...

I'm wondering if there is a trick that enables a sound when you point the mouse over an object (link) for example.

Vin said...

it's people like you who make the web a better place...it's great that now I have a single point from where I can learn so much! Thanks

TDR said...

Your blog spot is great, very useful advices.
But I have trouble with playing music
in firefox. I done everything like you said but it says: Additional plugins are required... and when I click it ti says: No suitable plugins were found.

bizwhiz said...

Hi TDR

It would appear that you do not have the plugin to play that media type which you installed.

To check whether you have that in your Firefox, enter about:plugins into your browser. You will see a list of media files that are supported.

The common one that has problem is usually Windows Media Player, for obvious reasons. You can install it by visiting the Mozilla add-ons page -
https://addons.mozilla.org/en-US/firefox/browse/type:7

For further info and discussion on the Windows media in Firefox, you may also read the discussion at -
http://forums.mozillazine.org/viewtopic.php?t=206213

Stevens8204 said...

Great stuff indeed....even as a semi experienced blogger...I learn something new every time I read...which helps...a lot. You are linked up on The NHL Arena Program and your site is a valuable asset to all bloggers everywhere.

You And Me said...

hai..

i want to add music background in my blog, but after i paste the code,i can't save my HTML coz the blogs needs some plugins again, and error command in the code.

how fix it ???

thanks

fruit said...

hi 10x for the tip. can i make playlist?

bizwhiz said...

Thanks for all the feedback. I have updated this article and addressed the concerns relating to the application in different browsers.

Yes, fruit. We will be writing an article on song playlist.

fruit said...

cool!!

what can i do when the song Stuck,
its because the steaming or something else?

bizwhiz said...

Hi Fruit

Probably so. Depending on the size of your song file, it may take a while to download. Some browsers are configured to play bits of it while it is being downloaded, a process called streaming. Sometimes the data is not sent quickly enough to the receiving side and the sound will not be smooth.

fruit said...

someone told it because the Server that i uploud the song, thet is right?

10x again :-)

SOPHIE said...

you are my new best friend :) - ive totally learnt loads and had fun making all the adaptions... still have a few things to work on but im sure i will find answers somewhere on your page!! thanks for taking the time to make entries with such clear instructions - its massively appreciated :)

Kimmo said...

An easy way to add music to a blog is Sonific's songspots Widgets. For instance with blogger it's a 5 second task. Check examples from http://songspotting.blogspot.com, and see the real action at http://sonific.com

shonari said...

Hey thanks for the info...really helpful. i have a problem thou. how do i add more than one song to the player? what addition do i need to make to the code and where?

thanks in advance

... said...

I am creating a new blog that will have links to the songs that our family singing group has recorded. I am having trouble uploading the .wav files to our blogspot blog. What do you suggest?

bizwhiz said...

Hi ...

Have you looked at the steps in this guide? They explain how you can link music files. But the music files cannot be uploaded onto Blogger. You would have to upload them somewhere like Google Pages or Google Groups or any other free server. After that, you can create the link or embed the sound file in your blog.

... said...

Thanks BizWhiz! I followed your suggestion to use my Google Page. I did have trouble saving my .wav file. It failed every time. After saving our songs as mp3 files, they uploaded to our Google Page just perfect! Thanks again for taking the time to put all this knowledge in one place!!!

Ram Arvind Kotaru said...

It works...thnx.

l'étournelle said...

Thank you so much for your blogtips. They are very helpful. You're one of my favourite website.
I'll be also very interested in your article about song playlist.

JustJames said...

Hi from Spain! Thank you very much for the tips! Amazing! But I have two questions. May you answer if you have time enough?

1- How can I open the music link directly in a new page? I would like my (few) readers could listen the music while reading the blog.

2- How can I change the background of the music console? My blog's background is dark blue, and the console's background is white. Looks quite ugly! Is it possible?

Thank you so much in advance!!!
And good job!!!

bizwhiz said...

Hi JustJames

To open links in a new page, we can add a target attribute like this:-

<a href="URL of music file" target="_blank">Click to hear music file</a>

You can have a look at our Hyperlinks article to understand how the tag works.

The console follows the browser plugin. There are limitations like you mentioned. If music is an essential aspect of your Blog, you may want to try some of the 3rd party provider progs. They are free and the interface is customizable. We'll probably look around for some worthy ones and cover that in our post.

{[[[(m•g)]]]} said...

This was awesome. so straight forward and easy to use. Thanks so much

BayingAtTheMoon said...

Thank you SO much for that! Other sites made this so complicated I gave up. With you I had exactly what I wanted up and running in minutes!

Texas Liberty Lady said...

Thanks so much for this blog. I can't tell you how much I have done with my blog since finding it.

I am having a major problem though with background music. I paste code with my music url andthe entire thing shows up in the sidebar. No controls at all. Help and thanks again for wonderful tutorials.

bizwhiz said...

Hi Texas Liberty Lady

If you want to see a console, you will need to put in the embed code and not just a URL link. An MP3 file plays well in IE but Firefox may lack the plugin.

The other thing is that your main post column is not aligned. In your template, you have this:-

#main-wrap1 {
margin:15px 0 0 15p;

It should read this:-

#main-wrap1 {
margin:15px 0 0 15px;

aroengbinang said...

It works well, great tips! Awaiting the tips for having widget with playlist menu. Cheers.

Jess said...

Hi, I've followed your instructions
to add music (Background music to play automatically) onto my blog but I kept getting the following msg:

(We were unable to save your template
Please correct the error below, and submit your template again.
Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
XML error message: The element type "head" must be terminated by the matching end-tag "".
)

What could be wrong since I followed your code (added in my URL) exactly?

bizwhiz said...

Hi Jess

You can try it without the </embed>

If you have problems with inserting it in the template, you can also insert the code into a "HTML/JavaScript" page element.

Jess said...

Thanks! The HTML/Java script method works! U're a godsend!!! :)

Catty Pants said...

You guys are awesome!

I know some famous bloggers out there that are unwilling to share their tips on how they make their blogs look so nice so to chance on a site like this is godsend!

I do have a question though about adding music to my blogsite:

I'm using Window's Vista and I've succesfully manged to add the page element but whenever I click it, it hangs and Window's Vista says something about colour imcompatibility and a white box appears in the centre of my screen!

I'm guessing that Vista isn't compatable with the plug-ins (whatever they are, you are talking about a real novice in computerin!) so what is the alternative?

Thank you and keep the fabulous job up! xox

Miles said...
This comment has been removed by the author.
Miles said...
This comment has been removed by the author.
bizwhiz said...

Hi Catty Pants

Which code did you add? Recheck for typo error. It is unlikely though that a 'color incompatibility' error is due to that. The next time you encounter an error message, try to note the full text and search in Microsoft support for the cause and solution to the problem.

Bungeegal said...

I'm confused the music works for a couple of hours when I log back in the next day, it disappears but the code is still there? Do you know what causes this to happen?

bizwhiz said...

Hi Bungeegal

If you enter that music URL into your browser, do you hear the music? If you don't, the URL is probably incorrect, or the site that you have uploaded to does not allow hotlinking, or the file is not for public access. Try uploading it onto another server.

ram said...

i have to add music to indianglitz.blogspot.co

Tracy said...

Thanks ever so much for this ! I was getting tired of the limited music on my Slideshow but now I can put on whatever I want woohoo !

Greatly appreciate the big help !

Ethiopian Walker said...

Thank You Very Much!! This worked great... i had almost given up before finding your site.

>> said...

how can i play more than one song in background?

john said...

hi! this blog really helped clarify things when i was looking to have background music for my blog: http://substix.blogspot.com/

newbie that i am, i still haven't got it sorted. i followed your instructions, uploaded the mp4 to a website that allows hotlinking (ssupload.com), but there is a question mark where the quickplayer should be. i use Mozilla btw, and i am stumped...PLEASE HELP!

-NoobBlogger- said...

Hey ... I Was Doing The AutoStart Player But Was Only Able To Play 1 ... Any Possible Ways To Play More Music Using The AutoStart Player ?

Larry Legend said...

Finally figured out the audio thing... Apparently not all hosts are blogger friendly...

But now I want to go further.

Is there a way to have multiple audio clips that cycle so that only one of the several is played each time the page is loaded???

Thanks! I knew NOTHING about java scripts or editing HTML's, or any of this stuff when I found this place... I don't know much now, but thanks to you guys I have been able to put together a blog I'm very proud of. Thanks so much. This site is a Godsend!

Davise said...

Help ! I have tried your music upload tip and it works ... however, i tried to change the blogskin after that.However, the blogskin didn't work. I tried many others and they all didn't work. Finally, I changed the "whatever you call it " to classic and tried again ... it worked ... however, theres no more place to add music anymore ...

Davise said...

Help! I tried to use many blog skins, but i failed.I changed to classic and tried again ... this time i didn't fail ... however, all the music i previously posted on the webpage was gone and i don't have the option to put java /html on my blog again !!! PLS HELP ME !!!

Anonymous said...

Enjoy yourself with music. Come and find whatever you want www.mp3-films.com

Dining Room Furniture said...

I've bookmarked your blog already! I came to welcome you to BLOG

Anonymous said...

Hi, thank you for your site. It is definitely one of the best out there. How do I modify the code so that it is just one blue play button, like this blog: http://everybodycares.blogspot.com/

Thanks in advance!
Jen

Cecelia said...

Thanks for the tip. Now I can't decide if I want to add music or not, but this is very helpful.

Joshua said...

what about multiple music tracks.... I like to be as discreet as posible so I am using your idea about a 'text link' and hving it routed to the music file... works great... but what about multiple music files/urls?

Chuck D said...

Hi I'm having trouble following your instructions on getting music to play on my blog. This is what my audio link.

http://exclusiveburner.googlepages.com/Prodigy-DirtyNewYorker.mp3

I directly copied the HTML from your site and I added my link to it from googlepages. THe problem is that everytime I load the page I get a Realplayer error. mem://05B1DCE0/ to be exact. Any solution or advice? exclusiveburner@Yahoo.com

It did work and play fine the first time, but now its error everytime and I haven't changed anything.

Tommy said...

thanks for your informative website.. found it at last that i can put song on my blog now.. yea

Alexis Palomino said...

THANK YOU SO MUCH!

Cristobal said...

Thank you

jkrogers said...

i think i'm severly challenged, but once i upload my music file to my google pages, i don't see a URL it just says songname.mp3

Wallace Tan said...

A problem occur when i added the music in my blog..the code affect my advertisement.
But i copied the same code to my another blog which dint hv any advertisement, it is fine.

Anonymous said...

This is a great and very helpful tutorial. Only wonder if the mp3 file is too large (4mb-5mb) what to do about so the page upload time is not too long? Any suggestions for this. Apreciate it...

ht. said...

hi, i just created my blog and am trying to add music to my blog, playing automatically.

embed autostart="true" height="0" loop="true" src="http://listen.grooveshark.com/song/Another_Perfect_Day/4807" width="0"/

(i got rid of < > for the sake of posting this comment)
this is the code i added and for the URL, ive tried many different URLS and still my blog wouldnt play music. window media player works well and i can play other songs from the website im getting songs from. what could be wrong?

M.Mustafa Ahmedzai said...

hi!
I just love your site. Plz tell me how can I get that beautiful music that you have in your sample player. This piano music was just awesome, full of life and peace. plz plz tell me how to download this audio. Below is my link back
TECfun a Blog on 12 O/L classmates

I Am Cassie:0 said...

Hey..
firstly your tips are ace.. thanks.

I'm a very new blogger, and have started a music based blog.
I've tried following the steps you mentioned, but I only seem to see a white box on the post with a blue/green symbol like theres a missing image, but theres def no player? :( im on vista/IE7 not sure if this makes a difference?

I want to be able to share my music with readers so it's downloadable, but they can listen/preview track too... like this post here:
http://www.post-rockist.com/2008/09/22/mason-proper-friendly-foes-olly-oxen-free-cd-release-born-radical/

Firstly how do I add this player?
and secondly how do I make the file directly downloadable (so you just R.Click Save target as)

At the moment I'm using mediafire to host, & put hyperlink to the file share URL, but it sends them to the Mediafire download page rather than just being able to directly download.. Please Please help!

warmara88 said...

my songs are only playing for like 3 seconds... what am I doing wrong. I followed the directions exactly... They are short on google groups too.

SophieMae said...

Thanks ever so for all the fabulous tips! I added the music to my blog and it worked perfectly! But after a while, the mute button disappeared. What's up with that?! Not a biggie, just slightly perturbing.

Danny and Dana said...

Thank you for all of the blogger knowledge you share with everyone.

I am using Blogger for a wedding website and I would like to have music playing. However, with there being many pages to my website, readers will be clicking frequently from one page to another. Is there a way to keep the music playing continuously without it being interrupted or reloaded with each page change?

Thank you for any help that you may be able to give me.

andres said...

Congrats on such a resourceful blog!!

Georgia LA said...

Hey,

Am new to this blogging lark and just wanted to say thank you so much!

Georgia

James said...

Hi,

I want to embed the music player in my blog. I copied and pasted the code you have provided in to my post and changed the url to the url where i have the song.

But I dont get the player in my blog. It just displays a box which will be displayed when the image is not loaded.

Please help!

James said...

Hi,

I have fixed the problem I just mentioned in my previous comment.

I had used the url provided by the website as the url for the song. But that is not actual folder where i had placed the song. So, I tried giving the path of the folder i had put this song along with the song name and it worked.

Thanks for all the tips. Great job!

James said...

Hi,
I managed to display the player on my blog using your code, but it doesnt play when i click the play button.

What could be the issue?

Tracy said...

Sooo frustrated... I have been trying to add music to my blog for days with no luck. Just to play at start up, no controls. I've added the embed code as instructed with using site http://www.hotlinkfiles.com/files/2022104_ju5z2/Blessed-MartinaMcBride.mp3]Blessed-MartinaMcBride.mp3 as the replacement url to my html right after the word head. It saves fine, but nothing happens when blog is opened. I've tried many other approaches, but always the same result... nothing. PLEASE HELP!! I've worn out google trying to find a solution.

Embun a.k.a Anis said...

Hi,
I've followed exactly your code but only a white square appear, no music console. What's wrong?

Thank you.

Dream BIG said...

Thanks for the lesson! Very helpful, and exactly what I was looking for

CheapToys said...

this doesnt help at all...im looking for a music player that automatically streams classical music...dont want to load music or playlist? anybody can help me? pls send me a reply

TRochelle said...

Love your site and I plan on using it more than a 90 year old hooker! Yes I have a morbid sense of humor, matches my waistline. I just love everything you have here and I have even referenced it on other websites! Keep up the awesome work!

Teresha and Damon said...

We just started a blog to announce the impending arrival of our first child and wanted to customize it with music and three columns. Thanks to your informative site, we were able to do all these things!! You are the best!

OMGsebastian said...

How exactly do we put this in the sidebar?