FPM MP3 Player
Table of Contents
Details
- Date Completed:13 July 2006
- Days/hours spent:2 days, 4 hours
- About the company:Fitness Professionals
- Software used:Flash MX
- Tag:SWF (Flash 6 Actionscript 1)
Currently working on…
Lots of freelance and e-commerce projects.
Latest Work
Search Portfolio
I designed, created and developed this mp3 player for the FitPro Music website as FitPro's Middleweight Web Designer.
1. Introduction
Progress with the development wasn't going anywhere. So I decided to take on the task of creating the interface as well as the development.
2. Design
My idea of how audio was going to be previewed was slightly different to how it is now. I had envisioned having a little mini-player next to each track title and the user would be able to play each track that way. However, the design was impractical for several reasons - for exmaple; what happens if the user tries to play several tracks at once, etc.
Initial design for the flash player
Since we used Thickbox to display the mp3 player, the design had to be changed around to allow the track title, artist, bpm and duration to be shown. Using my existing designs I magnified the interface to 400x200. I made sure that all the text fields were dynamic so that they could changed via actionscript.
Implementing design into Flash
3. Actionscript
Music
Importing and streaming a mp3 file was pretty simple. Creating a variable via sound class, making sure that isStreaming parameter is set to TRUE inside the start() function.
Progress bar
The mp3 player needed a progress bar, to show the user know how long the audio preview has played and how much of the preview is left. A few problems came into mind: the fact that the shape of the progress bar (above screen shot) wasn't rectangular and my ActionScript wasn't up to scratch to create the curved shape via mathematical equation. I decided to mask over the shape and move the mask instead.
First I need to calculate the total time of the track:
// dividing by 1000 because measured in milliseconds
track_totalTime = track_song.duration / 1000;
Then the increment duration, how much the song has will play per percent:
increment_duration = 100 / Math.floor (track_totalTime);
I also needed to know how much of the song was loaded but in percentage, for streaming purposes:
percent_loaded = Math.floor (track_song.getBytesLoaded () / track_song.getBytesTotal () * 100);
The current position of the song, needed for pausing and playing the song:
current_position = track_song.position / 1000;
With all these variables set up now, I can calculate the percentage of the song played, for moving the mask:
percent_of_song_played = Math.floor (current_position * increment_duration);
But we also need to figure out how much to move the mask each percent:
// width of the progress bar
var blue_bar_width = this.progressBar.blue_bar._width;
// width of the play,pause,rewind buttons
var circle_width = this.circle_btn._width;
var increment_x = (blue_bar_width - circle_width) / 100;
Now we can apply these variables to the make the mask move and show the progression of the song:
// start position of the mask
x_pos = 0;
if (percent_of_song_played < 100) {
this.progressBar.mask_mv._x = (x_pos) + (percent_of_song_played * increment_x);
// for showing how much of the song has been downloaded
this.progressBar.preloader_mask._x = (x_pos) + (percent_loaded * increment_x);
}
FlashVars
We needed to find a way of playing all the mp3's and displaying the song title, artist's name and other important details. I implemented the FlashVars method, which allowed data to be passed into Flash via a query string (much like PHP or any other Hypertext Preprocessor). This allowed us to pass the file path of the mp3, the track title, artist and the bpm of the track. It provided to be very helpful, as we only needed one Flash file to play hundreds of mp3s.
i.e.
<param name="FlashVars" value="filepath=eri-valeire.mp3&track_title=Eri Valeire&artist=Bad Loop&" />
4. Problems
Click to active control
As with many web projects, Internet Explorer for the PC created the most problems. Our media assistant pointed out that on IE a user would have to click on the mp3 player to active its controls. I found out that Microsoft applied this to all ActiveX plugins on IE 6.0 Windows XP SP2. And it happened to be that Flash was an ActiveX plugin. Luckily SWFObject fixed this problem and the IE user would no longer have to click on the flash interface.
Music continues to play after player closed
Another problem that raised with IE 6 (what a surprise!) was when a user plays the mp3 player (loaded in Thickbox), pauses it and plays it again then closes the Thickbox layer; the music would continue to play…! Madness I thought! But again I wasn't phased by this unusual problem and was set to resolve it.
I had a search through the internet about JavaScript to Flash communication. I came across SWLiveConnect feature, which allows JavaScript to stop, play, zoom, change quality and many other functions. The <object> tag would need an ID and there also needed to be a Name (same as the ID attribute) and SWliveconnect parameters within the <object>.
"Great" I thought and applied the changes and placed a StopFlashMovie() function within's Thickbox's TB_remove(). However, I discovered that the sound continued to play. After more research and experimentation, I found that using this.onEnterFrame inside Flash won't allow the StopFlashMovie()function to work. So I thought of placing a variable isMusicPlaying inside Flash. Then once the user closes the Thickbox layer, to set that variable to FALSE i.e. flashMovie.SetVariable('/:isMusicPlaying', false);. And get the Flash player to check the status of the isMusicPlaying. Hence, if it was FALSE the Flash player would stop. This worked perfectly!
Interface disappearing
In Firefox when the mp3 player was loaded into Thickbox the interface would load but then disappear after mp3 player started playing the music. After much experimentation I found out that the problem was to do with the interface not being refreshed. I put updateAfterEvent () function but that didn't work. So I came up with the idea of creating an empty movie clip and filling it with white, then setting the alpha channel to 100 then to back to 0 inside the this.onEnterFrame function.