Tutorial details: How to build a reusable audio player in Flash MX that streams your sound, tracks download progress, and gives you a complete set of controls.
Written by : Tim Murray, tim.murray@gmg.com.au , www.gmg.com.au
Difficulty Level: Advanced
Requirements: Flash MX, an audio file
Topics Covered: Designing, coding, testing, shared resources, tweening, masking, importing audio, loading external movies
Assumed Knowledge: Basic ActionScript, interface familiarity

Flash MX Audio Player


Multimedia is great. Things move, whiz, bang, beep, explode? well you get the idea. Sounds are one of the coolest things that we can add to a site that elevates what we do above the world of text and animated GIFs.

We will be developing these Flash MX files: media-controller.fla (42kb), sound.fla (1787kb), test.fla (1805kb), and test-audio.fla (10kb). Apologies for the larger files, but they have a largish audio sample imbedded in them. When they are published as SWF files, they come in at 3kb, 24kb, 22kb, and 3kb, respectively.

But how do we implement all of those larger sounds? (The ones that you can't just tag on to a button press.) And how do you make them stream nicely? All too often an otherwise great online multimedia presentation grinds to a halt when audio files are played. It's also annoying that you can't usually scrub back or forward to an interesting bit (or skip over the boring parts).

This time we are going to develop an audio player in Flash MX, allowing your visitors to listen to all the samples you want to publish. Specifically, we will:

  1. Import audio resources and test the compression settings for the audio track.
  2. Generate some waveform images so that we can show people what the sounds look like.
  3. Provide a visual indication of the progress of the playback.
  4. Develop a set of controls for controlling playback.

Here's a big warning: there's a large chunk of tutorial to do bits 2 and 3 first before we get on to developing the controls. And this is a long tutorial. So, if you want to find out if this is worth reading, finish this introduction, check out the "how to use this" bit at the end, and see if you want to read the rest. (That's how I did all my study at University! Ha, hah!)

This tutorial comes in three parts:

  1. Load a sound into Flash and create some animation that plays with the sound. (The animation bit is optional.)
  2. Develop a set of controls to control playback of the sound and prepare the controls for use in any Flash file.
  3. Instructions on how to use the controls we have developed.

What we will not discuss is how to record and mix audio. You will need to supply your own samples to play with.

Before we go any further, I would like to point out that some of the screen shots are from the Western Australian Museum's "Western Australia: Land and People" exhibition. Included in that project were over eighty audio files: mostly commentary by the curators of the exhibition. Now we can all get that "behind the scenes" and "making of" info that is usually reserved for Discovery Channel or the extra audio tracks on DVDs! The Western Australian Museum's great content and our stylish Flash MX work produced an inspiring virtual exhibition.

I am assuming that you have had a glance through the Using Flash help file, and that you have completed the online Flash tutorials "Introduction to Flash MX Tutorial" and "Introduction to ActionScript Tutorial" that come with your copy of Flash MX. You should also be familiar with creating audio files. You may find our other tutorials useful. "Yet Another Flash MX Loader" discusses the creation of the GMG loader. And "Object VR In Flash MX" covers playing back 3D Object VR movies without using the QuickTime player.

What should the media player do?

Here's my list of features for our player:

  1. Work without worrying about codec availability.
    There are so many different programs that will decode audio and play it back (mp3, windows media, real media, quicktime, the list goes on). We aren't really interested in making visitors to our sites look for the one that we chose just to hear our audio. Flash MX solves this for us.
  2. Have some of the standard controls for an audio player.
    Nothing new here, but we have to do it.
  3. Allow the audio to be played before all of the content has been loaded.
    Nothing annoys me more than waiting for ages for the audio to arrive only to find that I wasn't interested in it in the first place. If the user can start to listen to it as soon as possible, we reduce the chance of driving them nuts.
  4. Allow the user to be able to scrub through the audio to any part.
    This lets the user find their favourite bit.
  5. Be quick to add to a file.
    Because I'm busy.
  6. Be simple to add to a file.
    Because I forget stuff.

You may want your player to do more: we certainly do. We now have a cool way of buffering content at certain points in a commentary, and it's seriously cool to include closed captions for hearing impaired visitors. You may have other ideas! Add them to the list.

How should the player be structured?

The structure for the player is very simple:

We will end up with a control that can play media using some basic interface elements (play/pause, rewind, and a progress bar slider to position the playhead) like this:

We will then include the media-controls movie in any file that we want to control our audio media in.

This will be published as our audio SWF file which may be loaded in to any container movie.

This is the essence of the container movie:

And it doesn't get much cleaner than that!

And repeating all that once again for good luck:

From left to right: we have a media-controller SWF file sharing out our controls to a second SWF file that has our audio media in it which is loaded and displayed by a third SWF file. Get it? Got it! Good.