Add background music to your blog
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 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="" 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="" 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: | | | | | |

Author: Amanda Kennedy

Amanda is a professional blogger and web designer living in Sheffield, United Kingdom.

In addition to curating Blogger Buster, you can find Amanda on Twitter, Facebook or add her to your circle on Google+.

Like to share?

You may also like to subscribe to Blogger Buster's RSS feed or receive free email updates of our latest posts.

Advertise on Blogger Buster

Browse through the Archives

All existing posts are still available to view while I'm working on the site, albeit seen in a much simpler interface. Feel free to browse through the archives to find tutorials, templates and articles to help you build a better blog:

Blog Archive

© Blogger Buster 2010 Home | About | Contact | Hire Me | Privacy Policy