JavaScript Games #2 - Solitaire
Writing a midi hifi system in JavaScript
You are here: irt.org | Articles | JavaScript | Miscellaneous | Kick some booty with invisible Flash! [ previous next ]
Published on: Monday 14th May 2001 By: Ian Chia, Hayden Porter and Tony DeYoung
Email: tony@sonify.org
Website: http://www.sonify.org
Imagine if you could add interactive audio to a site, that more than 90% of average users were already equipped for.
Imagine that the site is still functional even if they didn't have Flash. No more "Enter here with Flash | Enter there without Flash". You won't always have to build it twice.
Experience what we're talking about by popping up our small, punchy demo. Roll over any of the graphics and links in the window to trigger interactive Flash audio, using the FlashSound API. If you like what you hear but can't see, you can find even more FlashSound tutorials on Sonify.org.
Our head-numbing buffet of 13 fistycuff sound bites total 86Kb in payload (that's a tiny 6Kb-ish per lovepat). Music with the afro haircut weighs in at another 45Kb. The page is visible straightaway, whilst the sound continues loading in. Once the audio swfs have loaded, they are automatically enabled.
It's a very small JavaScript library that enables interactive audio to be triggered from ordinary HTML pages, using the Macromedia Flash Player. Browsers without the Flash Player installed will display the same pages without problems, scaling down to an audioless experience. The benefit is that you can create a web site using easy to maintain HTML/JavaScript and gif/jpeg graphics and also have interactive sound for users with the Flash player. Using the FlashSound API, a developer can make a dynamic, interactive experience for users by adding sounds to graphics, buttons and links.
The first step in sonifying a website with flash is to create a "sound only" movie. Sound only movies consist of specially constructed movie clips that contain a sound and simple ActionScript.
For help on creating "sound only" movies, read the online article Flash Interactive Sound Design Part 1: The "Timeline" Approach.
After creating a "sound only" swf, you can begin to code a web page for sound. Coding with the FlashSound API typically has four steps:
1) Add the FlashSound API JavaScript library, flashsound.js, to the head section of your web page. This provides your web browser with the JavaScript content needed to use the FlashSound API. Download the flashsound.js (windows users right click, mac users option click, and save from the menu)
<html> <head> <title>Playing with the FlashSound API</title> <script language="JavaScript" src="pathto/flashsound.js"><script>
2) Create a FlashSound instance. An instance is a JavaScript container holding the swf that you eventually want to control with JavaScript. Your instance connects the swf to the FlashSound API so that you may use JavaScript to control playback of the swf.
<script language="JavaScript"> var mysound = new FlashSound( ); </script> </head>
3) Embed your swf content at the end of the html document just before the closing <body> tag. If the user's browser/player is compatible with the FlashSound API, JavaScript writes out the appropriate object/embed tags for you to create a 1 X 1 pixel hidden flash player in the document wherever you place your embedSWF( ) statement.
<body>
web page content.......
<script language="JavaScript">
mysound.embedSWF("your.swf");
</script>
</body>
</html>
Notice that we use the instance name in conjunction with the embedSWF( ) method. This tells JavaScript that the instance named "mysound" is a JavaScript container for "your.swf".
4) Explore using the FlashSound API to control playback of your "sound only" swf by adding playback methods to links, or by setting compatibility methods or embed properties in script tags.
<a href="javascript://"
onMouseover = "mysound.TGotoAndPlay('/sound1','start')"
onMouseout = "mysound.TGotoAndPlay('/sound1','stop')"
onClick = "return false">Hear a cool sound</a>
In this link we use a dummy url "javascript://" and the onClick = "return false" to prevent a web browser from acting on the url. This is a common technique for making html links that play sounds without loading a new webpage. The TGotoAndPlay( ) method requires flash ActionScript slash notation to find movie clips in a swf. The value start and stop tell the flash player which frame to play or stop a sound. The start frame contains your sound. When flash plays this frame you sound plays. The stop frame contains a stop sync sound command. When flash plays this frame your sound stops.
Copy and paste the complete code template.
Keep in mind that anytime you want to manipulate embedded swf content with javascript, you must always use the corresponding instance name with a FlashSound API method. For example, if you embed "coolsound.swf" using the instance name "mysound", then you must use the "mysound" instance name with all FlashSound API methods in order to control playback of "coolsound.swf".
To find out more, click here to go to Sonify.org's FlashSound API Central.
JavaScript Games #2 - Solitaire
Writing a midi hifi system in JavaScript