Flash Tutorial

Tutorial – Using Sound in ActionScript 3

, Author

Lately it seems that everyone has become somewhat of a music snob. Everyone is convinced that his or her taste in music is perfectly objective and that anyone who doesn’t like his or her favorite band is intellectually inferior. For instance, if you were to tell me that you didn’t adore The Shins, Led Zeppelin, and/or Billy Joel, I would probably write your mother a letter, verbally assaulting her for drinking so much vodka while she was pregnant.

Anyways, in an era where melodic snobbishness is so prevalent, everyone with a website (or a MySpace account) wants to play their favorites for the whole world to hear, so if you’re a Flash designer/developer, it might do you some good to learn how to import, play, and modify sound in ActionScript.In this tutorial, I’m going to introduce you to using sound in ActionScript 3, and in later posts, we’ll start to get a little more in depth with the different things we can do with sound.

Note: If you’re easily bored with tutorials and just want to look at some ActionScript, be sure to check out my recent post on an ActionScript 3 / XML Music Player I created. This post contains a link to an FLA that might have some of the ActionScript you’re looking for.

In this tutorial, we’re not going to talk about importing a sound into Flash. Rather, we’re going to discuss accessing external sound files using ActionScript without ever actually importing them into the Flash authoring environment.1. Save your Flash file. Before we do anything else, we need to save our Flash file, because we’ll soon be pointing to an external sound file, and in order to point to the right location for the sound file, Flash will need to know where the FLA file will be saved as well. In this example, I’ll be saving my FLA file in the same directory as my mp3 music file.2. Create a Sound Object. So far, all we’re trying to do is to get a sound file to play, so we don’t really need to worry about putting anything on the stage. Instead, simply select “Layer 1” on your timeline, rename the layer “Actions”, click on frame 1 of this layer, and hit Option+F9 (or just F9 on PC) to open up your Actions panel for this frame. The code for creating a new sound object is simple:

To create a sound object, we first created a variable called “music” and we set this variable equal to a new Sound object. Inside the parentheses for this new Sound object, we placed a new URLRequest object, which allows us to access the URL of an external file, as we see in line 1. This external file is the mp3 file we will be playing.In line 2, we point to our new sound object and tell it to play. And with only two lines of code, we’re already playing music in our Flash file!

Phase Two: Shut that Racket Off!

I’ve also given my button an Instance Name of stop_btn. Here’s the code that causes our stop button to work (hang on to your seats, this one’s complicated):

The first thing you should notice is that line 2 has changed a little. Unlike with ActionScript 2, in AS3, you can’t control the playback, volume, etc. of a sound object using the Sound class. Instead, you have to assign the playback of your sound to a new instance of the SoundChannel class. And then, using your new SoundChannel object (which we simply called “sc”), you can tell your sound how to behave.In line 4, we created the typical event listener for our button so that when we CLICK on our stop button, it will trigger the “stopMusic” function, which contains the code for stopping the playback of our music.On line 8, inside the aforementioned “stopMusic” function, notice that the “stop()” method is attached to the SoundChannel object we created, which we called “sc.” And now, if we test our file, we’ll see that we have the ability to stop our sound.

So, How About a ‘Play’ Button?

Now that we’ve stopped the sound, how do start it back up again?EASY! Create your play button (I’m giving mine an Instance Name of “play_btn”) and add the following code to your Actions layer:

On line 3, we created our variable and set it equal to “true” since our music is playing by default. Then, inside the stopMusic function, we set our variable to false.Inside the playMusic function, instead of just allowing the music to start playing any time we hit the play button, we included an “if” statement that first checks to see if the music is already playing, and if it’s NOT playing already (the exclamation point basically means “not”), then we allow it to play, and we set our “isPlaying” variable back to true.Now our music player functions beautifully!

One Last Thing

Remember earlier, when I mentioned that it’s generally a bad idea to have your music playing by default when the page loads? Yeah, well I meant it! So let’s talk about how we can set this up.Actually, you’ve probably already figured this part out for yourself. Remember that “music.play()” statement in line 2? Get rid of it! Wait until the user actually clicks on the play button before you start playing the music. Of course that also means you need to set the “isPlaying” variable to “false” in line 3.Here’s your final code:Notice that in line 2, we still declared our “sc” variable and strict-typed it to SoundChannel, even though we didn’t set it equal to anything. The reason for this is that if we try to declare our “sc” variable inside the “playMusic” function, then that variable won’t be accessible outside of the function. By declaring the variable outside of the function, we’re ensuring that it will be available anywhere within our code.Anyways, those are the basics of creating a simple music player. As time permits, I’ll be adding more tutorials that explain how to create a “pause” button and a volume slider. Until then, keep practicing!