Monday, 9 November 2009

Basic Flash Based MP3 Player

Here is the solution. It turns out you can use NetConnect and NetStream to make an MP3 player in Flash, but only if you encapsulate all your MP3s as FLV files. Not really very helpful since it means converting your MP3 files - it just makes more work.

So, let's use another way. This other way makes making and maintaining the connection with the media easier, but the pausing and playing is just a tad more complicated. Nothing you can't handle I am sure.

The Code

First, here's the code, then I will explain it:


/*set default starting position for playback in seconds*/
var playpoint = 0;
/*create sound object*/
var audio_sound:Sound = new Sound();
/*play button*/
this.play_btn.onPress = function() {
/*play the mp3 from the point defined in the variable playpoint*/
audio_sound.start(playpoint);
};
/*pause button*/
this.stop_btn.onPress = function() {
/*define the variable playpoint as the same as the current position, this is given in milliseconds so we divide it by 1000 to convert it into seconds*/
playpoint = (audio_sound.position/1000);
/*stop the playback*/
audio_sound.stop();
};
this.m1_btn.onPress = function() {
audio_sound.loadSound("track1.mp3", false);
/*true = streaming and therefore autoplay, false = not streaming and therefore just sets the file for when you hit the play button.*/
};
this.m2_btn.onPress = function() {
audio_sound.loadSound("track2.mp3", false);
};


The Explanation

Here goes. First, instead of using NetConnect and NetStream as we did for the video player, we are going to use loadSound. This still gives us a fair amount of control, in some ways more than the NetStream would give us, but it doesn't automatically pause when you play something that is already playing, as NetStream does. So while the rest is no more difficult, just different, pausing and then playing again is slightly more complicated using loadSound.

As with any program, we can only work with the information available, or that we can find out. With the loadSound approach we can find out one very important thing that will help us make a pause/play mechanism - we can find out our current position in the MP3 as it plays. In the code above we do this as follows:


audio_sound.position


Not hard, but on its own it is not a pause/play mechanism. We make it into a pause/play by storing the current position as a variable called playpoint at the time of pause. In effect we remember where we got up to. Then, when we play, we tell it to play from where we left off by asking the variable playpoint to tell us where we got to. As follows:

When pausing:


this.stop_btn.onPress = function() {
playpoint = (audio_sound.position/1000);
audio_sound.stop();
};


First we set the variable playpoint to store our current position. This is actually given in milliseconds so we divide it by 1000 to convert it to seconds - and that's what you see being done here. Then we tell it to stop.

When resuming playing:


this.play_btn.onPress = function() {
/*play the mp3 from the point defined in the variable playpoint*/
audio_sound.start(playpoint);
};


We simply tell it to start, but include the start position as playpoint so it resumes from where we left off.

Isn't that what pausing/playing really is? Stopping, and then starting from where you left off?

The other code is effectively a menu, allowing you to choose which track to listen to. The term false on the end means the track won't play straight away, but will wait for you to press play as well. Change the false into a true and just clicking on the menu will make the track start as well.

Getting late, will add more tomorrow.

No comments: