Introduction to Shockwave (Designing Web Audio)

9.3. Introduction to Shockwave

Shockwave for Director is a software component that enables compatible browsers such as Netscape Navigator and Microsoft Internet Explorer 2.0 and higher to play multimedia Director movies over the Web. Shockwave is designed to work with standard HTTP servers and is ideal for streaming short- to medium-length audio files and advanced multimedia presentations and games.

Shockwave movies are built within Director using the Score window, where all media elements are placed as cast members on channels or tracks along a timeline, as shown in Figure 9-14. Director is a powerful tool for orchestrating multiple media types such as video, animation, and sound into complex interactive presentations.

Director uses Lingo script to create sophisticated interactive games and presentations. Originally it was designed to provide CD-ROM developers with an advanced cross-platform authoring solution for building multimedia presentations. Shockwave uses Director's Lingo scripting to directly interact with the operating system and multimedia functionality of a PC. Lingo enables the development of complex interactive soundtracks with audio fade-ins and fade-outs and panning effects tied to specific user actions. For example, with Lingo you can specify elegant cross-fades of separate audio clips when a user transitions from one scene or web page to another, instead of abruptly cutting off a sound.

Figure 9-14. The Score window used for orchestrating interactive events in Director

The drawback to broadcasting Shockwave-based presentations is that they tend to be too large and cumbersome for 28.8 Kbps modems. As Internet bandwidth increases with xDSL and cable, Shockwave will play a more prominent role in web multimedia.

The Enigma audio mixer

Three monks stand in a darkened room. A distant rhythm begins to pulse in a repeating pattern. The beat gets louder and louder until one of the monks raises his head and begins to sing a mystical-sounding Gregorian chant before being joined by the other two monks. Their voices, along with the pulsing background rhythm create a rich-sounding music mix that seems familiar. Then, with the click of a button, two of the monks lower their voices in silence. The third monk sings for several seconds before fading into silence like the others.

