1 — Introduction
This tutorial outlines how to use Macromedia’s Flash MX together with the open source server scripting language PHP to create a streaming MP3 player for use in web pages.
a working example
“What?” you say. “It looks just like where we wound up at the end of part one!”
Well maybe it does. On the surface anyway…
The tutorial you are currently reading extends an earlier project which you can (and need to) read here. By “extends” I mean that this update to that tutorial will deal only superficially with the Flash movie. You need the background of the previous tutorial for that. Go read it now!
If there is very little new material related to Flash in this tutorial, what can you expect? The exciting development is that the static XML file, which the Flash movie in the previous tutorial consumed, has been replaced by a PHP script. This is significant for several reasons.
First and most delightful: the MP3 player no longer needs any maintenance! The data source has become completely dynamic, and is drawn from the files themselves and their ID3 tags. You now have the ability to add or remove MP3 files from your server’s directory at will; because the XML document is generated from scratch every time it is requested, it always accurately reflects the current collection of MP3 files, and of course so does the Flash movie.
Those of you who have moved up to Flash MX 2004 may say “But Flash itself can read version 2 ID3 tags now!” Evidently that is true, but Flash by itself can’t offer the complete solution for what we need. Flash is capable of extracting the ID3 tags from a file which has been loaded into the Player, but Flash is not capable of reading the contents of a directory on a web server which is a requirement in order to generate the playlist menu. PHP can do this easily.
Flash is capable of reading ID3 tags, but because our Player is set to stream, and because version 1 ID3 tags are unfortunately at the end of the file, any information carried in version 1 tags is not available to Flash until the track has completely downloaded. Whether or not your files have any older version 1 tags or not, PHP can pull out version 1 and version 2 tag data almost instantly without having to laod the track.
Finally, by using a bitrate value PHP can calculate a pretty accurate value for playtime, again almost instantly and again without having to load the track in the Player. Playtime will be useful later on for an animated position marker.
I hope you will agree with me that partnering Flash with PHP is a worthwhile use of time and brain cells. Those who have extended their hand-coded XML files to include custom data (lyrics for instance) will probably want to stay with what they have, but for all others this update will prove to be very handy indeed.
The two significant modifications to the Player itself are:
- The three button Components have been replaced with MovieClips. This eliminates some Component issues that existed between Flash MX and MX 2004, and permits far greater potential for customizing the appearance of the Player.
- A new text field has been added to display “Title/Artist/Album” data. This had been requested frequently in reader email. The data is easy to get now, so why not display it?
I have been able to make this work because of a wonderful code library written by Daniel Martinez–Morales called “MP3 ID3v2 Tag”. Mr. Martinez–Morales’ PHP code is copyrighted and has been released under the GNU LGPL. Please make sure you understand the license and please be respectful of Mr. Martinez–Morales’ copyright notice if you use this for a web site.
In addition, I am indebted to the efforts of a talented and enthusiastic scripter and web designer, Tilo Kussatz, who found the ID3v2 class library, wrote most of the songList.php script and provided technical advice and reassurance through the process of developing this update.
I have been accused of making the links to my demo files too subtle, so I’ll put the link here early on. Download the demo files here. You should still read the tutorial anyway!
This tutorial is built using Flash MX (not MX 2004). The basic ActionScript is compatible with the newer version of Flash, although it does not utilize ActionScript 2.0 OOP syntax.
Please note that if you author in MX 2004, the syntax I use to address methods in version 1 components will not work with version 2 components! You should stick with using the version 1 components embedded in the demo file unless you feel like updating the ActionScript to work with version 2 components. You should also verify that Flash MX 2004 is set up to produce .swf files for the Flash 6 Player. Select File>Publish Settings. Verify that the drop down menus are set to
Version: Flash Player 6, and
ActionScript Version: 1.0
Copies of Version 1 components updated to work with Flash MX 2004 are available here from Macromedia. As I do not yet work in MX 2004, I don’t know if the old method calls still work or not. Just be aware of this potential issue if you try making this from scratch instead of working with the components embedded in the demo file. You might wish to read Phillip Kerman’s excellent, comprehensive DevNet tutorial on Migrating to Version 2 Components.
if you are new to PHP
If you are new to PHP (a recursive acronym which stands for “PHP Hypertext Preprocessor”), don’t worry. (You won’t even have to do any PHP coding if you don’t want to - the demo files have all you will need for the basics.) But you do have to understand a little bit about how PHP works. As a server-side scripting language, PHP scripts need to be processed by a PHP module in a web server. If that sounds like intimidating mumbo-jumbo, what it means in practical terms is that you won't be able to test the movie on your local computer. You will have to upload the files to a web server and test .
The previous sentence isn’t entirely true if you have a local computer which has web server software running on it. Even if that is the case, you still need to access a PHP script through an http protocol. For example, you might open a web browser and type in the address bar:
But don’t worry too much if even this makes no sense. Just don’t panic when things don’t work during offline testing the way they did in part one!
This issue came up after publishing part one of this project and I want to address it right from the start. Although presenting music through a Flash player makes it a little bit harder for average visitors to your site to copy files to their own computer, as far as I know there is no foolproof method to prevent a sufficiently motivated visitor from obtaining copies of your digital music files. If a file can be heard on a computer, there will always be some way to capture and save it.
For that reason, if you are a content creator or if you are representing someone who is, and if you are concerned about intelletual property theft, my earnest recommendation is that you not put anything on the internet you are not willing to give away.
I wish this were not the case, but I might as well be upfront about it. Everyone wants to use the internet to promote themselves or their clients, but not everyone wants to give their goods away! Perhaps the best policy in that case is to only present portions of tracks online.
Page two discusses the minor modifications we need to make to the Flash movie. You may obtain the project files here. Contained in the .zip archive are the following files:
- readme.txt (general notes)
- GNL license
Please note that there are no MP3 files in the project files folder. To keep file size small and because I have no MP3 files to give away, you are expected to provide your own music! (Gratitude is extended to freeplaymusic.com for the tracks used in the demonstration movies in this tutorial.)
Let’s get proceed to get coding.
- page two makes very minor modifications to the demo file we ended with in part one
- page three introduces the PHP code
- page four adds some cosmetic embellishments to the Flash movie
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.)
|Seen My Baby Dancin'||The Loungs||www.theloungs.co.uk|
|Yesterdays Boy||the Mimetiks||www.themimetiks.com|
|Orchestra 3||Todd Clarkfirstname.lastname@example.org|
|A Cell (of the City)||biovoid|
(Way Out West Hawaii Music)