Adding Sound to Web Pages


Have you ever opened a Web page that plays music?  Personally, I find these incredibly annoying and usually change to another page as quickly as I can ... or turn my speakers down.  Don't get me wrong:  I love music, and I'm sure I've annoyed a few drivers with the base beat eminating from my SUV, but background music on Web pages is often far too loud.

At home, I usually have my computer speakers turned up for game sounds, so a loud sound blaring at me from a Web page that I haven't even had a chance to read is frustrating.  IMHO, it's not terribly professional for most business sites ... unless, of course, your business IS music.  Of course, there are no hard and fast rules.

Okay, so now that you know one of my pet peeves, I have to say in fairness that I do think the right music at the right sound level can add a really cool touch to a personal or family Web site.  Since I've seen several newsgroup posts and Office Online questions asking how to do this, I thought I would provide a quick tip for adding sound to a Web page.

There are two basic ways to add sound to a Web page.  One plays the sound file in the background; the other plays it when a user clicks on a link.  Today, I'm going to show you code to do both.

Background Sound

Adding background sound to a Web pages is as simple as adding an HTML element to a page.  Here are the three elements that you can use.

Note   To use any of the following code samples, replace "sounds/CARBN_01.MID" with the path and filename of your own sound file.

  • Using BGSOUND

    The first element, BGSOUND only works in Internet Explorer (although from what I've read, NCSA Mosaic also provides limited support for it). One advantage of the BGSOUND element, IMO, is that the sound controls don't show in the browser.  This means that the background music is really in the background and can't be controlled by the user.  Okay, so I admit to being a control freak, but I don't like how the controls mess up the look of my page. Anyway, if you want to use the BGSOUND element.  Here's the code:

    <bgsound src="sounds/CARBN_01.MID" loop="-1">

    Use the loop attribute to specify the number of times the sound bite should play.  A value of -1 for the loop attribute, as shown in the previous code, makes the sound play until the browser is closed or the user opens another page. If you don't specify a value for the loop attribute, the sound file will play once and then stop.
     

  • Using EMBED

    The EMBED element functions similarly to the BGSOUND element. The following code shows some simple code for the EMBED element.

    <EMBED SRC="sounds/CARBN_01.MID" AUTOSTART="TRUE" HIDDEN="true">

    The loop attribute tells the browser how many times to play the sound file.  Setting the hiddent attribute to true tells the browser to play the sound file until the user closes the browser or opens another page.  As with the BGSOUND element, if you don't specify a value for the loop attribute, the sound file will play once and then stop.

    Setting the hidden attribute to True causes the browser to not display the controls. Alternatively, you can set the height and width attributes to 0, as shown in the following code, to hide the controls.

    <EMBED SRC="sounds/CARBN_01.MID" AUTOSTART="TRUE" hidden="true" loop="true">

    Although hiding the display of the controls takes a bit of control away from the users, it does give you a great deal more control over how the page displays, and you don't need to work around the display of the controls in your web page. This is a good thing; however, if you absolutely want to display the controls in the browser, you can set the hidden attribute to false, set the height and width attributes, or use the META element, as shown below.

    Note   In Internet Explorer, both the BGSOUND and the EMBED elements allow the use of the volume attribute.  Setting the volume attribute to a value between -10000 and 0 allows you to control the volume of the sound, with -10000 being no sound and 0 being the full sound.  IMO, -1000 is the best setting to allow the sound to play without being either too loud or too quiet.

    For cross browser functionality, the EMBED element is the best choice for playing a background sound.

  • Using META

    When you use the META element, the browser displays a sound control bar so the user can adjust the sound, such as volume and play/stop.  I like the idea of the controls, but as I mentioned above, they do tend to interfere with the design of the page, unless, of course, you design around them. The following code shows the META element.  The "autostart=true" tells the browser to play when the page is opened.

    <meta http-equiv="REFRESH" content="0;URL='sounds/CARBN_01.MID?autostart=true'">

    Another problem with the META element is that depending on the default media player for the client browser, visitors may get different behavior.  For example, I found that if QuickTime was my default player, the browser displayed the sound controls within the page.  If Windows Media Player is my default player, the browser displays the sound controls in the Media pane, unless I specified to play media items in their own window, in which case, Windows Media Player opens in a new window, not within the browser.  I'm not sure as a designer that I like this lack of control.

Play Sound on Click

Playing music on click is easy.  All you do is use an A element, the same as you would with a hyperlink to another page, and provide the path and filename to the sound file as the href attribute. The following code shows how to do this.

<a href="sounds/CARBN_01.MID">Play Music</a>

Then, when the user clicks on the resulting link, the media player opens and plays the sound file, very simple and a much more consistent user experience than the background sound options.

Resources

I found several resources while compiling this information, so to give credit where credit is due, check out the following resources for more information about adding sounds to your pages.

HTML Tips and Tricks:  Background Sound
Adding Background Sound to Your Web Pages
Web Diner:  Add sound to your Web page
Tips, Tricks, How-to, and Beyond: Add sound to a web Page

Of course, you can probably find many more resources for adding sounds to your Web pages by doing your own Web search.

Comments (9)

  1. distressed says:

    You are a very sick lady, and should help prevent this attack on our ears, not help the unfortunate who think this is a cool thing.

    I wonder what other items of bad taste you are sporting, 80’s ra-ra skirts perhaps, wham ring-tones on your phone 😉

  2. Steve says:

    Hmm,

    This could have a practical use…sounds when an error occurs, or invalid input…new web mail arrived…

    S.

  3. Patrick says:

    Ugh.. very bad idea. Having web pages automatically play sounds/music is one of the most unenjoyable experiences on the internet.

  4. Ian Morrish says:

    Easily add audio/video to your web.

    Windows Media Player 9 Series and 10 Series Add-in for Microsoft FrontPage

    http://www.microsoft.com/downloads/details.aspx?familyid=98a35ced-f950-4bd8-8e96-adad9335ac77&displaylang=en

  5. Teri says:

    As you can see from my web site name… (http://easy-web-site-audio.com ) I don’t mind audio on a web site if it:

    A. Is there for a purpose

    B. Doesn’t automatically start

    c. Usually isn’t music

    There are a lot of uses for audio like reading a book, explaining how to fill out a purchase form if there is something different than usual needed, or maybe using audio to enhance your family web site with a quote from Grandma 🙂

    But, I do agree that music that loads as soon as the page does, especially with no off button is the most annoying thing on the web!

    Teri

  6. S.O. says:

    I think this info could come in quite handy for my music site.

    Thanks. Maybe I’d better try the one that can be manipulated though, judging from other comments.

  7. n says:

    well, i like music on sites, so thanks for this tutorial

  8. Cuzza says:

    I have tried and EMBED. I hasnt worked.

    <EMBED SRC="sounds/C:Documents and SettingsCuzzaMy DocumentsMy MusiciTunesiTunes MusicWebsite music.MID" AUTOSTART="TRUE" hidden="true" loop="true">

    I go on the website home page and nothing happens

    Please advise

    Cuz

  9. kung says:

    Thanks lots,it helped me ALOT

Skip to main content