How to Add Sound in Dreamweaver

01
of 07

Insert Media Plugin

Insert Media Plugin
How to Add Sound in Dreamweaver Insert Media Plugin. Screen shot by J Kyrnin

Use Dreamweaver to Add Background Music to Your Pages

Adding sound to Web pages is somewhat confusing. Most Web editors don't have a simple button to click to add sound, but it is possible to add background music to your Dreamweaver Web page without a lot of trouble - and no HTML code to learn.

Remember that background music that auto-plays without any way to turn it off can be annoying to many people, so use that feature carefully. This tutorial explains how to add sound with a controller and you can decide whether you want it to play automatically or not.

Dreamweaver doesn't have a specific insert option for a sound file, so to insert one in Design view you need to insert a generic plugin and then tell Dreamweaver it's a sound file. In the Insert menu, go to the media folder and choose "Plugin".

02
of 07

Search for the Sound File

Search for the Sound File
How to Add Sound in Dreamweaver Search for the Sound File. Screen shot by J Kyrnin

Dreamweaver will open a "Select File" dialog box. Surf to the file you want to embed on your page. I prefer to have my URLs relative to the current document, but you can also write them relative to the site root (starting with the initial slash).

03
of 07

Save the Document

Save the Document
How to Add Sound in Dreamweaver Save the Document. Screen shot by J Kyrnin

If the Web page is new and has not been saved, Dreamweaver will prompt you to save it so that the relative path can be calculated. Until the file is saved, Dreamweaver leaves the sound file with a file:// URL path.

Also, if the sound file is not in the same directory as your Dreamweaver Web site, Dreamweaver will prompt you to copy it there. This is a good idea, so that Web site files aren't scattered all over your hard drive.

04
of 07

The Plugin Icon Appears on the Page

The Plugin Icon Appears on the Page
How to Add Sound in Dreamweaver The Plugin Icon Appears on the Page. Screen shot by J Kyrnin

Dreamweaver shows the embedded sound file as a plugin icon in Design view. This is what customers who don't have the appropriate plugin will see.

05
of 07

Select the Icon and Adjust the Attributes

Select the Icon and Adjust the Attributes
How to Add Sound in Dreamweaver Select the Icon and Adjust the Attributes. Screen shot by J Kyrnin

When you select the plugin icon, the Properties window will change to plugin properties. You can adjust the size (width and height) that will display on the page, alignment, CSS class, vertical and horizontal space around the object (v space and h space) and the border. As well as the Plugin URL. I generally leave all of these options blank or the default, because most of these can be defined with CSS.

06
of 07

Add Two Parameters

Add Two Parameters
How to Add Sound in Dreamweaver Add Two Parameters. Screen shot by J Kyrnin

There are many parameters you can add to the embed tag (the various attributes), but there are two you should always add to sound files:

  • autoplay
    This tells the Web browser if the sound should start immediately after it loads (typically right after the page loads) or wait to be requested to play. Most people are annoyed by sites that have sound set to autoplay=true.
  • controller
    This provides your customer with a way to control the sound file - turning it off or replaying it fromt the beginning and so on. If you have autoplay set to false, then you need a controller so that the sound can start (or a JavaScript function to turn it on).

07
of 07

View the Source

View the Source
How to Add Sound in Dreamweaver View the Source. Screen shot by J Kyrnin

If you're curious how Dreamweaver installs your sound file, view the source in code view. There you'll see the embed tag with your parameters set as attributes. Remember that the embed tag is not a valid HTML or XHTML tag, so your page won't validate if you use it. But since most browsers don't support the object tag, this is better than nothing.