1 — Introduction
Here’s a glimpse of what we will be creating in this tutorial:
Project files are available in two “flavors”: for Flash MX using ActionScript 1.0 syntax and version 1 components, and for Flash MX 2004 and Flash 8, using ActionScript 2.0 syntax and version 2 components.
Please note that this tutorial was written for Flash MX. Be advised that the text of this tutorial uses Flash MX. It is entirely possible to use these techniques with success using Flash MX 2004, but the ActionScript syntax presented here is definitely ActionScript 1.0. And there’s lots of it! Another dry tutorial with more text than pictures. I hope you will agree that it is worth it in the end.
This tutorial is organized into two parts. The original project files (Flash MX, ActionScript 1.0 syntax, version 1.0 components) are available for download for each part. Click here for demo 1; click here for demo2.
Flash MX 2004 changed nothing about working with the Sound Object, but made extensive changes to the Component architecture. Version 2 Components will not work with the ActionScript 1.0 code in this tutorial!
I have released an updated version of the demo 2 Flash movie that does conform to ActionScript 2.0 syntax, and does employ v.2 Components. I have no plans to re-write this tutorial but the demo file is extensively commented. If you need to work in the Flash MX 2004 environment, please read the tutorial first because much of it is still entirely applicable. Then download the demo 2b file here.
Macromedia’s Flash Player has been embraced by many musicians as an ideal vehicle to permit a large internet audience to experience their music. Cross platform concerns are one reason for this. Not every Windows user has Apple’s QuickTime software, and few Mac users can easily play Windows-centric audio files. One solution of course is to offer the audio in multiple formats, but using Flash eliminates the need for that. Another reason has to do with ownership. Some sites offer music files for download but many more want to share the music but not give it away. While no method can entirely eliminate piracy by sufficiently motivated individuals, it is much harder to save a music file to the client computer when it is played through the Flash Player. A third reason for the popularity of Flash jukeboxes is aesthetic rather than technical: it is far easier to customize the presentation and interface of your own jukebox if you build it in Flash than it is with any other alternative I know.
Macromedia’s Flash MX 2004 (at least the Pro version) provides Media Components to play audio and video multimedia assets which are quite slick, but there might be reasons why that pre–built option isn’t available to you.
If like me you are still using Flash MX to author content, or if you would like some hands–on experience with the Sound class or if you want more control over what your player looks like, this tutorial will give information on how to create a streaming MP3 player (sometimes referrd to as a “jukebox”) of your own.
First — a word of clarification. When I say “streaming”, I am not talking about the specialized server deployment mechanism that goes by that name. When I use the term “streaming” in this tutorial it is to refer to the Flash player’s ability to start playing a sound while the data is still transferring from the server to the client computer. MP3 music tracks can be quite large (3 – 5 megabytes is not uncommon) and it is asking a lot of your visitor to wait until the whole file is loaded before they can listen to any of it. Aside from a short buffer time which Flash imposes to get a “head start”, the music starts almost immediately. When loading an external MP3 file you can select streaming as an argument in the load function and that’s just what we’ll do for our player. Flash MX offers the benefits of nearly instant delivery without the complexity of specialized streaming servers.
- Enormous gratitude is extended to the artists who provided the music used in the demos for this tutorial. Credit is provided at the bottom of this page which you may jump to directly by clicking this link.
- I got the initial bug to make an MP3 player from seeing a really cool one by Eric Dolecki
- I learned most of the nuances of the Sound class from Colin Moock’s book “ActionScript for Flash MX – the Definitive Guide”
- I learned how to populate a ListBox component with a DataProvider from Sam Wan and Branden Hall’s book “Object–Oriented Programing with ActionScript.”
- The pause–resume push button code and associated Sound class prototypes are from Joey Lott’s book “ActionScript Cookbook”
- Tilo Kussatz gave me the inspiration to make the next and previous buttons
- Phil Kerman demonstrated the time formatting functions in “ActionScripting with Flash MX”
MX was the first version of Flash to really make it simple to load certain external assets including jpg images and MP3 sound files. Keeping the bulky media assets external to the movie that plays them is critical in making small, responsive, fast loading modules. A file size of 20–40 kilobytes is not unreasonable for the player .swf itself (assuming you keep it fairly austere and don’t dress it up too much with bitmapped graphics.). Modules this small give your site a welcome sense of speed even to users on slower connections. A music player that not only loads immediately but also starts playing quickly is even better. And one that does both those things AND offers visual feedback as to the status of what is happening is best of all. That’s what we’ll tackle in this tutorial.
I had two design goals when I developed this player for my own site. First it had to be light weight. We’ve already covered that. Second, it had to be flexible. It had to be easy to add and subtract tracks without ever having to modify the Flash movie itself. This will be done with an external xml file which contains all the titles and paths to the actual song files. Once the player looks the way you want it to, you will never have to edit anything but the xml file in order to change the player’s play list. How great is that?
Two features I have seen on other players which I considered and then decided not to include are a pan control and an equalizer graphic. I decided (for my own purposes anyway) that a pan control was superfluous. Although the code isn’t hard to write, the speakers on my computer aren’t far enough apart to make that worth the effort! The equalizer graphic is a different matter. If it’s done as a simple animation it servers no purpose other than decoration and I can dispense with that. It is possible to make a display that does present actual frequency information about the music, but not on the fly. The music must be processed by software that writes huge arrays which then animate the bars in a graphic. This is very impressive but runs counter to the design goal of being able to add or subtract music tracks easily. If you are intrigued by this, I suggest you investigate MarmaladeMedia’s amazing product flashamp.
Note that this tutorial only covers constructing a player for music. It doesn’t deal with creating the music files themselves. You’re on your own in that department.
I’m getting ahead of myself a bit here, but this seems the appropriate place since the previous note discussed creating the MP3 files themselves. Alert reader Danny Gardner of Bold Soul wrote to me asking why his MP3 files played slower in my Flash MP3 player than they did in other players. I was stumped but he answered his own question, and the solution has to do with sample rates of the MP3 files themselves. To quote Danny, “It may interest you to know that I was using MP3s that were encoded in iTunes at a 48kHz sample rate. Flash MX resamples all audio down to bit rates in increments of 11 (11, 22, 44, etc.). That resampling caused the percieved slow-down in pitch.”
So now you know. Thank you Danny for adding another useful drop to the knowledge pool.
We’ll start with the basics and add complexity. Following this introductory page, the first part of this tutorial covers:
- assembling the pieces
- the xml file
- the functions
- building a data driven menu
- parsing the xml file
- creating a data provider for the listBox component
- the general logic
- building a volume control
The second part of the tutorial covers four UI elements that enhance the user experience:
- a pause/resume button
- a next track button
- a previous track button
- a single track/continuous play toggle
The tutorial concludes with a final page suggesting how to implement some frequently requested modifications.
So let’s dive into Page Two: setting up the pieces.
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 Clarkemail@example.com|
|A Cell (of the City)||biovoid|
(Way Out West Hawaii Music)