How to Add Sound in Dreamweaver

What to Know

  • Add a media plugin to Dreamweaver: Select Insert > Plugin.
  • Choose a sound file and select OK. The embedded sound file appears as a plugin icon in Design view.
  • Click the icon and set attributes and parameters as desired.

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.

This tutorial explains how to add sound with a controller and you can decide whether you want it to play automatically or not.

Insert Media Plugin

Screenshot of how to insert media plugin Dreamweaver

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.

Search for the Sound File

Screenshot of how to search for the sound file Dreamweaver

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

Save the Document

Save the Document
How to Add Sound in Dreamweaver Save the Document.

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.

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.

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.

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.

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. We generally leave all of these options blank or the default, because most of these can be defined with CSS.

Add Two Parameters

Add Two Parameters
How to Add Sound in Dreamweaver Add Two Parameters.

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 from 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).

View the Source

View the Source
How to Add Sound in Dreamweaver View the Source.

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.

Remember that background music that auto-plays without any way to turn it off is annoying to many people, so use that feature carefully.

Was this page helpful?