14 Add background music to your blog
Wednesday, July 18, 2007 /

After uploading the "Sweet Dreams" template, I was asked how to embed background music in a blog. It's actually quite simple to do this, and there are various methods you can use.




In this post, I'll concentrate on actually embedding the music (rather than adding widgets such as Last.fm playlists). You can see an example of embedded background music here and also further down this page...

The easiest method of adding background sound is to include a line like this in your blog template, just after the opening <body> tag:

<bgsound src="http://yoursite.com/yoursound.mp3" loop=infinite>

where the URL is that of the background music you wish to use. This method works perfectly well, but visitors to your site will not be able to switch the music off if it becomes distracting.

So instead, you may prefer to use this method instead, which is compatible with all browsers (press the play icon to start music):


This is achieved by including the following code somewhere in your template (eg: the sidebar):
<embed width="200" src="http://yoursite.com/yourmusic.mp3" autostart="false" loop="false"
height="50"></embed>

You can change some of the variables to suit your needs:
  • autostart: set to "true" to make the music begin as soon as the page is loaded, or "false" to ensure the user has to press the play icon

  • loop: set to "true" to have the music play over and over, or "false" so that it plays only once.

  • height: if this is set to "40", only the play options will be visible. You can make this larger if you prefer, in which case blank space will be visible.


Using either method, you can link to .mp3, .mid or .wav music files. However, you must be aware of copyright restrictions, and ensure you have the appropriate permission for use for the music you decide to use!

Here are some sites I've used for copyright-free music you could use in your blog:

Technorati Tags: | | | | | |



14 comments:

March 5, 2009 at 5:13 PM Hila Glam said...

I know the code by heart, my only problem is that I don't know any websites that include online mp3's to put into the code... help, please?

Thanx in advance. :)

http://thepoisonlab.blogspot.com/

March 8, 2009 at 4:27 AM blog kholifin said...

hai all I have a blog that provides a variety of music, western, indonesian, mandarin, malaysia, japan, india music, and island-bred and other music instruments rapt relaxed time to listen please download the free www.worldmusicmp3.blogspot.com

March 13, 2009 at 4:37 AM Jingles said...

Yes of course the blogs with back ground music can get more fame than others.....

March 27, 2009 at 7:42 AM mp3 players said...

nice post, thanks for sharing

April 28, 2009 at 9:09 PM airdone13 said...

Thank you a lot for this, gonna put this on my blog

May 7, 2009 at 7:33 PM
Anonymous said...

hi there,
it seems that i can't put it.
and once i put it, i refreshed my profile then, i saw "click here to download plugins" while i've installed Quick Time and the others.

btw, where is the Java/html template *sorry, i'm a newbie. need some helps. :)*

can anyone help me?

thanks.

May 22, 2009 at 9:58 PM Superbikes said...

Nice post and great tips..thnx Amanda

May 26, 2009 at 3:56 AM Meedan said...

Hey Gr8 man.. I really needed this.. Thanks a ton for this tip... [:)]

June 18, 2009 at 10:14 AM Charles said...

!!!!!!!!!!!!!!!!!!!!!!!!
I've tried everything on this site for
adding sound to my blog.
I've wasted 5 hours searching and NOTHING HELPED!
SO COULD YOU BE MORE CLEAR ON THE DIRECTIONS AND WHERE EXACTLY DID YOU PUT THE CODE!?!?!?!?!?!

June 27, 2009 at 9:15 AM NeLz said...

ughhh...i dont know what im doing wrong :( Firefox doesnt do it??

June 29, 2009 at 8:30 AM wangopuff said...

PLEASE HELP I GET THE ERRO "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 markup in the document following the root element must be well-formed."....WHAT DO I DO???

July 17, 2009 at 1:49 PM juhi khuddose said...

@charles:
you can add only audio of .wav format:) other format like mp3 etc does not work for background sound.
u can use a audio converter eg-"Switch file sound converter" it is user friendly and most of all its free:) u can convert any audio file into other formats.

you shud put that code after the opening tag<> of body. i cant give you ne examples coz while commenting em not allowed to use any html coding!!

July 17, 2009 at 2:53 PM juhi khuddose said...

@wangopuff:
you might have done something wrong that is why it does not wrk:)
ur code sould be just after opening of "body" body will be written inside this <>
just after that write the code
eg- openthe tag <
then write bgsound src= 'http://songs.apniisp.com/naats/album6/11%20-%20Mother%20-%20Arabic%20(Apniisp.Com).mp3'

then put the closing tag />

hope u got me:) i cant use exact coding as it is not allowed!

July 17, 2009 at 3:08 PM juhi khuddose said...

well you can put background sound of your from your pc as well..instead of giving the URL giv the file path[C:\Documents and Settings\juhi\Desktop\music.wav] of you file and remember as i said earlier you can use only file with format .wav

the code wud be

example:
1. put opening tag [<] before bgsound{starting}
2. put closing tag [>] after wav'
3. again opening tag [<] before /bgsound
4.closing tag [>]after bgsound.

bgsound src='C:\Documents and Settings\juhi\Desktop\music.wav'/bgsound

hope i made this clear!

u can check my blog i got bgsound:) but its not wrking in firefox as for now [got to check out y!!]but wrks wit internet explorer

Post a Comment