You have designed a player that is intended to play multiple MP3 (or other) sound files. The player has buttons to go to the next song, the previous song, pause a song, and continue playing a song. Now, you need code. This is the recipe for that code.
Getting ready
Have a Flash file that has previous, next, pause, and play buttons. Name them as follows so that you can directly copy the code in this recipe:
f previous: prev_btn
f next: next_btn
f play: play_btn
f pause: pause_btn
If you do not have a file prepped, use the player.fla file in the Chapter 5 folder. Delete the dynamic text field if you are not planning on using it. Coding for the dynamic text field is not covered in the body of this recipe but in the There's more section of Displaying song information on your MP3 player.
Also, have more than one sound/music file available to you and saved in the same folder/
location that you are saving the FLA and SWF for this recipe.
If you want to see the demo working, take a look at player_coded.fla in the Chapter 5 folder.
How to do it...
1. Make sure that the buttons in your design really are named as follows:
previous: prev_btn
next: next_btn
play: play_btn
pause: pause_btn
2. Make a new layer at the top of the timeline by clicking the new layer button at the bottom left of the timeline, and name it actions.
3. Go to Window | Actions, and put the following code into the text area (change the names of the MP3 files to match your file names):
var playList:Array = new Array("song.mp3", "song1.mp3", "song2.
mp3", "song3.mp3");
var nowPlaying:Boolean = false;
var currentSong:Number = 0;
channel.addEventListener(Event.SOUND_COMPLETE, songEnded);
}
if (currentSong < playList.length - 1) { currentSong++;
pauseSong();
loadSong(playList[currentSong]);
}
loadSong(playList[currentSong]);
}
nextSong();
4. Save and test (Ctrl/Cmd Return). Presto!
How it works...
The code is set up to work with buttons that exist in your Flash document with the names specified in the code. Those names can always be changed as you need. Just make sure the name of the button instance matches what it is called in the code.
First off, variables, classes, and an array are set up. The array is the list of the song file names that are to be played in the order they are to be played. These file names need to match the names of your song files. The other variables/classes are there so that the sound files will stream and the play and pause buttons will work appropriately—pausing the song halfway through and resuming at the same position in the song.
Then, we have a list of functions that work together to move to the next song (and pause/stop the current song so only one is heard at a time), move to the previous song, pause the song, and play the song from the paused position. There are also functions regarding loading a song from the array and what to do when a song has ended.
At the end, there is the list of click events that the Flash player is listening for that will initiate the different functions of the code.
As long as there are no typos and the sound files are in the same folder as the SWF, the player should work just fine.
There's more...
If you would also like to display information about the song, continue to the following section.
It adds a few lines to the code in the body of this recipe and is designed for use with a dynamic text field named songDetails and the id3 information that is embedded in many (possibly most) MP3 files. Id3 information is metadata and includes items such as track and artist names. So, rather than taking the time to type all of this out yourself and code a whole second array, just use the information that is already embedded in the MP3.
The settings you used for the Character and Paragraph settings in the Properties panel in Flash for the dynamic text box will apply to the id3 information that is displayed in the text box.
To see a demo, take a look at player_song_details.fla in the Chapter 5 folder.
Displaying song information on your MP3 player
1. Make sure that your Flash file has a dynamic text field named songDetails. 2. Add the following code to the code from the body of this recipe section:
function displayID3(event:Event):void {
songDetails.text = " '" + song.id3.songName + "' by " + song.
id3.artist;
}
3. To change the text that appears inside the dynamic text field with your id3 information, alter the text that is inside the double quotes that are shown above.
For instance, make the dynamic text field read the following:
'Song Title' performed by Artist Name.
4. To accomplish this, change "'by" in the code to "'performedby" and, add the following line into the loadSong function:
song.addEventListener(Event.ID3, displayID3);
The completed code for this entire recipe section should look like this (with your own sound file names in place of the examples given):
var playList:Array = new Array("song.mp3", "song1.mp3", "song2.mp3",
"song3.mp3");
channel = song.play(position);
channel.addEventListener(Event.SOUND_COMPLETE, songEnded);
}
if (currentSong < playList.length - 1) { currentSong++;
pauseSong();
loadSong(playList[currentSong]);
}
loadSong(playList[currentSong]);
}
songDetails.text = " '" + song.id3.songName + "' by " + song.id3.
artist;
}
function loadSong(thisSong:String):void {
song.load(new URLRequest(thisSong));
song.addEventListener(Event.ID3, displayID3);
playSong(0);
}
function songEnded(event:Event):void { pauseSong();
nextSong();
}
play_btn.addEventListener(MouseEvent.CLICK, playNow);
pause_btn.addEventListener(MouseEvent.CLICK, pauseHere);
next_btn.addEventListener(MouseEvent.CLICK, goForward);
prev_btn.addEventListener(MouseEvent.CLICK, goBack);
According to the ActionScript 3.0 Language and Components Reference, there are a number of properties in ActionScript for utilizing id3 information. They are album, artist, comment, genre, songName, track, and year. You only use songName and artist in this recipe.
See also
f Designing your own button
f Designing your own stylish MP3 player
f Coding a simple on/off music button