Flash MX MP3 player, Pt.1

source: http://www.thegoldenmean.com

1 — Introduction

What?

Here’s a glimpse of what we will be creating in this tutorial:

(Credit for the music used in this demo player is provided here.)

Why:

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.

Terminology:

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.

Gratitude:

• 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”

Goals:

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.

Outline:

We’ll start with the basics and add complexity. Following this introductory page, the first part of this tutorial covers:

2. assembling the pieces
3. the xml file
4. the functions
5. building a data driven menu
   • parsing the xml file
   • creating a data provider for the listBox component
6. the general logic
7. building a volume control

The second part of the tutorial covers four UI elements that enhance the user experience:

8. a pause/resume button
9. a next track button
10. a previous track button
11. a single track/continuous play toggle

The tutorial concludes with a final page suggesting how to implement some frequently requested modifications.

12. Simple customizations

So let’s dive into Page Two: setting up the pieces.

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.)

Title:	Artist:	Website:
Waltz	Alex Weinstein	www.alexweinstein.com
Mosqueegee Submerge Submissive	Bert Jerred	www.bertjerred.com
Love Dance The Mystery	Frank Peeters	www.frankpeeters.com
Seen My Baby Dancin'	The Loungs	www.theloungs.co.uk
Yesterdays Boy	the Mimetiks	www.themimetiks.com
Orchestra 3	Todd Clark	tmc2i@mtsu.edu
Gems	nessness	www.utmosis.net
A Cell (of the City)	biovoid
Lonely Puppy Love	Rob Onekea (Way Out West Hawaii Music)	www.wayoutwestenterprises.com

 

--top--

• contents:
  • adjust your browser
  • why
  • who
  • art
  • technique
  • words
  • rss reader
  • links
  • music
  • contact
  • flash doodles

• Photoshop:
  • pen tool
  • curves
  • displace filter
  • crop tool
  • resolution
  • dodge and burn
  • replace background
  • backdoors
  • depth masks
• Flash:
  • Flash & JavaScript
  • external text
  • Flash/php mail form
  • mp3 player
  • mp3 player v2
  • mp3 player v3
  • RSS Reader
  • code - where? (old)