CMXtraneous

Right on the edge of useful

How to Play Sound Files Sequentially

Posted Friday, April 13, 2007 7:44:25 AM by David Stiller

David Stiller

Many people use Flash to play background music on their site.  It’s a good use for Flash, especially if the audio is loaded from external MP3s, which keeps the SWF file size low, and if you give your visitors a way to toggle off the sound.  But one song may not be enough.  You may want to play a list of files one after the other.  If so, the next question is, “How easy is that?”  The answer is, “Very.”  Let’s take a look.

An answer, short and sweet

The “trick” here — and it’s really no trick at all — is to use an Array instance to store your list of audio files, a variable to keep track of which song is current, and the Sound.onSoundComplete event to trigger each new sound.  Type the following ActionScript into a keyframe:

var listOfFiles:Array = new Array("frog.mp3", "loon.mp3", "horse.mp3");
var currentFile:Number = 0;

var audio:Sound = new Sound();
audio.loadSound(listOfFiles[currentFile], true);

audio.onSoundComplete = function():Void {
  currentFile++;
  if (currentFile < listOfFiles.length) {
    audio.loadSound(listOfFiles[currentFile], true);
  }
}

How it works

The first variable, listOfFiles, points to a new Array instance that holds three elements, which are the names of three MP3 files.  We could have populated this array in a series of lines, like this …

var listOfFiles:Array = new Array();
listOfFiles.push("frog.mp3");
listOfFiles.push("loon.mp3");
listOfFiles.push("horse.mp3");

… but in short sequences, the single-line approach takes less effort to type.

The second variable, currentFile, is set to zero and represents the first sound to play (arrays start counting at zero, rather than one).  Finally, a third variable, audio, is declared and set to an instance of the Sound class.

To get things started, the Sound.loadSound() method is immediately invoked on the audio instance, and two parameters are provided.  The first parameter is the expression listOfFiles[currentFile], which in this case resolves to the string "frog.mp3" (remember currentFile is zero, which retrieves the first element of the listOfFiles array).  The second parameter tells Flash to play the file by progressive download, which means the audio will start before the MP3 has fully loaded.

On its own, the code so far would play the first song and then stop when the audio was complete.  The last little bit achieves the original goal, which is to play files sequentially.  When the first song (or narration, or whatever you’re presenting) is complete, the Sound.complete event is dispatched.  Here, we’re writing a function to be performed in response to that event.  The first thing that happens is that the currentFile variable is incremented by one, thanks to the ++ operator.  So now its value is one.  Next, an if statement checks of currentFile’s value is less than the total number of elements inside the listOfFiles array, thanks to the Array.length property for that instance.  There are three elements in the array, and one is less than three, so the final line is executed.

Notice that the last line of code duplicates exactly what we’ve already discussed.  The difference is that, this time, the value if currentFile is different.  When this second song ends, the complete event will fire again, which means this function will again be triggered.  currentFile will increment to two, two is less than three, and the third MP3 will play (element 2 is in the third slot, because arrays start at zero).  When the third songs ends, currentFile increments to four, and because four is no longer less than three, the cycle ends.

Variation

Want to repeat the list of files when all three (or four, or however many) songs have completed?  Update that last block of code like this:

audio.onSoundComplete = function():Void {
  currentFile++;
  if (currentFile == listOfFiles.length) {
    currentFile = 0;
  }
  audio.loadSound(listOfFiles[currentFile], true);
}

Category tags: Flash