In my tests, SoundManager works great with:
1. Internet Explorer for Windows (all tested versions, including 7)
2. Firefox for Windows, Linux, and MacOS X
3. Safari 2.0 or better, for current versions of MacOS X
4. Opera for Windows
SoundManager does not work with:
1. Opera for MacOS X
2. Safari 1.x for older versions of MacOS X
In most cases, the occasional browser that can't use SoundManager would not work with the old-fashioned method of controlling sound from JavaScript either. So there's really no reason to "fall back" to the embed element.
How To Use SoundManager In Your Page
Just follow these steps to get started:
1. Visit the SoundManager page.
2. Click on the download link to obtain the SoundManager zip file.
3. Extract the zip file to your website, or to a test website on your own computer. Do this in a new sub-folder called SoundManager. Do not crush your own index.html file!
4. The SoundManager zip file includes a page called basic-example.html. Visit that page with your browser and experiment with the buttons. If you have correctly extracted the zip file you should be able to control the sound by clicking on ordinary HTML form buttons.
5. Move the file soundcontroller.swf to the folder where you would like to have your own sound-enabled web page. Also move the file soundmanager.js from the script sub-folder into the folder containing the page you want to add JavaScript sounds to.
6. Decide what sounds you will use. Convert those sounds to MP3 format, if you haven't already. Upload them to a new subfolder called audio within the folder where your page will be.
7. With a text editor, such as Windows Notepad, create a simple XML file defining your sounds. For each sound, you'll specify the URL where it can be loaded and an id by which you'll refer to it later.
In this example, I am assuming that you have two sounds, in files called on.mp3 and off.mp3, and that you put your sounds in a subfolder called audio as I described in step 6:
<?xml version="1.0" encoding="UTF-8"?>
<items baseHref="audio/" defaultVol="100">
<sound id="on" href="on.mp3" />
<sound id="off" href="off.mp3" />
</items>
8. Save this XML file under the name sound-config.xml. Make sure the file is saved under that name, and not as sound-config.txt, sound-config.xml.txt or any other name. Rename the file from Windows Explorer if you have to, this is important.
9. Move sound-config.xml to the website folder where your web page will be. This is the same folder where you have already placed soundcontroller.swf.
10. Edit your HTML page. In the head section of your page, add these two lines to import the sound manager:
<s-cript type="text/j-avascript" src="soundmanager.js">
</script>
11. In any JavaScript code you wish, such as the onClick handler of a button or the onMouseOver handler of an image, play a sound by calling the play function with one of the sound IDs you set up in sound-config.xml.
Here's a simple example. Assuming you have an image called myimage.gif and that you defined a sound with the ID on in sound-config.xml, this code will play the on sound when you move the mouse over the image:
<img src="myimage.gif"
on-MouseOver="soundManager.play('on')" />
12. Required: make sure your page has at least one div element. I know it's strange, but it's necessary. Schiller's code inserts certain elements after the first div in the page and will break if you don't have any. Most interesting web pages have lots of div elements, but if you're making a simple example page, just put an empty div at the end:
<div>
</div>
And that will take care of the problem just fine.
13. Important! Just before the close of your body element, you must call soundManagerInit, like this:
<s-cript>
soundManagerInit();
</script>
Note: this call must come after at least one div element in the page. So put it right before </body> and you'll be safe.
If you don't do this, your sounds won't work. So don't forget!
Example
Here's an example of a very simple web page that uses SoundManager. Keep in mind that all of the supporting files must be in the right places for this to work:
<html>
<head>
<s-cript type="text/j-avascript" src="soundmanager.js">
</script>
</head>
<body>
<img src="myimage.png"
on-MouseOver="soundManager.play('on')"/>
<!-- Must have at least one div,
BEFORE calling soundManagerInit! -->
<div>
</div>
<s-cript>
soundManagerInit();
</script>
</body>
</html>
This page plays the sound with the ID "on" when the mouse moves over the image.
