Creating a Mini Music Player in AS3

Tags: Flash Component, freebie

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.

In an attempt to improve a tutorial where the topic of creating a simple MP3 player providing a starting point most while getting your feet wet with AS3. I’ve decided to mature this post by putting a little more thought and effort into creating a more feature rich player.

Introducing the Mini MP3 Player

Based on your feedback, I implemented many of the features that had been request over the last year. However, the usage of the player is still meant for simple music playback and control. The feature list goes as follows:

Features

Easily load a new sound at runtime using the load() method
Autoplay your loaded sounds
Enabled looping of your loaded sounds
Rewind and fast forward your loaded sounds using the built-in rewind/fast forward simulator
Control the volume with the integrated volume scrubber
Slick UI designed by Ryan Butz that can easily be customized
External access to sound navigation functionality like playing, stopping, rewinding, forwarding, etc.

[button style="download" link="http://dl.dropbox.com/u/272056/Downloads/FlashSpeaks/CasaLibFrameUtilDemo.zip" color="silver"]Download[/button]

Preview

How to implement the Mini MP3 Player?

Once you’ve dragged out an instance of the Mini MP3 Player onto the Flash stage, give it a relevant instance name. Trigger open your Actions pane and paste the snippet below which highlights controlling it’s initial properties. To get you off the ground quicker, I’ve created a quick start Flash file giving you everything you need to experiment with this mini MP3 player.

Note: This simple music player was built to handle any one mp3 at a time.

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 you. Enjoy!

Feedback

As you integrate this into your projects, I’d love to hear our feedback. However, like always, let’s keep it constructive.

Credits

The provided audio loop is a part of the Teru’s Keys Loop freebie pack. Like it? Download the whole pack.

About the author

Angel Romero

solo1artist

My name is Angel and I am your everyday ActionScript muncher. Like most my love for the Flash Platform started within Flash and it’s infamous timeline. The maturity of ActionScript has allowed me to grow more into a better developer with a knack for design.

Comments
Trackbacks

19 Comments

C.O.

04.08.2008

Reply

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
Guru

08.22.2008

Reply

I am very found of collecting variety of Music because i want every person in this world listen there music where they want.
Guru
Spider

09.26.2008

Reply

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…
Jeremy

11.12.2008

Reply

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
Mahesh

11.24.2008

Reply

Good example for beginner…
Tyler

12.01.2008

Reply

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

01.14.2009

Reply

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

}
}
Abstriumsters

02.25.2009

Reply

beautiful site..))
I will go to you.
HombreMoleculos

04.02.2009

Reply

Worked great, thanks.
Müzik indir

06.05.2009

Reply

Thanks for that article. I read all of them.
Dloadmp3

07.31.2009

Reply

huh_ that’s nice!
brad

08.12.2009

Reply

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

09.30.2009

Reply

How can I make it play automatically and keep looping?
Thanks
Steffen

11.11.2009

Reply

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

01.07.2010

Reply

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

01.19.2010

Reply

thanks a lot
Rhiannon

01.20.2010

Reply

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
Aldas

11.07.2010

Reply

Hi. How to set this that play music automatically at start?
- Angel Romero
  
  02.15.2011
  
  Reply
  
  The newly redesigned Mini MP3 Player supports this feature.