July 18, 2007

Add background music to your blog

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: | | | | | |



View blog reactions


Related Posts by Categories



Post a Comment 12 Comments:

19 July 2007 14:18 F1 Wolf said...

Thanks for another great tip, have to try it. I followed your tips when moving my blog from blogspot domain to custom one, redirecting the opening, creating the favicon. And one more time again when starting another. Your blog was really helpful, so I mentioned it few times at one first posts at tatraplan.com + it is among the links on my older blog f1wolf.com. Thanks again

20 July 2007 09:03 Amanda said...

You're very welcome, F1 Wolf! I'm glad my posts have helped you with your blogs and thank you for your comments :)

22 July 2007 22:41 Jack Haggis said...

Thanks a lot for the tip!

01 August 2007 20:19 Anonymous said...

Try this site for some great free tracks for blogs, podcasts etc..

They're all free to use in your blog

Free Music Tracks

27 August 2007 08:46 magic-moosey said...

That all very good but what if you want songs that are saved in your computer from C.D's or a download site like frost wire
(which i have). I can't seem to get any songs. Please help x

27 August 2007 16:31 BayingAtTheMoon said...

The second method works great if you just paste the embed code into a Java/HTML element; you don't need to put it in the template I found.

27 August 2007 21:39 Ravleen said...

Thanks for posting this! One question - is there a way to have multiple songs that play in a random order? Like a playlist in the background? Thanks!

26 February 2008 20:18 Nyack Water Cooler Staff said...

I've been trying to embed just a simple sound clip, I can hear it fine in QT,iTunes, etc. but when I upload it and embed I cant hear it?

Also, on your site I'm not hearing any of the sounds?

All my computer settings are fine..

27 March 2008 02:14 P said...

Hey Amanda!
Thanks a lot for the great tip. Its working perfectly :)

29 May 2008 13:53 Shirayuki Mizuki said...

i would like to know what is the link to that music in this page.. it sound like the nut cracker music but i cant find it anywhere. can u please give the link? please and thank you

10 July 2008 05:07 Unforgotten Addictor said...

This is annoying! Its working absoulutley fine but it only plays the first couple seconds of the song!

19 July 2008 12:37 Alexandru Oprea said...

After following the above mentioned steps, and after I have installed Apple QuickTime, the "Click here to download plugin" (the one with the blue lego like piece) icon appears, as if I had no plugin to play it.

What can I do ?

Many

Post a Comment