The chanting combined with the pulsing rhythm loop sounds like a tune the popular music group Enigma might have created. In fact, as Josh Feldman, Creative Director at Prophet Communications, a division of Frog Design (http://www.frogdesign.com), pointed out, that was the purpose of the Enigma III Shockwave audio mixer he and Thor Muller created for Virgin Records.

Prophet Communications worked with Virgin Records to develop an online interactive experience to promote Enigma's album. The Shockwave audio mixer let visitors to the Enigma web site (http://www.enigma.com) create their own music mix using an assembly of instruments and voices. The mixer contains four music loops represented by the image of three monks and a drum set, as shown in Figure 9-15. When a user clicks on one of the objects, an audio loop begins to play.

Figure 9-15. The Enigma Shockwave Mixer by Prophet Communications

What made this mixer so successful was Prophet Communications' elegant use of simple Lingo scripts to make the mixer more than just an assemblage of simultaneous loops. Lingo scripts were used judiciously to add fade-ins and fade-outs to the monk's voices. Instead of an abrupt sound interrupting the audio mix, each new sound transitioned smoothly into the full audio mix, the same as it would in a live performance or recording. The use of fade-ins and fade-outs for all the sounds in the mix made for a good soundtrack that enhanced the entertainment experience and ambiance of the web site. Here are Prophet's top five tips for using audio with Shockwave:

Leave four seconds of audio at the end of your Shockwave File. Shockwave will sometimes cut off the last three or four seconds of a streaming audio file, so it is always a good idea to put some blank space at the end of the sound file.

Never use streaming audio when you need immediate user feedback. Streaming audio is great for reducing file size and playing long audio files, but remember that the streaming audio file has to preload for three to five seconds to play well. If you assign a streaming audio sound to a button, a user with a 28.8 Kbps modem connection who clicks the button will not hear the sound until almost five seconds later.

Use Lingo variables to add richness to your interactive content. When a user clicks on a button or triggers an audio loop, a Lingo script can randomly select from many different .swa files residing on the server. Using variables is a clever way to add more content to your web site without requiring additional download time.

To configure random controls in Lingo, set the URL of member "shockaudio"="sounds/"&random(4)&"song.swa". Then set the preLoadTime of member "shockaudio" to 5 Play. This will randomly pick from four files called 1song.swa, 2song.swa, 3song.swa, and 4song.swa located in a folder within your master movie directory folder that contains all the media elements for your Shockwave presentation. The folder that contains your .swa audio files can be named any name you choose as long as you use the same name within your Lingo script. The folder then gets uploaded to a web server along with the master movie folder. Note that the above script was written for Director 5. If you're using Director 6 or higher you may have to change the way the streaming audio file is called up.

When embedding a movie that contains no images and only plays a sound file, make the dimension of the movie 1 pixel by 2 pixels instead of 1 x 1. In older browsers, the 1 x 1 pixel movies often fill the whole screen instead of staying at their dimension. This error has been fixed in newer browsers. But to be safe, embed them as 1 x 2 pixels.

Do not set levels to 100% when normalizing your audio files. Normalize to 85% or 95% to avoid distortion. 100% normalized audio files imported into Shockwave are likely to cause distortion when played back through cheap amps in PC sound cards. This also applies to audio files converted to RealAudio or QuickTime.

Make sure to visit Prophet's Spectacle.com web site (Figure 9-16) to see their showcase of innovative Shockwave and Flash entertainment content (http://www.prophetcomm.com).

Figure 9-16. The Prophet Communications home page at http://www.prophetcomm.com

9.3.1. Using Shockwave "internal" sounds: embedded cast members versus streamed SWA sounds

You can incorporate two basic forms of audio into Shockwave movies: embedded internal sounds (such as buttons, loops, and short transition sounds) and streamed audio with Director's Shockwave Audio (SWA). SWA is a variant of MPEG 3-based compression that adds support for storing cue point data in the audio file. Director allows you to attach cue points along an audio file that trigger events such as the start of a video clip or animation sequence. You can also use third-party solutions for playing audio through Shockwave, including RealAudio with the RealMedia Xtra, RMF files with the Beatnik Xtra, QuickTime audio, and even audio embedded into Flash movies.

Short button sound effects and loops are incorporated into Shockwave as embedded audio cast members, similar to event-driven sounds in Flash. Embedded audio clips play instantaneously when triggered by a user action. They also allow for greater Lingo scripting control than does streamed sound. Any short sound that is directly linked to the action of a user and requires instant playback should be placed in your Shockwave movie as an embedded audio file. Note, however, that despite Shockwave compression ratios of 44:1, embedded sounds still add tremendous size to your Director files, so use them sparingly.

With Director 6 and later, embedded audio can be delivered as a streaming cast member. This means you can orchestrate the download of different cast members so that content appears quickly while cast members from later scenes download in the background. Plan your streaming Shockwave movie carefully so any cast member that Lingo calls up will have previously downloaded into the cast member library. Director 7 also adds support for imported SWA cast members. In previous versions, SWA compression was applied to all audio cast members when the file was "burned" into a Shockwave (.dcr) file, and only one compression ratio could be applied to all the audio cast members. .dcr is the file type extension for movies exported from Director.

In Director 7, you can create SWA cast members at rates as low as 8 Kbps using audio-editing tools like Sound Forge, SoundEdit 16, or Peak, and then import the compressed cast members into Director. As of Director 7.0.2 and higher, you can import MP3 files in addition to SWA files.

Streaming sounds need at least a three-to-five-second buffer time before playback and are thus mainly used for longer-playing audio files. The preload buffer time required for smooth playback of streaming audio prevents this type of audio from being used for button sounds or loops.

9.3.2. Creating transparent Shockwave loops

One of the quickest ways to incorporate Shockwave audio into your web pages is to use a 1 x 2-pixel Shockwave movie to play audio loops or short greetings. To add a compelling soundtrack, use a transparent Shockwave movie with invisible frames to make one audio loop play across several web pages. By using transparent frames, you can use different ambient loops thematically throughout your web site.

Using different loops for various groups of web pages is a great technique for adding variety to a web site and a way to avoid the risk of annoying people with loops that stop playing when they click from one web page to another.

To get started, open the folder bgkdloop, found in the Shockwave or Director directories. It contains:

bgkdloop.dcr: An almost invisible Shockwave movie.
bgkdloop.dir: The source movie that produced bgkdloop.dcr (courtesy of Macromedia).
bgkdloop.htm: An HTML template page that displays no interface or user controls. The default page simply autostreams a sound when the page containing the movie is loaded into your browser.

Drag the file bgkdloop.htm onto your browser icon, preferably Netscape or Explorer 3.0 or higher. After the page loads, it goes black and your SWA file begins to stream automatically. When you play the file back, you may see a tiny dot in the top-left corner of your browser window; this is the 1 x 2-pixel frame of the Shockwave movie.

The web page with the Shockwave movie should contain the following object tag:

<OBJECT CLASSID="clsid:166B1BCA-3F9C-11CF-8075-444553540000" 
CODEBASE="http://active.macromedia.com/director/cabs/sw.cab#version=6,0,0,0" 
WIDTH="1" 
HEIGHT="2" 
NAME="Intro">
<PARAM NAME="SRC" VALUE="./allsongs.dcr"> 
<EMBED WIDTH="1" HEIGHT="2" SRC="allsongs.dcr" sw1="off"
swURL="intro.swa" swTEXT="" swPreLoadTime="5" sw2="1" sw3="0">
</OBJECT>

If the sound is playing properly, start adding pictures and text to your web page.

9.3.3. Shockwave streaming audio

There have been several major innovations in the latest versions of Shockwave. Shockwave movies exported from Director 5 and earlier versions had the capacity to stream only audio. Graphics and animations had to download in their entirety before they could play back. Thus, if you were streaming a music video, the graphic content would have to download first before the music video began to play. An average 250 KB Shockwave movie exported from Director 5 or lower produced extremely long wait times, causing many people to leave a page before the movie downloaded.

The release of Director 6 marked a major breakthrough. With Director 6 and later, individual cast members are broken into separate packets of data and streamed in the background while a .swa audio file plays. This means that a Shockwave streaming audio file can begin to play almost immediately with its accompanying visual content. This feature allows you to create longer, more complex movies and interactive entertainment.

Director 6 and 7 also have the capability to read markers on your audio file set in Sound Edit16. With this feature, it is possible to sync your streaming audio with the appearance of a designated graphic or animated cast member.

9.3.4. Exporting Shockwave audio files

Use Macromedia's SoundEdit 16 to create Shockwave audio (SWA) files using the SWA Export Xtra. You can also convert WAV audio files to SWA files in Director for Windows. When you create an audio file with the SWA Export Xtra, the new file is compressed using MPEG Layer 3 compression. To use the SWA Export Xtra, follow these steps:

In SoundEdit 16 version 2.0 or higher, open the audio file you want to export.

Choose Shockwave for Audio Settings in the Xtras dialog menu to configure the compression options. Figure 9-17 shows the Shockwave Xtras window with the bitrate set to 24 Kbps.

Figure 9-17. Shockwave Xtras window

Select the bitrate (Kbps) you want from the bitrate drop-down menu. Note that 24 Kbps tends to dropout over 28.8 modem connections. 16 Kbps is the preferred setting for low-bandwidth applications. Use Table 9-1 as a guide for setting the appropriate Kbps rate.

Table 9-1. Shockwave streaming audio bandwidth settings

Bitrate	Target audience connection	Sample rate
16 Kbps	28 Kbps modem connections	16 kHz
24 Kbps	56 Kbps modem connections	16 kHz
32 Kbps-56 Kbps	ISDN lines	22.050 kHz
64 Kbps-128 Kbps	T1 delivery	44.100 kHz

Check the Convert Stereo to Mono checkbox if you are converting a stereo file to mono. The SWA Export Xtra automatically converts a file to mono if you choose a bitrate of 32 Kbps or less.

Choose the appropriate Accuracy and Preprocessing settings. Accuracy refers to how much analysis is performed on the original file before creating the SWA output. High Accuracy offers better results but takes a lot more processing time than the default Normal setting. At the lowest bitrates, the difference is not significant. The Preprocessing checkbox gives the option of converting stereo files to mono as part of the SWA encoding process. At settings of 32 Kbps or lower, stereo files are automatically converted to mono (as shown in Figure 9-17). Choose OK to close the Shockwave for Audio Settings dialog box.
Choose File Export to open the Export dialog box.
Choose SWA File from the Export Type pop-up menu. Name the file, then choose Save. The file is exported using the settings you specified in the Shockwave for Audio Settings dialog box. All files exported as SWA files use the same default setting until the parameters are changed again.

9.3.5. Optimizing your Shockwave audio files

The following tips help ensure the highest quality Shockwave audio:

Work with 16-bit 22.050 or 44.100 kHz files (22.050 kHz is recommended).
When using pre-existing 8-bit or 11 kHz files, re-sample them to 16-bit 22.050 kHz and leave them at this resolution when exporting to SWA format.
To improve the quality of SWA files encoded at modem speeds (16 Kbps and 24 Kbps), filtering of frequencies in the range of 4 kHz to 8 kHz can reduce crunch and distortion on certain 22.050 kHz files.
Stereo source files should share common information on both channels. If the two channels carry unrelated information, there will be an uneven quality level between them.
As a last step before converting to an SWA file, normalize the audio file to 95%. Giving the file at least 5% extra headroom prevents distortion.

Auditioning your Shockwave audio files

Use the Raspberry Player located at http://www.designingwebaudio.com to audition your .swa files. Move your .swa file into the rasplayr folder on your local hard drive and rename it rasplayr.swa. You can also use an alias of your .swa file as long as the alias is named rasplayr.swa and is placed in the rasplayr folder. You can place only one file at a time named rasplayr.swa in the rasplayr folder. Drop rasplayr.htm onto the Netscape icon (or click Netscape's Reload button), and click Play. You should now hear your .swa file playing from your hard drive.

9.3.6. Quick and easy audio streaming with Shockwave

You can quickly get up and running with Shockwave by using the royalty-free Raspberry Media Player, shown in Figure 9-18, available at http://www.designingwebaudio.com. The Raspberry Media Player provides volume controls, stop, play, and pause buttons, a song selection menu, a status bar, and a blank area for placing your personal logo or custom graphics. With Director 5 or later, simply replace the Raspberry Media logo with your own logo, or replace all the graphics in the Cast Members window to create a new audio player interface, and export your own custom Shockwave player.

Figure 9-18. The Raspberry Media Shockwave Audio Player

To stream your Shockwave audio, customize the Raspberry Media Player and post it on your server with the following files placed in the same folder:

custom.dcr: The movie that contains the interface
custom.htm: The HTML document that calls rasplayr.dcr and tells the movie how to display itself and how to play the SWA file
custom.txt: The text file with the list of songs and their corresponding URLs
custom.swa: Your SWA files

When a user opens an HTML page with a Shockwave movie in their browser, it tells the browser to go to the URL specified by the EMBED tag in custom.htm and downloads the specified movie (custom.dcr). To use the Raspberry Player to stream your SWA files, you need to modify the following HTML EMBED attributes:

<EMBED WIDTH="368" HEIGHT="171" 
SRC="http://www.raspberrymedia.com/audio/rasplayr.dcr" 
swURL="http://www.raspberrymedia.com/audio/audio_samples/" 
swList="sound_sca.swa,sound_eff.swa,world_bea.swa,
blues.swa,trance.swa,acoustic.swa,rock.swa,reggae.swa" 
swTEXT="Sound Scape,Sound Effects,WorldBeat,Blues,Trance,Accoustic,
Rock,Reggae" swPreLoadTime=5 animate = "NO">

To modify the EMBED tags to play your audio files, open a copy of rasplayr.htm in a text editor and change the following EMBED tags:

SRC=URL: SRC specifies the URL of the Shockwave movie. Put the complete URL between the straight quotation marks.
swURL=URL: swURL specifies the URL of the SWA file. Put the appropriate URL between the quotation marks.
swList=list: swList points to the SWA files listed in the player menu. List the names of all of your SWA files between the quotation marks.
swTEXT=list: swTEXT appears in the selection window of the audio player. Name your SWA files and place them between the quotation marks.
swPreLoadTime=integer: This is where you set the amount of preload buffer time in seconds. More preload time produces a greater delay between clicking Play and hearing your SWA file. Generally a four- to five-second preload time helps ensure continuous playback without drop-outs.

As the SWA file streams from the server to your computer, it fills the buffer. As the SWA file plays, it empties the buffer. If these two rates are the same, playback will not be interrupted. If the Internet is slow, the buffer may not be filled as quickly as it is emptied. This can result in playback stopping for a moment as the buffer waits to be filled up again.

9.3. Introduction to Shockwave

Figure 9-14. The Score window used for orchestrating interactive events in Director

The Enigma audio mixer

Figure 9-15. The Enigma Shockwave Mixer by Prophet Communications

Figure 9-16. The Prophet Communications home page at http://www.prophetcomm.com