Home Articles FAQs XREF Games Software Instant Books BBS About FOLDOC RFCs Feedback Sitemap
irt.Org

Related items

JavaScripting Essentials

JavaScript Bookmarklets

Why bother with JavaScript?

JavaScript Games #2 - Solitaire

Writing a midi hifi system in JavaScript

JavaScript Beginners Start Here

Keeping Count of Downloads

JavaScript Games

Online JavaScript Resources

Kick some booty with invisible Flash!

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.

What is the FlashSound API?

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.

Creating a "Sound Only" SWF

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.

  1. Import a sound into Flash.
  2. Create a new movie clip on the main timeline and give it unique instance name. Use the movie clip instance name in JavaScript to start or stop this sound.
  3. Add a stop action on frame 1 to prevent autostart of the movie clip.
  4. Add a label called "stop" to frame 5 of the labels layer.
  5. Add your sound to frame 5 of the sounds layer and set sync = stop.
  6. Add a stop action to frame 6 in the actions layer.
  7. Add a label named "start" to frame 10.
  8. This step is optional but recommended. Add a stop sync sound command to frame 10 in the sound layer.
  9. Add your sound to frame 11. If you skipped step 7, place your sound in frame 10.
  10. Choose compression options for your sound and publish your "sound only" swf.

Diagram of complete sound only timeline

For help on creating "sound only" movies, read the online article Flash Interactive Sound Design Part 1: The "Timeline" Approach.

Using the FlashSound API within your web page

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. Source in flashsound.js JavaScript library
  2. Create a FlashSound instance.
  3. Embed your swf.
  4. Play/Stop sounds with JavaScript link events like onClick, onMouseover, and onMouseout.

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.

Related items

JavaScripting Essentials

JavaScript Bookmarklets

Why bother with JavaScript?

JavaScript Games #2 - Solitaire

Writing a midi hifi system in JavaScript

JavaScript Beginners Start Here

Keeping Count of Downloads

JavaScript Games

Online JavaScript Resources

©2018 Martin Webb