09.30Create Your Own Music Player - part 1
Impressive? Well, you can learn how to create your own!
Lets make a new (AS2) document. Now we want to make a play and stop button, with the instance names of playBttn and stopBttn. We’ll also have a loading bar with the insatnce name of loadedBar.
What we’re going to do is have a loading bar whilst we’re streaming the sound with a play and pause button. Nothing tricky yet.
var sound:Sound = new Sound(); // new sound object var loaded:Number = 0; // variable for how much is laoded var soundPaused:Boolean = true; //if we're paused var soundPosition:Number = 0; //position of the sound sound.loadSound("http://www.mindless-games.com/files/musicplayer/cosmic.mp3", true); //laoding the sound. Change the address to the address of the mp3 loadedBar._xscale = 0; //for the loading bar sound.stop(); //change the "soundPaused" variable to false and remove the line above if you want it to start automatically function onEnterFrame() { if (loadedBar._xscale != 100) { loadedBar._xscale = Math.round(sound.getBytesLoaded()/sound.getBytesTotal()*100); //like preloading an SWF but with the sound file } } playBttn.onRelease = function() { if (soundPaused) { soundPaused = false; sound.start(soundPosition, 1); //when we press play start the song from where we started } }; pauseBttn.onRelease = function() { if (!soundPaused) { soundPaused = true; soundPosition = sound.position/1000; //get the sound position when we stop sound.stop(); } };
So what’s happening? We’re creating a sound object which we use to attach the sound to. The address there can be anything you want to stream. Then we start loading it (very similar to preloading an SWF).
What we do is when the sound is paused, we can press the play button; when it isn’t, we can press the pause button. Then we start the sound the same way we do with any sound in actionscript. However you may notice we start from the variable soundPosition. This is so we know where to start from once we’ve paused it.
To get the position of the sound we use sound.position. However that returns the position in milliseconds, which is why we divide by 1000. When we start the sound it has to be in seconds, not milliseconds.
Simple enough? Now lets add a volume bar and stop button. Give the stop button the instance name of stopBttn. For the volume bar we want a little slider, with the instance name of slider, and a bar underneath it (which it will slide along) with the instance name of slider_bar. Some actions!
var sound:Sound = new Sound(); // new sound object var loaded:Number = 0; // variable for how much is laoded var soundPaused:Boolean = true; //if we're paused var soundPosition:Number = 0; //position of the sound sound.loadSound("http://www.mindless-games.com/files/musicplayer/cosmic.mp3", true); //laoding the sound. Change the address to the address of the mp3 loadedBar._xscale = 0; //for the loading bar sound.stop(); //change the "soundPaused" variable to false and remove the line above if you want it to start automatically function onEnterFrame() { if (loadedBar._xscale != 100) { loadedBar._xscale = Math.round(sound.getBytesLoaded()/sound.getBytesTotal()*100); //like preloading an SWF but with the sound file } sound.setVolume(slider._x-slider_bar._x); //set the volume of the slider bar } playBttn.onRelease = function() { if (soundPaused) { soundPaused = false; sound.start(soundPosition, 1); //when we press play start the song from where we started } }; pauseBttn.onRelease = function() { if (!soundPaused) { soundPaused = true; soundPosition = sound.position/1000; //get the sound position when we stop sound.stop(); } }; stopBttn.onRelease = function() { sound.stop(); //stop the sound soundPosition = 0; //the position of the sound is back to 0 } slider.onPress = function() { this.startDrag(false, slider_bar._x, this._y, slider_bar._x+slider_bar._width, this._y); //move the slider along for volume }; function onMouseUp() { slider.stopDrag(); }
What’s changed? Well we have a stop button, which stops the sound and sets the position of the sound back to 0. And then we have a slider bar very similar to the Drawing Pad Tutorial. Then on the onEnterFrame part we use setVolume. This sets the volume of a number from 0-100 that you put in. So we set the volume to be slider._x-slider_bar._x. Therefore as the slider moves to the right the volume increases.
Easy! In the next part we’ll add a progress bar, and sound position info!
Hi i just starting to use flash and i must say this looks pretty good. Just wanted you to know that people look on these tutorials.
January 9th, 2009 at 1:40 am
Very nice and even better just what I was looking for. Thanks a lot for this…
February 27th, 2009 at 11:50 am