In this tutorial you'll learn how to create your very own Ipod player using actionscript 3. We'll load in our music files from an XML file, take all the artist song and album data from that file and load it into our fla file. We wont be looking into the XML file in great detail in this tutorial but I hope to cover that in future tutorials.
Download
Take a Look
I recommend you look at the Finished File as I've given a more in depth code explanation inside the actions panel.
note; I haven't added any songs in the songs folder so you'll have to add your own for it to work!
First lets look at what we have in our starter file. On the stage we have an Ipod with play, pause, back and forward buttons all with the instance names pause_btn, play_btn, prev_btn and next_btn respectively. The first thing we'll do is create some dynamic text boxes to load our song text into, so lets get to it.
Step 1 - Dynamic Text
Select the Text Tool and makes sure Dynamic Text is selected in the Properties Panel at the bottom. Draw out a text box on the Ipod screen and give it the instance name artistTXT. Do that twice below the the first text box and give them the instance names albumTXT and songTXT.
Step 2 - Add Our Actionscript
Go to the actions layer and open up the actions panel, The first thing we are going to do is add our variables. So go ahead and copy and paste the code below.
var music:Sound = new Sound();
var soundChannel:SoundChannel;
var currentSound:Sound = music;
var pos:Number;
var currentIndex:Number = 0;
var songPlaying:Boolean = false;
var xml:XML;
var songlist:XMLList;
Step 3 - Preloader
We'll create a simple preloader to load our content in.
var percentLoaded:Number = event.bytesLoaded/event.bytesTotal;
percentLoaded = Math.round(percentLoaded * 100);
if(percentLoaded > 20){
trace("loading");
} else{
}
}
function completeHandler(event):void {
trace("DONE");
}
Step 4 - Load In The XML
Here we load in our XML and create a function that will run when our loader has completed loading.
loader.addEventListener(Event.COMPLETE, whenLoaded);
loader.load(new URLRequest("songs.xml"));
function whenLoaded(e:Event):void
{
xml = new XML(e.target.data);
songlist = xml.song;
getMusic = new URLRequest(songlist[0].url);
music.load(getMusic);//load music
soundChannel = music.play();
songTXT.text = songlist[0].title;
artistTXT.text = songlist[0].artist;
albumTXT.text = songlist[0].album;
soundChannel.addEventListener(Event.SOUND_COMPLETE, nextSong);
}
Step 5 - Add Event Listeners For Buttons
Now we'll add some Mouse Events for our buttons on the ipod and give them some functions.
prev_btn.addEventListener(MouseEvent.CLICK, prevSong);
pause_btn.addEventListener(MouseEvent.CLICK,pauseSong);
function nextSong(e:Event):void
{
if (currentIndex < (songlist.length() - 1))
{
currentIndex++;
}
else
{
currentIndex = 0;
}
var nextReq:URLRequest = new URLRequest(songlist[currentIndex].url);
var nextTitle:Sound = new Sound(nextReq);
soundChannel.stop();
songTXT.text = songlist[currentIndex].title;
artistTXT.text = songlist[currentIndex].artist;
albumTXT.text = songlist[currentIndex].album;
soundChannel = nextTitle.play();
songPlaying = true;
currentSound = nextTitle;
soundChannel.addEventListener(Event.SOUND_COMPLETE, nextSong);
}
function prevSong(e:Event):void
{
if (currentIndex > 0)
{
currentIndex–;
}
else
{
currentIndex = songlist.length() - 1;
}
var nextReq:URLRequest = new URLRequest(songlist[currentIndex].url);
var prevTitle:Sound = new Sound(nextReq);
soundChannel.stop();
songTXT.text = songlist[currentIndex].title;
artistTXT.text = songlist[currentIndex].artist;
albumTXT.text = songlist[currentIndex].album;
soundChannel = prevTitle.play();
songPlaying = true;
currentSound = prevTitle;
soundChannel.addEventListener(Event.SOUND_COMPLETE, nextSong);
}
function pauseSong(e:Event):void
{
pos = soundChannel.position;
soundChannel.stop();
songPlaying = false;
play_btn.addEventListener(MouseEvent.CLICK,playSong);
}
Conclusion
This a pretty basic Mp3 player, I hope it's given you an idea how to work with sound in Actionscript 3. Make sure you look at the Finished File for a more in depth explanation of the code.
This post is tagged AS3, Ipod, Ipod in Actionscript 3, MP3 player actionscript 3, SoundChannel
Share This Post
Jobs
24 Comments
I put my own MP3 in the songs folder and changed the XML document correctly but when I test the finished .swf file I get no song….
Hi Austin,
I double checked the download file and everything is fine. What error are you getting in the output window? I suspect there is a problem with your xml file, so I suggest you double check it. Feel free to send me through the files at Matt@FlashEssential.com so I can take a closer look at the problem.
cheers.
I really like the player you've created. I'm trying to stop the music from playing once the page is loaded…I would like for the music to start once the viewer has pressed play rather than it starting automatically.
Do you have any recommendations?
Hi Clinton
inside the whenLoaded function add these lines of code;
soundChannel.stop();
play_btn.addEventListener(MouseEvent.CLICK,playSong);
that should work I think.
Thanks
wow looking cool!!!tnx for this one:)keep up a good work
NaldzGraphicss last blog post..300+ Best of the Best High Quality Abstract Brushes in Photoshop
Yes very cool. Thanks
I inserted player to my site using this code:
In firefox, everything works fine, but in IE it doesn't. How could I solve this problem?
Somehow script wasn't showed in previous post…
object class="player" type="application/x-shockwave-flash" data="flash/ipod.swf"
param name="wmode" value="transparent" /
/object
Martin,
I recommend downloading http://code.google.com/p/swfobject/ for embedding flash content.
I'll be posting a tutorial on how to use swfobject next week so look out for that.
Look at this site (www.rockamhoerstein.at) it won't work. Action Script is the same as the sample file - help!
Hi Steve,
What errors is it giving you?
I tried including the code to make the player stop playing when loaded:
Hi Clinton
inside the whenLoaded function add these lines of code;
soundChannel.stop();
play_btn.addEventListener(MouseEvent.CLICK,playSong);
but it didn't work. Anything I have missed?
thanks
Oz
i appreciate your script, i like it for being so basic.
one problem: i dont get the player to stop when loaded either.
thanks for your help,
fkid
Try deleting the line
soundChannel = music.play();
and the line
soundChannel.addEventListener(Event.SOUND_COMPLETE, nextSong);
and insert the following line:
play_btn.addEventListener(MouseEvent.CLICK,playSong);
Thanks for the tutorial, it's really clear and easy to understand.
I'm new to AS and taking a AS3 class and finding it very difficult. Anyway, I'd like to incorporate this code into a small player on the flash site that I am using. I already have my own buttons created as movieclips, and replaced the names of your buttons with my own. However, when I compile I receive many errors, first being "Access of unidentified property, loader"
Again, all I have done so far is enter your code into my actionscript file for my site.
Any help is appreciated.
Thanks!
Chris
Chriss last blog post..Defoe and Associates Logo Design Concept
Great player but I have one question…
I also have buttons pertaining to each individual song. How would I get those buttons to play their assigned song when pressed?
Chris, could you email me the files your having problems with so I can take a closer look?
Matt@FlashEssential.com
Myke, I'll look into that.
Hi , thanks I'm having fun to understand that ! I'm trying to upgrade it with a selectable list … is it a good idea to try with the list component? i succsed to display the list but I try to change the song when i select one , but i'm lost there… do you have some clue ?
Thanks
ok i found it : its selectedIndex
Glad you got it sorted MG.
Just to give you the heads up folks
Im creating a new player that'll be launched next week…
hopefully..
in addition to this player.
I notice that, there is no stop button
so I created stop button
hopefully this little code that i was created can help you.
CODE:
stop_btn.addEventListener(MouseEvent.CLICK, stopSong);
function stopSong(event:Event):void
{
soundChannel.stop();
pos = soundChannel.position;
songPlaying = false;
play_btn.addEventListener(MouseEvent.CLICK,playSong);
}
Thanks to the admin….
next time i will post a code for the volume control.
Incoming Links
Leave a Reply