FlashSound API - Tutorials

News Documentation Tutorials Extensions Download Forum Contact

Controlling Sounds Across Frames

Even though frames are not as commonly used anymore for regular web development, they do have a certain appeal for web sonification. There are several situations where using frames and sound come in handy. The classic example being backing music in a hidden frame that plays uninterrupted by page changes in the main content frame as a user browses the site.

Using the FlashSound API you can further enhance this technique by providing a music on/off button, muting or reducing volume of backing music and other techniques of cross frame control. In order to accomplish these types of interaction you first need to understand how to make javascript calls across frames and how this applies to the FlashSound API.

FlashSound instances are variables that belong to the frame in which you create them. Frames are windows built in a hierarchy with each frame having its name defined in the frameset HTML document. You reference the instance as a property of its frame in the frameset hierarchy. The HTML document that defines the frameset occupies the main browser window which is the top of the hierarchy. The remaining frames are smaller windows within the browser and are underneath the top window in the hierarchy.

To execute a FSAPI command for an instance in another frame you start at the top window and work your way down through the hierarchy.

top . target_frame_name . flashsound_instance_name . method_name

The word "top" is the top of the hierarchy. All frames are below the main browser window in the hierarchy.top is a special javascript keyword reserved for the main browser window. "target_frame_name" is the name of the frame containing the flash sound instance you want to control. "flashsound_instance_name" is the instance name you created in the HTML document residing in this frame. "method_name" is the method you want to use to control this sound.

As an example, lets say you have a simple frame set consisting of a main content frame named "content" and a hidden music frame named "bgmusic". You have a FlashSound instance in the hidden frame named "mysound". You want to add a "sound off" button to a page that appears in the content frame. The FSAPI call inside the link for this "button" might be:

top.bgmusic.mysound.gotoAndPlay("/loop","stop");

The complete link code would be:

 <a href="javascript://" onClick="top.bgmusic.mysound.gotoAndPlay("/loop","stop"); return false;">Stop Music</a>

The HTML document in the hidden bgmusic frame is just a simple document containing the flashsound.js, an instance and the corresponding embedSWF statement.

<html> <head> <script src = "path to flashsound.js"></script> <script> mysound = new FlashSound( ); </script> </head>

<body> <script> mysound.embedSWF("path to a.swf"); </script> </body> </html>

View the example.