One of the most frequently asked questions in the Xara Xtreme/Web Designer forum is how can I add sound files to my website. After some exploration it becomes clear that there are dozens of ways to accomplish this. Most of which only work with certain files and with certain browsers. It’s very frustrating. To all except Steve Ledger who found a freeware program, Pazera WAV to Flash Converter that converts WAV sound files to Flash *.swf files. First well look at this very easy-to-use freeware program and then we’ll look at three ways to add sounds to a web page.

Click here to go to the Pazera WAV to Flash Converter download page.

Download the ZIP file and unzip the contents into a new folder. This program does not instal on your computer so keep the folder where you can easily find it for future use.

TIP: If you plan to use this utility often, place the folder where you can find it. Open the folder and right click on the file videotoflash.exe and select Pin to Start Menu . Then you can access it quickly from the Start menu.

Inside the folder, double click on the videotoflash.exe file to open the program.

Drag your WAV file or files and drop it or them into the program on the lined area. The file or files will show up as shown above.

Check the SWF (Flash movie file format) radio button. Depending upon how annoying you want the sound to be you can either leave the Volume: slider in the default setting, or move it to the left as I have done. Which is still plenty loud.

Finally press CONVERT. This is not a religious or political decision. It merely creates the SWF file. The converted file will be placed in the same folder and location from where the original WAV file is located.

You can do a lot more with this utility, this is all we need for now.

Embedding Sound Files in Your Web Page

Big thanks to Steve Ledger (sledger) who had nothing better to do than to hold my hand and walk me through this process about a dozen times until it finally sunk in. I am hopeful it will be easier for you.

Play Sound on Page Load

The first method for embedding sound is for adding a sound file that plays when the page loads. It is very simple. Just create a placeholder object and place it on the page on the bottom layer (Usually Layer 1 or Mouse Off layer). In the example above the gray circle is the placeholder. The size and shape is  not important as it will not be visible.

Select the placeholder object then open the Web Properties > Placeholder dialog. In the Replace with Flash text entry box, press Browse and browse to the location of your sound file and select it. Press Apply.

NOTE: When you use the Replace with Flash Placeholder option, a copy of the sound file is automatically included in your document and will appear in the index_HTML_Files folder on Export.

Now when your web page loads your sound file will play (provided your visitor has Flash enabled on her or his browser. And who doesn’t). It can be a small sound, a song, or even Lincoln’s Gettysburg Address.

Play Sound on Mouse Over

Another approach is to add sound to a mouse over effect.

In the Object Gallery (F10), select Layer 1 then press New. Name the new layer PLAY-ON-MOUSEOVER. (The name makes it easy to remember what this layer is for).

The MOUSE OFF button goes on Layer 1.

The MOUSE OVER button goes onto the PLAY-ON-MOUSEOVER layer and is centered over the MOUSE OFF butotn. This will create the same effect as a mouse roll-over effect with the exception that the button on the PLAY-ON-MOUSEOVER layer (a popup layer actually), can have a different link than the MOUSE OFF button.

The placeholder object that links to the sound file also goes on the PLAY-ON-MOUSEOVER layer.

In the Website Properties > Mouse-over tabbed section, link the MOUSE OFF button to: Show Popup Layer > PLAY-ON-MOUSEOVER.

The MOUSE OVER button does not need a link. When the visitor mouses over the button, the sound file will play.

Play Sound on Button Click

The third method plays the sound file when the button or object is clicked. For example, when the visitor clicks the button a rude noise could play. Nah, maybe not.

The example above has three buttons, the titles on the buttons are named to indicate their function. In reality your buttons would probably all have the same name.

The placeholder for the sound file in on a new layer; PLAY-ON-CLICK.

Create two new layers; MouseOver and MouseDown. Xtreme users, rename Layer 1 MouseOff. This is not really necessary but it help you keep tabs on which button goes on which layer. Place the buttons on the appropriate layers and center them.

The MOUSE OFF button links to the popup layer PLAY-ON-CLICK (in the Link tabbed section).

The MOUSE OVER and MOUSE DOWN buttons do not link to anything.

A Mini-Tutorial

There are three files we will be using for this mini-tutorial, two of which are shown above and are in the Workbook 78 ZIP folder. If you are doing the tutorial online, just drag and drop the two photos onto the desktop.

The third is a sound file catdraggedin.swf which is also in the zipped folder.

Create a new layer: Popup Layer.

The adorable photo of Sophie the kitten with the speech balloon that reads “Mouse Over This Photo” goes on Layer 1. The second photo in which a smug Voltaire says “Look What the Cat Dragged” in goes on Popup Layer.

A placeholder with a link to the SWF sound file catdraggedin.swf goes on Popup Layer as well.

Link the photo of Sophie on Layer 1 to Website Properties > Mouse-over > Show Popup Layer > Popup Layer.

Select Popup Layer. Add a small placeholder and in the Placeholder tabbed section, Replace with Flash > catdraggedin.swf (use Browse to locate the sound file).

Preview the site (File > Preview Website). If you did everything right the photo will change on the mouse over and after a brief pause you will hear Voltaire as he snidely observes, “Well, well, well. Look what the cat dragged in.” (Voltaire was obviously a dog person).

Thanks again to Steve Ledger for all his help with getting the right buttons on the right layers with the right links. And also for his tip on the WAV to Flash Converter.