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 www.schillmania.com 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 - Schillmania.com. 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>
<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
}
</script>
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
soundManager.setPolling(true)
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="soundManager.play('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"
onmouseout="soundManager.play('Cymbals6','soundmanager2/demo/mpc/audio/CRASH_6.mp3')">
The syntax to be used in those cases is to include the following within the
image tag.
mouseevent="soundManager.play('MySoundId','path_to_sound_file/mp3file.mp3')"
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="soundManager.play('Cymbals1')"
onmouseout="soundManager.play('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
soundManager.play('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="javascript:soundManager.play('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 soundManager.play
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');}});soundManager.play('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');}});soundManager.play('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
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"
border="0"
onclick="soundManager.createSound({
id:'mySound1',
url:'soundmanager2/demo/mpc/audio/CHINA_1.mp3',
onfinish:function() {window.open('test.html')}
});
soundManager.play('mySound1',{volume:50})
">
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"
border="0"
onclick="soundManager.createSound({
id:'mySound2',
url:'soundmanager2/demo/mpc/audio/RIDE_1.mp3',
onfinish:function() {
window.location.href('test.html')}
});
soundManager.play('mySound2',{volume:50})
">
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"
border="0"
onclick="soundManager.createSound({
id:'mySound3',
url:'soundmanager2/demo/mpc/audio/RIDE_1.mp3',
onfinish:function() {window.location.href='test.html'}
});
soundManager.play('mySound3',{volume:50})
">
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
References: