Creating an XML Music Player in Flash Using AS3

By Blue_Chi | Flash CS3 | ActionScript 3.0 | Intermediate | Page 1, 2, 3, 4, 5, 6

This tutorial will teach you how to create an XML music player using AS3. The songs to played in our player will be specified in an XML file so that the player loads each song as required. The songs in the player can be updated by simply updating the XML playlist file so that you do not have to go back to the FLA.

This is an intermediate level ActionScript 3.0 tutorial that will make use of the XML Class and the Sound Class as we as general AS3 tools such as event handling, conditionals and functions. Make sure that you are familiar with all of these topics before attempting this tutorial to fully understand all the techniques used.

Our XML Music Player project can be broken down into the following sections:

  1. Preparing External Assets (XML file and .mp3 files).
  2. Preparing the FLA and the Graphical Interface of the Player.
  3. Loading and Processing the XML file.
  4. Creating the playSong() function.
  5. Programming the Buttons.
  6. Finalizing the player and Fixing Bugs.

Preparing External Assets

This tutorial will require you to have some .mp3 files at hand. You can download some legally free .mp3 files from this website. You can also use any .mp3 file you have on your machine, but make sure that it is in .mp3 format and no other as Flash can only play this format. Get at least 3 .mp3 files to complete this tutorial properly.

Once you have your .mp3 files you start off by creating a folder for this project somewhere on your computer. Inside this folder you will have to create a new folder to host our .mp3 files. Name this folder audio.

AS3 Music Player - Audio Folder Created

Inside the audio folder we will place our three .mp3 files. To make this easier and to minimize the risk of typos, I suggest that you rename your mp3 files to track1, track2, and track3.

AS3 Music Player - Audio Files Inserted

Our .mp3 files are now ready, we will create our XML file now. The XML file will play the role of a playlist as it will have the details of the tracks that we want to play. An XML file is essentially a text file with user-defined structured coding. You can use any simple text editor to create your XML file, open the notepad and save a blank file as playlist.xml in your project folder along with your audio folder.

AS3 Music Player - XML File Created

Preparing the XML Playlist file

We are going to edit our XML playlist file with the information that we need to run our player. Our XML file will have the details of our songs, specifically:

These will translate into the XML code shown below:

<?xml version="1.0" encoding="utf-8"?>
<SONG URL="audio/track1.mp3" TITLE="First Track" ARTIST="John Doe" />
<SONG URL="audio/track2.mp3" TITLE="Second Track" ARTIST="Random Singer"/>
<SONG URL="audio/track3.mp3" TITLE="Third Track" ARTIST="Super Generic Singer" />
Please refer to our AS3 XML tutorial to learn more about using XML in ActionScript 3.0.

The values of all these parameters will be retrieved in Flash using the .attribute property of a XML element. You might have noticed that we did not specify the number of songs in our playlist, this is because the ActionScript XML Class can detect the number of child nodes within an element, and that in our case is the number of <song /> elements within the <playlist> element, i.e. the number of songs in our playlist.

You can copy the code above and use it as it is or you can alternatively specify the right parameters for your song files if you know them. Once you do that we should have all our external assets ready. In the next section we will prepare our FLA and create the graphical interface for our music player.

Summary of this Page

  1. Placed .mp3 files inside an audio folder.
  2. Created the XML playlist file and put all necessary song details in it.

In the next section we will prepare the FLA file and create the graphical interface for our music player.

Next Page