Are You Sure I Don't Have To Buy Flash?Yes. Schiller has already created a finished Flash-based player which you can configure to play the sounds you want. There is no need to own your own copy of Flash to take advantage of this.
Which browsers does SoundManager support?
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
How To Use SoundManager In Your PageOK, I've convinced you - so how do you use SoundManager?
Just follow these steps to get started:
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!
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" />
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:
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:
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:
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:
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!
ExampleHere'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:
<!-- Must have at least one div,
BEFORE calling soundManagerInit! -->
This page plays the sound with the ID "on" when the mouse moves over the image.
If It Doesn't WorkDid you:
1. Download the SoundManager zip file?
2. Move soundcontroller.swf and soundmanager.js to the folder containing the page you plan to add sound to?
3. Create a sound-config.xml file, name that file correctly, and move it to the folder containing the page you plan to add sound to?
4. Remember to load soundmanager.js in the head element of your page?
5. Call soundManager.play with a sound ID that you defined in your sound-config.xml file?
6. Upload your sounds to the audio subfolder correctly?
7. Convert those sounds to MP3 format correctly, if they were not already MP3 files?
8. Remember to call soundManagerInit just before the </body> tag of your page?
9. Make sure your page has at least one div element?
Follow these troubleshooting steps and you should be in good shape.
If Your Sounds Play Too FastDo your MP3 files sound like chipmunks playing with helium balloons? Some MP3 files are not compatible with Flash Player. Fortunately this is easy to fix. See the article why do my MP3 files sound bad in Flash Player? for the solution.
Advanced TricksThat's it for the basics! Of course, SoundManager can do quite a bit more. You can cause a song to loop by specifying a number of repetitions in the play call:
soundManager.play('on', 100); // Plays 100 times
And you can stop the playback of a sound at any time with the stop call:
Finally, you can adjust the volume with the setVolume call:
soundManager.setVolume('on', 50); // 50% of maximum
For more information about SoundManager, check out the SoundManager home page.
Got a LiveJournal account? Keep up with the latest articles in this FAQ by adding our syndicated feed to your friends list!