How to produce a .SWF with streaming MP3s

by Joe Gillespie — Mar 1, 2001

To start with, your audio should be digitised in .AIF or .WAV format. These are the two most common formats, but Flash also accepts SoundDesigner II files if you have ProTools or some other high-end audio system that supports that file format. It will also accept QuickTime Audio, Sun AU and MP3, but it is best to start with the highest possible quality original.

If you are starting the sound in the first frame, try to allow half a second or so of silence at the beginning of your audio file. Sometimes the very beginnings of sound files can be clipped off before playing starts and a little silent 'leader' takes care of this. Starting the sound playing one or two frames in can also prevent clipping the first note.

Import the audio file into Flash where it will appear as a library item. Make a new layer with a keyframe and drag the audio file onto the stage. If you stretch-out the keyframe, you will see the audio waveform in the layer timeline. You must drag the keyframe out to the full length of the waveform (or past it) or the sound will be truncated when it is played. For streaming audio, the play-head must be able to pass over the full length of the sound track uninterrupted.

Now, go to the Sound panel and from the Sync pop-up, choose 'Stream'. If you wish you can use the 'Effect' pop-up to add a fade-in or fade-out to the sound track if you think it is appropriate. The 'Edit' button brings-up a nice 'envelope' control panel that lets you adjust the volume level across the whole soundtrack and preview the results.

When you publish the .SWF file, you can choose how much compression to apply. It is a good idea to save as mono instead of stereo as this halves the bandwidth requirement for a start.

Keep to a minimum bit-rate of 16 or 20 Kbps for music, 8 Kbps is only really suitable for voice and low-fi sound effects. The three compression qualities you can use are Fast, Medium and Best but it can be difficult to tell the difference between these settings on the average computer speaker system. In fact, even with a good sound system connected to my computer, I have had to keep checking my settings because I couldn't believe that I wasn't playing the original 42 meg AIFF file instead of the 492 K .SWF file - that is nearly 100 times smaller! Sure, you can hear the difference if you flick between channels in a direct A-B comparison, but most people don't have that opportunity.

Now, you have to make a decision. Do you want the sound to play as soon as someone hits the page or do you want them to press a button to hear it? Having the sound start playing when you hit the page is easy, you just have to put the .SWF file on your page somewhere. One small point here. Some browsers support transparent backgrounds for Flash movies and some don't, so the movie will possibly be visible. The smallest you can make a Flash movie is 18 x 18 pixels so you can't play the 1 x 1 pixel trick that you can with GIFs. If you can set the Flash movie background to the same background color as your Web page, then it will be virtually invisible, otherwise you will just have to try to make it as unobtrusive as you can manage.

You can also have Flash movies that are just buttons, like the ones opposite. When the page loads, only the small button files are loaded into the browser. When a button is clicked, it loads another invisible Flash file containing the streaming audio, and a single frame script, into another level. If you have multiple sound choices on one page, then buttons are ideal. All you have to do is put a 'play' button in the first frame of the movie with a stop() event in the timeline. Set the script of the button to 'goto and play' frame 2 when the button is clicked.

Frame 2 contains a 'stop' button and a script which loads the sound file into level 1. The 'stop' button stops all sound and sends the play head back to the first frame. The last frame of the sound file movie also has a 'goto and stop' at frame 1 of level 0 which resets the whole movie ready to be played again if required.

Even if you are now using Flash 5, export your audio files in Flash 4 format, more people will hear them that way.

Button Timeline

Click on the colored areas of the button movie timeline to see the scripts attached to the buttons and frames.

Audio Timeline

This is the movie with the streaming audio track (starting on frame 2). Click on the green frame action to see what it does.

Of course, there are all kinds of fun things you can do, like making sounds happen on rollovers instead of clicks but just bear in mind that some people find any kind of sound emanating from their computer to be a nuisance, especially in an office environment, so be careful. Without a stop button of some kind, the only way to stop an audio file from playing on a Web page is to leave the page! When there are multiple audio buttons like I have here, it is important to add the stopAllSounds() command to each button or the tracks could all play in parallel and make a helluva din!

Flash is the no-hassle answer to all your Web audio needs. Whether it's for sound effects, voice narration or music, the ubiquity of the Flash plug-in means that it will work for most people without further ado and not having clumsy control panels pop-up all over the place is a huge bonus too.

In the third and final installment of this series, next month, I will look at how you can use Flash ActionScript to do some of the things which would usually require CGI scripts on a server. Digg Technorati Blinklist Furl reddit Design Float