gmg tutorials - reusable streaming flash audio control

Flash MX Audio Player

An in depth look at building a reusable streaming audio preloader for Flash MX that includes media controls.

01 Introduction
02 What should the media player do? / How should the player be structured? / Useful reading
03 Part 1: Start with some easy audio
04 Putting the sound on the stage / Adding a sample graphic
05 Animating the waveform
06 Part 2: Planning our controls / Getting the sound to play, pause and rewind
07 Adding a load indicator
08 Adding a thumb dragger to the slider
09 Dragger states
10 Limiting the dragger / Setting the sound's playhead position
11 Making the media controls ready for sharing
12 Part 3: Using the media player
13 Anything else? / Conclusion / About the authors / Copyright

Previous << Introduction

What should the media player do?

Here's my list of features for our player:

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.
Have some of the standard controls for an audio player.
Nothing new here, but we have to do it.
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.
Allow the user to be able to scrub through the audio to any part.
This lets the user find their favourite bit.
Be quick to add to a file.
Because I'm busy.
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.

Useful reading

A little later on in this tutorial we will be importing sound resources, so now would probably be a good time to have a quick look at how to import audio into Flash MX. You will find it in "Using Flash > Adding Sound > Importing sounds" in the contents of your online help. In fact, the whole "Adding Sound" section is probably worth at least a quick glance!

Buttons will play a big part in our media controller. See "Using Flash > Using Symbols, Instances, and Library Assets > Creating buttons" in your help file for more info. Ah, what the heck... spoil yourself: read all of the "Using Symbols, Instances, and Library Assets" section.

Since we will be sharing our controller between all of our audio files, a glance at "shared libraries" in your online Flash MX documentation would be beneficial. You will find it in the "Using Flash > Using Symbols, Instances, and Library Assets > Using shared library assets" in the contents of your online help.

We will also be animating a box-shaped mask. This part of the tutorial is optional, but if you're interested you may want to check out "Using Flash > Creating Animation > Tweening shapes" and "Using Flash > Creating Animation > Using mask layers".

Next >> Part 1: Start with some easy audio