1. Technology
Send to a Friend via Email

How To Embed Sound on a Web Page

By

Media Player
soulcld/iStock Vectors/Getty Images

Embedding sound is tricky. You have to choose between a method that works but is not valid HTML or a method that isn't valid, but doesn't work on most browsers. This tutorial teaches you how to write both in HTML so that when the valid option gains support, you can remove the invalid option from your pages. You'll learn the HTML required, so that you can do it in any HTML editor.

Difficulty: Average
Time Required: 10 minutes

Here's How:

  1. Open your Web page in an HTML editor. Your editor must have the ability to edit the source code to follow this tutorial.
  2. Start with an object element:
    <object>
  3. You'll add 4 parameters to the object. The first is "src" that tells the browser where to find the sound file. In this example, the sound file is eureka.wav and is found in the same directory as the Web page:
    <param name="src" value="eureka.wav" />
  4. If you want the sound file to play immediately after it's loaded, make the autostart parameter "true" otherwise make it "false":
    <param name="autostart" value="true" />
  5. The parameter autoplay is similar to autostart, just used by other browsers, set it the same as the autostart parameter:
    <param name="autoplay" value="true"/>
  6. Use the controller parameter to tell the browser if a controller should be displayed to give your readers more control over the sound:
    <param name="controller" value="true" />
  7. Inside the <object></object> element, add an embed element:
    <embed />
  8. Add the following four attributes that are the same as the parameters to the object:
    <embed src="eureka.wav" controller="true" autoplay="true" autostart="True" />
  9. Add the correct MIME type for your sound file into the type attribute:
    <embed src="eureka.wav" controller="true" autoplay="true" autostart="True" type="audio/wav" />
  10. Add the pluginspage attribute so that people who don't have the correct plugin for your sound file can go download it. For WAV files, I recommend QuickTime:
    <embed src="eureka.wav" controller="true" autoplay="true" autostart="True" type="audio/wav" pluginspage="http://www.apple.com/quicktime/download/" />
  11. When you're done, your HTML should look like this:
    <object>
    <param name="autostart" value="true">
    <param name="src" value="eureka.wav">
    <param name="autoplay" value="true">
    <param name="controller" value="true">
    <embed src="eureka.wav" controller="true" autoplay="true" autostart="True" type="audio/wav" />
    </object>

Tips:

  1. Don't validate your Web page with the embed tag. It won't validate because that tag is not part of the specification. But only Safari supports the object tag for sound.
  2. Check out the embed tag for additional attributes. Many of them you can use as parameters on your object as well.
  3. I recommend always setting the controller="true" attribute. That way, if someone doesn't want to hear sound on your Web page, they can turn it off.
  4. For the most accessible (and valid) sound, just link to your sound file.
    <a href="eureka.wav">Eureka sound file</a>
    That gives your customers the choice to listen or not.

What You Need

  • HTML Editor
  • Sound file

©2014 About.com. All rights reserved.