Create a Mini Music Player in AS3
Posted on 02 April 2008.
If you are still scratching your head trying to grasp the concept and structure of Actionscript 3, then this tutorial will help you get your feet wet. This Flash tutorial is great for users looking to begin using sound with Actionscript 3.0. It touches on the basics of sound integration and breaks its functionality.
It will basically walk you through creating your music player then followed by adding a volume control slider. This walk through consists of two individual tutorials created by Craig Campbell.
Create the Music Player
Essentially, what you have here are two buttons, start and stop. The buttons control a remote music file that the music player is accessing via the new sound object within AS3. Note: This simple music player was built to handle any one mp3 at a time.
Add a Volume Slider Control
Ok now the music player is in place. Next is a tutorial to add a volume slider to the existing music player.
Overall, this is a nice start for beginner users of Actionscript 3.0. This music player can easily be added to a personal site, blog, and even a MySpace page. Use this to get you started, then see where that will take. Enjoy!
Actionscript Used In Tutorial
//----CODED BY CRAIG CAMPBELL AT SCHOOL OF FLASH--------//
//-------- http://www.schoolofflash.com----------//
var music:Sound = new Sound(new URLRequest("walk.mp3"));
var sc:SoundChannel;
var isPlaying:Boolean = false;
stop_btn.addEventListener(MouseEvent.CLICK, stopMusic);
function stopMusic(e:Event):void
{
if(sc != null)
{
sc.stop();
isPlaying = false;
}
}
play_btn.addEventListener(MouseEvent.CLICK, playMusic);
function playMusic(e:Event):void
{
if (!isPlaying)
{
sc = music.play();
isPlaying = true;
}
}
//---VOLUME SLIDER---//
var dragging:Boolean = false;
var rectangle:Rectangle = new Rectangle(0,0,100,0);
volume_mc.slider_mc.addEventListener(MouseEvent.MOUSE_DOWN, dragIt);
stage.addEventListener(MouseEvent.MOUSE_UP, dropIt);
function dragIt(e:Event):void
{
volume_mc.slider_mc.startDrag(false,rectangle);
dragging = true;
volume_mc.slider_mc.addEventListener(Event.ENTER_FRAME, adjustVolume);
}
function dropIt(e:Event):void
{
if (dragging)
{
volume_mc.slider_mc.stopDrag();
dragging = false;
}
}
function adjustVolume(e:Event):void
{
var vol:Number = volume_mc.slider_mc.x / 100;
var st:SoundTransform = new SoundTransform(vol);
if (sc != null)
{
sc.soundTransform = st;
}
}
Hallo! Thanks. I am working on a new as3 flash site for myself and have a simple question.
In the flash cs3 manual I read:”Once load() is called on a Sound object, you can’t later load a different sound file into that Sound object. To load a different sound file, create a new Sound object.”
I hate that! I simpy want to the user to click different buttons which trigger different mp3 (streams). Triggering a new sound should kill the one playing. I used to accomplish this by simply loading a new sound into a created sound object. Please help!
Christian
I am very found of collecting variety of Music because i want every person in this world listen there music where they want.
Guru
Sweat tutorial, I find all scripts difficult to understand as I am a newbie to flash. However, this worked a treat.
Best Regards and thanks…
Thanks for the great tutorial, I was struggling with this in AS3, it seems every time I finally get the hang of action script, they change the version on me…oh well, what can you do I guess
Jeremy
Good example for beginner…
Hi all, cool script, but just IMHO, about the line 4. In this string “var music:Sound = new Sound(new URLRequest(“walk.mp3″));” better use absolute path instead relative: for example, URLRequest(“http://mp3shoplive.com/buymp3/20184504/Katy_Perry.htm”) instead URLRequest(“walk.mp3″).
Can you help me to integrate this script into my site?
You should call removeEventLisener when drop:
function dropIt(e:Event):void
{
if (dragging)
{
volume_mc.slider_mc.stopDrag();
dragging = false;
volume_mc.slider_mc.removeEventListener(Event.ENTER_FRAME, adjustVolume);
}
}
beautiful site..))
I will go to you.
Worked great, thanks.
Thanks for that article. I read all of them.
huh_ that’s nice!
Great tutorial. I’m getting two “1120:Access of undefined property sc.” errors though. First one for
if (sc != null)
And the second one for
sc.soundTransform = st;
Here is my code:
stop();
var soundReq:URLRequest = new URLRequest(“kennypowersaudiobook.mp3″);
var sound:Sound = new Sound();
var soundControl:SoundChannel = new SoundChannel();
var isPlaying:Boolean = false;
var resumeTime:Number = 0;
sound.load(soundReq);
sound.addEventListener(Event.COMPLETE, onComplete);
function onComplete(event:Event):void {
play_btn.addEventListener(MouseEvent.CLICK, playSound);
stop_btn.addEventListener(MouseEvent.CLICK, stopSound);
back_btn.addEventListener(MouseEvent.CLICK, goBack);
}
function playSound(event:MouseEvent):void {
soundControl = sound.play(resumeTime);
pause_btn.visible = true;
pause_btn.addEventListener(MouseEvent.CLICK, pauseSound);
play_btn.visible = false;
pause_btn.removeEventListener(MouseEvent.CLICK, playSound);
}
function pauseSound(event:MouseEvent):void {
resumeTime = soundControl.position;
soundControl.stop();
play_btn.visible = true;
}
function stopSound(event:MouseEvent):void {
soundControl.stop();
}
function goBack(e:MouseEvent):void {
gotoAndPlay(“193″);
}
//—VOLUME SLIDER—//
var dragging:Boolean = false;
var rectangle:Rectangle = new Rectangle(0,0,100,0);
volume_mc.slider_mc.addEventListener(MouseEvent.MOUSE_DOWN, dragIt);
stage.addEventListener(MouseEvent.MOUSE_UP, dropIt);
function dragIt(e:Event):void {
volume_mc.slider_mc.startDrag(false,rectangle);
dragging = true;
volume_mc.slider_mc.addEventListener(Event.ENTER_FRAME, adjustVolume);
}
function dropIt(e:Event):void {
if (dragging) {
volume_mc.slider_mc.stopDrag();
dragging = false;
}
}
function adjustVolume(e:Event):void {
var vol:Number = volume_mc.slider_mc.x / 100;
var st:SoundTransform = new SoundTransform(vol);
if (sc != null) {
sc.soundTransform = st;
}
}
Any information would be greatly appreciated.
How can I make it play automatically and keep looping?
Thanks
Koki,
you add something like that. I dont tested it:
sound.addEventListener(NetStatusEvent.NET_STATUS, handlerFunction);
private function handlerFunction(event:NetStatusEvent):void{
if(event.info.code==”NetStream.Play.Stop”){
sound.seek(0);
sound.playSound();
}
}
Test and try it.
It mostly works…trying to get music to play in the browser itself and it's not working, thought it works fine in flash player. IDK.
Hi, Just to say this is a fantastic post – I am very much a beginner in flash and I found it very clear and simple to follow. And most importantly it works for me.
Any chance you could add another tutorial or let me know what the code would be to add a fast forward and a rewind button?
Thanks