SoundManager 2 - More Examples

Some additional examples of how to use Sound Manager 2 on a webpage (see SoundManager 2 for basic examples of using the software on a webpage and links to download the software.

For these examples, it is presumed that you've already placed the software on your webserver in a directory named soundmanager2, which is beneath the directory on which your webpage resides.

To start, 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>

For this example, I want to have left and right arrows at the top and the bottom of the page that will take one to the previous page or the next page respectively. I want to have visitors hear the sounds of pages turning when they click on those arrows.

I'm going to create sound ids that SoundManager will use by modifying the soundManager.onload section within the <head> and </head> tags. Instead of what is shown above, I'll use the following:

soundManager.onload = function() {
  // soundManager.createSound() etc. may now be called
  soundManager.createSound({id:'leftarrow',
                            url:'audio/page_turn_01.mp3',
                            onfinish:function()
                              {window.location.href='index.php'}});
  soundManager.createSound({id:'rightarrow',
                            url:'audio/page_turn_03.mp3',
                            onfinish:function()
                              {window.location.href='test.html'}});
};

The above code creates two sound ids: leftarrow and rightarrow. The leftarrow soundid is associated with page_turn_01.mp3 and the rightarrow sound id is associated with page_turn_03.mp3. The mp3 files reside within an audio directory beneath the directory in which the webpage resides. The onfinish:function() code is JavaScript code to open either index.php or test.html in the current browser window, depending on whether a left or right arrow has been clicked.

Then near the top of the body section of the webpage, and also at the bottom before the <body> tag, I can place the following code:

<!-- ARROWS BEGIN -->
<p>
<table width="100%" border="0" summary="Prev and Next Arrows">
<tr>
<td align="left">
<img src="arrow-left.png" alt="Previous" border="0"width="38" height="31"
 onclick="soundManager.play('leftarrow',{volume:50}) ">
</td>
<td align="right">
<img src="arrow-right.png" alt="Next" border="0"width="38" height="31" 
     align="right"
 onclick="soundManager.play('rightarrow',{volume:50})">
</td>
</tr>
</table>
</p>
<!-- ARROWS END -->

Then when you click on a left arrow, you will hear page_turn_01.mp3 play. When you click on a right arrow, you will hear page_turn_03.mp3 play.

The volume value can be set to a maximum vaule of 100. You can also leave out the volume specification and just use something like onclick="soundManager.play('rightarrow')"

References:

SoundManager 2
MoonPoint Support