SoundManager 2

If you wish to associate sounds with events on a webpage, such as moving the mouse over an image on the page or clicking on the image, you can use a JavaScript solution written by Scott Schiller. His website doesn't seem to be available any longer, but you can find archived copies of it within the Internet Archive Wayback Machine, a project that attempts to preserve a historical view of the web by archiving websites. He created software called SoundManager, which is a JavaScript Sound API made available under a BSD license, which means it is free for anyone to use.

Information on the first version of SoundManager can be found at WWW FAQs: How do I play sound from JavaScript?. Mr. Schiller created a later version, Sound Manager 2, which I've been using. Information on SoundManager 2 can be found within the Internet Archive at SoundManager 2: Javascript Sound for the Web. That information can also be found on this site at SoundManager 2: Javascript Sound for the Web. Additional information on SoundManager 2 can be found within the Internet Archive at SoundManager 2: Javascript Sound For the Web - The last time the site was archived by the Internet Archive was February 14, 2008

Version 2.0b.20070415 of the software can be downloaded from the following locations as a 1.4 MB zip file:

Internet Archive
MoonPoint Support

To use SoundManager 2 on a webpage, extract the contents of the zip file to a directory on the webserver, then include the following code between the <head> and </head> tags on the webpage where you want to use SoundManager 2:

<script type="text/javascript" src="soundmanager2/script/soundmanager2.js">
<script type="text/javascript">

// soundManager.debugMode = false; // disable debug output

soundManager.url = 'soundmanager2/soundmanager2.swf'; // path to movie

soundManager.onload = function() {
  // soundManager.createSound() etc. may now be called


The locations for the soundmanager2.js and soundmanager2.swf files should be adjusted according to where you have them placed on your webserver. E.g., in this example, immediately below the directory in which this webpage is located, I have a soundmanager2 directory. The soundmanager2.swf file resides within that directory, while the soundmanager2.js and soundmanager2-jsmin.js scripts are within a subdirectory below the soundmanager2 directory called script, e.g. soundmanager2/script/soundmanager2.js.

Note: if you have // soundManager.debugMode = false; // disable debug output in the head section of the webpage, then debug mode is turned on for SoundManager 2. That can be helpful in debugging problems with the use of SoundManager on the page, but if SoundManager's debug mode is set to "true", which is the default setting, then you will see output like the following at the bottom of your webpage:

soundManager.onload() complete
soundManager.initComplete(): calling soundManager.onload()
-- SoundManager 2 loaded (OK) --
(Flash): Enabling polling
Flash ExternalInterface call (JS -> Flash) succeeded.
(Flash): _externalInterfaceTest()
soundManager._initMovie(): Got OBJECT element (created via JS)
soundManager._createMovie(): trying to load soundmanager2/soundmanager2.swf
-- SoundManager 2 Version 2.0b.20070415 --

You won't want debug mode set to true when you make your pages available to the public, so turn it off by removing the // at the beginning of the soundManager.debugMode = false; line. That will "uncomment" the line and so set soundManager.debugMode to "false".

So the line should be as follows for normal display of the page:

soundManager.debugMode = false; // disable debug output

Now you are ready to add sound to your webpage with SoundManager.

Let's suppose you have an image, such as the one of the cymbals below, and that you want a sound to play whenever a visitor to the webpage moves his mouse pointer over the image. SoundManager uses MP3 files and comes with some sample sounds. In this case, I want to play CRASH_1.mp3, which is beneath the directory in which the webpage resides at soundmanager2/demo/mpc/audio/CRASH_1.mp3. So I add the following code to the webpage:

<img src="331-Cymbals-L.jpg" alt="Cymbals" width="300" height="292" onmouseover="'Cymbals1','soundmanager2/demo/mpc/audio/CRASH_1.mp3')">


You can also have a sound play when you move the mouse away from the image usng onMouseOut.

<img src="331-Cymbals-L.jpg" alt="Cymbals" width="300" height="292"


The syntax to be used in those cases is to include the following within the image tag.


MySoundId is whatever arbitrary name you wish to use as an id for the sound file. By using that id, e.g. Cymbals6, you can reference the id alone later without specifying the path to the sound file. E.g. to modify the above code to have a sound play when the mouse pointer is moved over the image and then another one play when the mouse pointer is moved away, I can now use the following code:


<img src="331-Cymbals-L.jpg" alt="Cymbals" width="300" height="292" onmouseover="'Cymbals1')" onmouseout="'Cymbals6')">

Note: that will only work, if you've already moved the mouse over the two images above the one immediately above. I.e., both the one that plays the sound on moving the mouse pointer over it and the one that plays when you move the mouse pointer away from it, since you need to use the form'MySoundId','path_to_sound_file/mp3file.mp3') first to create the sound ids. You can see that this is so by refreshing the page in your browser and then first moving the mouse pointer over the image immediately above this text. You won't hear any sounds unless you move the pointer over the first two images and then return to this one.

Now, let's suppose that you want to instead play a sound file only when the image is clicked on. You could use the following code:

<a href="'Cymbals5','soundmanager2/demo/mpc/audio/CRASH_5.mp3');"> <img src="331-Cymbals-L.jpg" alt="Cymbals" width="300" height="292" border="0">


In this case you can specify a protocol of javascript inside the <a href=""> tag and then use to call the javascript function to play the sound file whenever the image is clicked on, instead of going to another webpage with the link.


Or perhaps you want to not only play a sound, but take some other action, such as displaying an alert, when someone clicks on the image. You could use the following code:

<img src="331-Cymbals-L.jpg" alt="Cymbalsl" width="300" height="292" border="0"
onclick="soundManager.createSound({id:'mySound',url:'soundmanager2/demo/mpc/audio/CHINA_1.mp3',onfinish:function(){alert(this.sID+' finished playing');}});'mySound',{volume:50})">


In this case I'm using a different format and additional options. I use soundManager.createSound to create the sound with an id of mysound. I specify the location of the MP3 file with url and then the action to take after the sound plays with onfinish:function() follwed by {alert(this.sID+' finished playing');}});'mySound',{volume:50}). The alert will cause a small alert window to pop up after the sound is played. Inside that window will be the name of the sound id, which is specified by this.SID, then the text ' finished playing' is added after the sound id. I'm also specifying that the volume should be 50% of the volume that would otherwise be used.

After the sound plays when you click on the image, you should see a small window similar to the following appear

mySound finished playing alert

Now suppose you want to play the sound and then open another webpage in a new window. You could use the following code:

<img src="331-Cymbals-L.jpg" alt="Cymbals" width="300" height="292" 
                        onfinish:function() {'test.html')} 


