Flash MX 2004 MP3 Player Pg.1

The content of this tutorial is out of date. Flash (and the underlying ActionScript language) has moved on. I have, regrettably, not moved on with it.

Flash is currently a great deal more capable, but also much more complex, than it was when I wrote this tutorial.

I have kept this content online because I still get mail from readers who have found it useful. While I am very pleased by this, I want to make it clear that this material can no longer be considered “best practice,” and I can no longer offer support.

If you can use it, you are welcome to it. The code has been tested and refined thanks to input of many generous readers. I offer it as is.

1 — Introduction

This tutorial is the third in a series and assumes you have read and understood the previous two. If you arrived at this page directly via a search or a link, please read part one and part two first. In particular, the second tutorial covers the dynamic PHP-generated playlist in considerably more depth that this tutorial will.

The Power of Popular Demand

Thank popular demand for this variation of the Player. It seems many readers are interested in placing a very streamlined Player on their web pages, a player which eliminates the visible list of tracks in the interests of conserving space. Heeding the public’s cry, here is an example of what this tutorial will result in:

This paragraph should be replaced by a Flash movie if you have at least version 7 of the Flash Player and your browser has Javascript enabled.

The basic Player. Alternative versions of the Player are shown periodically throughout the following pages. Be advised that the version you see above is the only version that is included with the project files. The alternate versions shown on subsequent pages throughout this tutorial are presented as examples only - incentive for you to be creative on your own!

(As in the previous tutorials, gratitude is extended to freeplaymusic.com for the tracks used in the demonstration movies in this tutorial.)

Project files are available for download here. Version five (there are three tutorials but five demos) utilizes an updated PHP engine (similar to the one presented in Tutorial Two but now featuring sorting based on a variety of criteria) to automate the extraction of ID3 tag information to dynamically generate an XML document.

New features in this version include:

The Player has finally been updated to Flash MX 2004 ActionScript 2.0 syntax! (No, I don’t have any plans to release Flash MX ActionScript 1.0 version.) Please read that again. This tutorial requires Flash MX 2004, and more specifically the 7.2 (“Ellipses”) update.

Exceptionally small space requirements (basically the only limit is how small you can make the buttons!)

Exceptionally flexible and easy to “skin”

No components!

Playlist is generated dynamically by PHP scripts which extract the information contained in an MP3 file’s id3 tags

An info text field which scrolls if it is longer than the viewing area

“Continuous” is the default play mode, with a Shuffle (Random Play) option (okay - I admit this is sorta meaningless if you can’t see a list, but it is cool...)

Streaming progress and playhead position is now indicated graphically instead of numerically; additionally, the position bar is draggable for an interactive, non-linear fast forward/rewind feature.

The Player as presented in this tutorial must be manually started by the viewer to avoid possible workplace embarassment. However, the “courtesy pause” is easy to defeat if you really want the music to start immediately.

That’s an awful lot of new features and as you might guess this version of the Player is significantly more complex to code than were the previous versions. I’ll try to be as clear as I can be concerning the construction.

In previous versions of the Player, the play list served two important purposes:

It displayed a list of all available tracks using a ListBox Component which permitted the visitor to listen to your music in a non-linear, selective manner, and

the ListBox Component itself was used to establish and maintain the current track which was critical for the next and previous buttons and the continuous play option to work.

In order to streamline the Player’s space requirements, we eliminate the list in this version. However, if we eliminate the ListBox Component we lose both of the previously mentioned advantages. If we as designers decide we can live without letting the visitor control which specific tracks they listen to, we still need a mechanism to keep track of where we are in the list of available tracks. That role will now be handled by an Array.

But let’s not get ahead of ourselves. The structure of the present tutorial looks like this:

That’s a lot of ground to cover. Start by downloading the project files which include the .fla for the Player that appears at the top of this page, the necessary PHP scripts and the XPath classes. As in previous tutorials, no MP3 files are supplied. Providing the music is up to you.

From this point on I am going to assume that you have downloaded the project files. I will do my best to explain the code and the underlying concepts, but I am not going to pretend that you are creating the Player from scratch.

I have to admit I wrestled with the decision as to which was best: making you read the entire tutorial before you got the project files, or giving out the files first and hoping you will read the explanation. In some previous tutorials I put the link to the files at the end and discovered that many readers were so overwhelmed by that point they missed the link entirely. On the other hand, I have gotten lots of questions concerning material that has been covered in the tutorial. I have put the link to the project files up front this time because this project is so complex, but please don’t write to me if you haven’t read the content. In fact, please don’t write to me at all! Instead, post your questions at the forum maintained by the GurusNetwork. I will likely be the one that answers, but at least that gives an opportunity for others who might share the same question to learn.

Music Credits:

In the summer of 2006 I learned that due to a change in licensing terms I could no longer use the MP3 clips which had played in the on line demos that accompany this and the other tutorials in this series.

(This does not suggest any criticism of freeplaymusic.com who handled the situation with courtesy and professionalism. The are an excellent resource for high quality music clips. It is however a very good reminder to respect the property of others and keep good records regarding what you have permission to use and under what terms!)

I put out an appeal to several readers with whom I had corresponded and was delighted and humbled by the generosity of their responses. Following is a list of artists to whom I am indebted and grateful. (In most cases the tracks presented in the demos represent excerpts from longer works.)