Loading, playing and stopping sounds in AS 3.0.

In this tutorial we will learn how to load external mp3s and how to control them. We will work with URLRequest class, Sound class, SoundChannel class and use the CLICK mouse event. After completing this tutorial you will be able to add sounds to your application.

Let’s see how.

1. Create a new file by going to File > New select Flash file (ActionScript 3.0) and click Ok.

2. Insert two new layers by going to Insert > Timeline > Layer.

3. Double click on the top layer and name it actions, name the second one play_btn and the third stop_btn.

4. Lock the actions and play_btn layers and select the stop_btn layer. Go to Window >Common Libraries > Buttons. Scroll down until you find the playback rounded folder. Double click on the folder to open it and select rounded green stop button and drag it to the stage.

5. Select the button set its instance name to stopBtn, the width = 64, height=48, x= 275, and y=200.

6. Lock the stop_btn layer, unlock the play_btn layer and select it. Go to Window >Common Libraries > Buttons. Scroll down until you find the playback rounded folder. Double click on the folder to open it and select rounded green play button and drag it to the stage.

7. Select the button set its instance name to playBtn and the other properties identical with those for stopBtn.

8. On your local drive make a new folder, place in this folder an mp3 file and save your fla file in this folder.

9. Select frame 1 on the actions layer hit F9 to open the ActionScript panel and paste the code from below.

1. var soundURL:URLRequest = new URLRequest("rapid.mp3");
2. var sound:Sound = new Sound();
3. sound.load(soundURL);
4. var channel:SoundChannel = new SoundChannel();
5. playBtn.addEventListener(MouseEvent.CLICK,startPlay);
6. stopBtn.addEventListener(MouseEvent.CLICK,stopSound);
7. function startPlay(event:MouseEvent):void {
playBtn.visible = false;
stopBtn.visible = true;
channel = sound.play(0,5);
8. function stopSound(event:MouseEvent):void {
stopBtn.visible = false;
playBtn.visible = true;

10. In the first line replace the “rapid.mp3” with the name of your mp3. Remove the numbers before the lines. Hit Ctrl+Enter to test your movie. Everything should work fine.

Now let’s have a look at the code.

In line 1 we declare an URLRequest (soundURL) object that hold’s the path to our mp3.

In lines 2 and 3 we declare a sound object and load the soundURL (the path to our mp3).

In line 4 we make a SoundChannel object, we will use this object to control our sound (to stop playing).Next we add a CLICK event to our buttons, this event will fire when we click on the button.

The function startPlay handles the CLICK event added to the playBtn. When this event occurs we set the visible property of the playBtn to false (the button is not visible), the visible property of the stopBtn to true (make the button visible) and start to play our sound. The sound will start to play from 0 and will loop 5 times.

The function stopSound handles the CLICK event added to stopBtn. Inside this function we stop the sound, set the visible property of the playBtn to true and the visible property of the stopBtn to false.

This is all. I hope that you enjoyed the tutorial. If you have questions, suggestions, doubts about the tutorial don’t hesitate to comment.

Until next time have fun learning Flash.

To download the source files go to:Download.

7 comentarii:

Post a Comment

  • Anna Greene : January 21, 2009 at 2:01 AM

    Hey this is a great tutorial thanks! Just wondering....how would you amend this script so that it streams the audio rather than download the whole thing on page load??

  • Biochimistu : January 22, 2009 at 5:59 AM

    Hi Anna,
    The sound starts to play before it’s complete loaded. This tutorial is a basic example. You can see this behavior at the most audio players online, they use a progress bar to keep track of the percent of the sound loaded. You will see that the sounds starts to play as soon as sufficient data is loaded and the progress bar continues to grow until the sound it’s completed loaded.

  • Anonymous : April 18, 2009 at 8:11 PM

    Why doesn't the swf work when I put it on the web page? It is giving me this error:

    "ArgumentError: Error #2068: Invalid sound.
    at flash.media::Sound/play()
    at 1_fla::MainTimeline/startPlay()"

    The swf plays fine on it's own.

  • Biochimistu : April 19, 2009 at 2:05 AM

    Make sure that the url to the mp3 file is correct and that you have access to the mp3.

  • pissed_off_girl : April 24, 2009 at 12:09 PM

    hi, east and straight forward tutorial. one question though... how do i get the play button to show first. i tried changing the false and true statemnts but it didnt work. Thanks in advance for your reply.

  • Biochimistu : April 27, 2009 at 5:07 AM

    Hi pissed_of_girl,
    The play button appears first. Take a look at the source files.

  • pissed_off_girl : April 27, 2009 at 8:52 AM

    Ahhh, thank you... I created my own buttons with a simple triangle and a square. The square covered up the triangle even though it was in the lower layer. I fixed it by creating going into the play button and i put a rectangle behind it. The play button shows first now.

    Thanks again