Loading an external mp3 file in Flash has many benefits. First, and maybe the most practical is that your Flash movie filesize stays the same – there is no need to import the sound file into it, because we can load it dynamically, that is, while the movie is running. Second, if you wanted to change the music, you can change just the mp3 file, without having to open the Flash .fla file to modify it. There is also the possibilty to make the music change automatically, or to build an mp3 player inside Flash, but I’ll leave that for another, more advanced tutorial.
1 Open a new Flash document. Save your Flash movie in a folder created specifically for this exercice. Now copy an mp3 file you’ll use with this project in the same folder where you just saved the Flash document.
2 Back in Flash, call the current (and so far, the only one) layer mc. In this layer, we will put an empty movie clip which will load our external mp3 file.
Creating an empty movie clip
3 Choose Insert > New Symbol, choose Movie Clip as type of symbol, call it sound holder and click OK. Now, if you look above the timeline, you’ll see Scene 1 written and sound holder to the right of it. This indicates that you are now inside the sound holder movie clip. To make an empty movie clip, click on Scene 1. That’s it. Now go check the Library (choose Window > Library if your Library panel isn’t open yet) and you’ll see the empty sound holder movie clip in it.
4 Drag and drop the newly created sound holder movie clip onto the scene. You will see it represented by a small circle. This is how empty movie clips look like in Flash. Now, in the Properties panel, just below the scene, you should see Movie Clip written on its left side. Below this inscription is an input field, with words Instance Name written inside. Click this input field, write soundLoader in it and press enter. Now, you have just named your movie clip.
Without the instance name we just entered, we wouldn’t be able to control the movie via ActionScript. Choose whichever name you like instead of soundLoader, but the important thing is to stick with it throughout all of the ActionScript code you will write in this Flash document.
When giving a movie clip on stage his Instance name, it is important to follow a few simple rules. Your movie clip Instance name cannot contain spaces or any other special characters like !$%# etc. Also, the Instance name must not begin with a number. Avoid putting an underscore at the beginning, too. Use letters and numbers, that will suffice. Be careful: ActionScript is case-sensitive. That means the name soundLoader isn’t the same as soundloader or Soundloader. The Library name of a movie clip (we called it sound holder) can contain spaces and other special characters. Why? Because this name isn’t important for ActionScript. It is with the Instance name that we control our movie clip.
Lock the mc layer. We now have our target movie clip for sound loading. Let’s move on to ActionScripting.
5 Create a new layer, call it actions. Click on the actions layer’s first frame and open the Actions panel by choosing Window > Actions or pressing F9 (PC) or ALT+F9 (Mac). Type in the following code:
coolTune = new Sound (soundLoader);
coolTune.loadSound("somesong.mp3", true);
Test your movie. You should hear the mp3 file play. If you can’t hear it, either you didn’t follow the tutorial properly or you didn’t turn the speakers on 🙂 Just kidding… check if you typed in everything correctly, unlock the layer with the movie clip, if you don’t see it, find it by pressing CTRL+A (PC) or Command+A (Mac). Click on it once, and check the Properties panel – see if you got the Instance name correctly. Now, let’s see what do the different pieces of our code mean and do.
coolTune = new Sound (soundLoader);
This line creates a Sound object. In Flash, creating a Sound object is necessary if you want to control a sound via ActionScript. So, we basically tell Flash that coolTune
is a new Sound object (you can call it whatever you like – coolTune, coolSound, song01, etc. But, the Sound object needs to be associated with a movie clip to function. So, we wrote the Instance name (soundLoader in this case) between parentheses following the new Sound
bit of code. Now that we defined a new Sound object and associated it with a target movie clip, we can start to tell it what to do.
coolTune.loadSound("somesong.mp3", true);
The loadSound
method (a method is a thing that an object can do, like for example, a real object can do things – a car can accelerate or steer) is used for loading an external mp3 file. This method has two parameters / the url (location of the file) and whether the mp3 file will be streamed or not. I will explain these two in more detail now.
If your mp3 file happens to be in the same folder as your Flash movie (as is the case in this tutorial) you just write the name of the file (with the extension .mp3) between quotation marks. If you have your mp3 files in a subfolder, called, let’s say, music, you would write the url as follows: "music/somesong.mp3"
. See the images and what would the code for these situations be like below.
coolTune.loadSound("somesong.mp3", true);
coolTune.loadSound("music/somesong.mp3", true);
You probably now this already, if you ever linked any pages manually in HTML. It is just about finding the path to the mp3 file.
The second parameter between the parenthesis determines whether the sound (our mp3 file) will be streamed or not.
If you have (like in our case) this parameter set to true
, it will be streamed. This means that the mp3 file will begin to get loaded in your Flash movie, and it will start to play once a sufficient portion of it has been downloaded. Then, it will continue loading as it plays. This is ideal for songs, background music, etc.
If it is set to false
, the sound will play only once it has been loaded completely. This is best used for smaller files, like sounds for a button, a menu being opened etc. There is no sense in using this with an mp3 file which is a few megabytes big. The visitors to your site won’t hear anything until it has loaded completely, which may take 5 minutes or more, depending on the speed of their Internet connection. It would be great if everyone had a rad T1 connection (drool, drool), but that is not the case in the real world.
Thanks for the tutorial.
Is there a way to tell flash to loop the song that we load? Thanks.
thank you 🙂
Bao: The code for making a sound loop is explained in the lesson about making an mp3 player in Flash. It is really simple, check it out and you’ll see.
Mark: You’re welcome 🙂 spread the word about flashexplained.com/!
How can I export a swf file which is attached a mp3 file? (I mean: I can copy to everywhere without mp3 file).Thanks.
Thank you so much for this. I needed a quick fix for a client site (audio not loading in IE) and your code worked a treat. I am using it with database-driven content to load music files (var currentFile=_root.file;) together with ‘MP3PlayerB.swf?file=’ in html code.
Thank you, friend
After many, many hours of slugging it out with AS2 and AS3, rebuilding at least 5 different mp3 players as part of the learning curve and losing about 342 hairs (with attached stem cell bearing root nodules) THIS tutorial was so lucid and correct that it actually TAUGHT me something and I was able to use this knowledge to build my own mp3 player (buttons) inside a complicated (for me) flash website – eureka!! Thanks man, there is a big difference between showing someone how to do something and teaching them how (and why) to do something – your tutorial definitely sets the bar for the latter – very much appreciated!
thnk you very much now i can create a winamp of my own
Greetings Luka!
Bless you for helping so many people, more or less, ‘bridge the digital divide’. For this tutorial, “Loading…external mp3…”, I’m not sure if you are using AS2 or AS3. I created my site pages using Illustrator, then Flash for whatever else was necessary. My site is dedicated to music; i have a lot of mp3 samples to link. I have a song scene/page in the swf with buttons (scripted via ‘Behaviors’) to link to the mp3’s…of course, i later found out that this made the site to big to appreciate. If i could at least get hints as to how to proceed, or should be aiming to do, i’ll probably be able to continue research and follow/figure it out. And too, what script is this your using in your tutorial here for Loading Mp3’s w/ActionScript?
Best,
dave
thaks man..u cheer up my day hehe
dave – as2…doesn’t work in as3
Thanks! That was very helpful on a project I am currently working on!
how do i play 6 mp3 one after another?
This is a very easy to follow tutorial, even for some one with my limited knowledge. Great stuff, exactly what I was looking for. Thank you very much.
Can ya giVe ME the .fla file?
please send me an e-mail if ya can,,,
see ya,,!!
thank you so much i guess that you made it very simple with just two lines..i will see how to control this with buttons…..it can be frustrating writing unnedded complicated codes,with long procedures and all….
dats wat i been doing and thou it worked , i dont know why its not working earlier i know its because of a really small mistake….thanks
every tutorial i’ve seen about buildign an mp3 player shows the same thing….reference the mp3 files from an external folder.
and then i’ve seen as3 reference the mp3 files through an xml playlist file.
can you upload the xml file AND the mp3 files along with the swf to a website?? not an html website, but a website created on a sitebuilder program?
try this:
var soundLoader = new URLRequest(“01 Let’s Have a Natural Ball.mp3”);
var coolTune = new Sound();
coolTune.load(soundLoader);
coolTune.play();
sorry, should have clarified my post… it’s AS3.
No need to create an empty movie clip.
Excelent tutorial man!
Just like “bumblefunk” said, this tutorial taught something !
Many many thanks.
how i load a file from a php code like this uploads//music/
a world of thanks 🙂
There is no property called play() with the Sound object! Please be correct!
To start the sound playing use start() method
Thank u very much but after being desactive how to active it again?
Congratulations for a job well done. This is a very helpful, elaborate, precise and easy to follow/understand tutorial. We need men like you in this world. Keep up the good work.
Thanks, thanks, thanks. This is something I really understand! Wauw
What if you want to have multiple songs listed on a page and have them play on when the song name is clicked. And will the last song stop auto or will it have to be stopped manually.
I have the same question as Davo!
A nice tutorial for multiple songs listed an buttons to play and stop would be great… I am searching and searching….
@Pilu: Check this one out: mp3 player with start/stop button
Hello!
I did this cool mp3 player. Only 1 ask. How can i did to loop the song?
Here it is: mp3 loop player
This was a great help, thank you very much!
Hey thanx for the tutorial bro 🙂 but i need to play flv file only on single button 😮
how iis this possible?
Hi,
What if after importing MP3 file into Flash,
We just want to play a portion (part) of it?
Could you tell me!
Kindly,
Tom
This is helpful, but its playing in all scenes in my flash how can play the sound on current scene
Please help me
Sandeep
Finally someone that writes lovely and technical at the same time.
🙂
thanks!
I have a list of food names in an array and another array of images that relate to these sounds. I want use one basic flash player and be able to click on the photo and play the associated sound. Something where a user would click on an image of an apple the variable “apple.mp3” gets sent to the flash player and it plays the sound. Is this possible with a variation of this player. I am just learning flash and I am frustrated with the process of passing the variable back to flash from PHP.
Thanks
Thanks for this tutorial. It works perfectly in AS2 but when I use the same script in AS3, it does not work.
Do I have to use a different script (I suppose so).
Can you help ??
Thanks a lot, merci !
Sandrine
I’m in an animation class right now which is completely centered around Flash. We were asked whether or not we should import an mp3 file directly into a flash project, or have it load externally. Yes to have it load externally is the better of the two options especially when file size of the Flash file is considered. Luka, I know what you mean about not having a high-speed internet connection. I do have high-speed but there are still others in the world that simply don’t have the option available to them for various reasons. The digital divide in the world is still rearing its ugly head. So if a few lines of code makes it easier for everyone to enjoy what a particular flash file offers, it’s not a lot of work. Thanks again for the tutorial:-)
I am new to AS3 code and trying to figure out how to add rewind and forward buttons to my Mp3 player. The songs are linked via an xml file. Have been using Event listeners/handlers for stop, play & pause buttons which works great but really stuck on rewind & fast forward code. Any suggestions would be really appreciated!!!
Thanks tutorial.
How can get it in to loop ??? Above reference links are not working.
coolTune = new Sound (soundLoader);
coolTune.loadSound(“somesong.mp3”, true);
How can I add a delay to this AS so that it waits 3 seconds before playing the externally loaded sound?
tanks bro sangat membantu
very thanx for tutorial..
How can I make the loader script “check” for the audio file; where it plays the mp3 if available, and does nothing if the mp3 isn’t found?
I had to use AS2 to get it to work.
I used a real video clip.
how do I get the video to stop at the end of the clip. The external audio will change daily but the video clip will remain static.
Thanks, Nice work.
Thanks for this. I was looking for a player where you have to click the play button to start the music not have it start on page load. Do you know if there is a tutorial for that? I’m a real noobie when it comes to flash.
Hey, can you send me a copy of this flash file? Also how do I run it from JS?
Thanks,
Rob