Note: you may not see the popup window appear if you have a popup blocker preventing additional windows from being opened in your browser.

To open the webpage within the current window instead, the code below worked for Internet Explorer 7, but didn't work for Firefox 3.0.1:

<img src="331-Cymbals-L.jpg" alt="Cymbals" width="300" height="292" 
                        onfinish:function() {


I was able to fix it by using window.location.href='test.html' instead of window.location.href('test.html'). The code that worked in both browsers is shown below:

<img src="331-Cymbals-L.jpg" alt="Cymbals" width="300" height="292" 
                        onfinish:function() {window.location.href='test.html'} 


Note: if a sound doesn't play, turn on debug mode by using // soundManager.debugMode = false; // disable debug output as outlined at the beginning of this tutorial. If, in debug mode, you see a message at the bottom of the page such as the following, then you likely haven't entered the correct location for the MP3 file.

SMSound._onload(): "Cymbals1" failed to load (or loaded from cache - weird bug) - [test URL]

The [test URL] will be the link to the location you provided for the file. If you can't play the MP3 file by clicking on that link, then you've likely provided the wrong location for the file.

Also, if the sound doesn't play, but you can play sound files on the system on which you are using the browser, i.e. you've verified the sound software and speakers are working on the system, then make sure you've got the single quotes, double quotes, etc. put in the proper places in the code and matched up appropriately.

For futher examples of SoundManager 2 use, see SoundManager 2 - More Examples


  1. SoundManager 2: Javascript Sound for the Web
    MoonPoint Support
  2. SoundManager: Javascript to Flash Sound API
  3. WWW FAQs: How do I play sound from JavaScript?
  4. SoundManager: Javascript to Flash Sound API
    Crazy Wizard Guy
  5. JavaScript Primers #15
    By Joe Burns
    JavaScript Primers
  6. JavaScript Redirection - A Web Development Tutorial and Information Site
  7. User-Friendly JavaScript Redirection
    Date: April 23, 2006