2.7 Sound

The objective of this exercise is to create a simple system for loading an mp3 sound file, and then creating buttons to play and stop that sound file.

1. First, some notes on how AS3 deals with sound and loading external files.

To load external files into Flash, we need the URLRequest class. When creating a new object of that class, we indicate the URL (relative or absolute) in the constructor. Then the file can be loaded into a media container, such as the Sound class.

Once we have a sound file into a Sound class object, we need to route the sound object to a channel (Flash is multichannel, so a sound file could be routed to any of several possible channels). To create a new channel, we use the SoundChannel class. Then we can use the sound channel to play and stop the sound. Therefore, to load and playback a sound, we need to use 3 classes: URLRequest, Sound, and SoundChannel.

2. Let’s move on to our exercise. First, let’s set up play and stop buttons (a green triangle and a red square):

var playBtn:Sprite = new Sprite();
stage.addChild(playBtn);
playBtn.x=125;
playBtn.y=150;
playBtn.graphics.beginFill(0x00FF00);
playBtn.graphics.lineTo(100,50);
playBtn.graphics.lineTo(0,100);
playBtn.buttonMode=true;

var stopBtn:Sprite = new Sprite();
stage.addChild(stopBtn);
stopBtn.x=300;
stopBtn.y=150;
stopBtn.graphics.beginFill(0xFF0000);
stopBtn.graphics.drawRect(0,0,100,100);
stopBtn.buttonMode=true;

3. Now, following the logic presented before, let’s create 3 new objects, belonging to the URLRequest class (trackURL); the Sound class (myTrack), and the SoundChannel class (myChannel). The URLRequest will point to the file name, as the sound file will be stored in the same directory as my Flash files (som_instrumentos.mp3). The sound file should be an mp3.

var trackURL:URLRequest=new URLRequest("som_instrumentos.mp3");
var myTrack:Sound = new Sound();
var myChannel:SoundChannel = new SoundChannel();

4. We can now load our “trackURL” into our “myTrack” sound object, bringing the sound file into Flash with the load() method:

myTrack.load(trackURL);

5. Now, let’s create a listener and a function for our play button. To play the sound into our “myChannel”, we will use the play method. I will use its two parameters: start time within the sound file (in milliseconds, which I will set to 0), and number of loops. Because I want the sound to play indefinitely, I will set the number of loops to an absurdly high number (99999). If you don’t specify any parameters, they will default to 0.

playBtn.addEventListener(MouseEvent.CLICK, playTrack);
function playTrack(e:MouseEvent):void {
myChannel=myTrack.play(0,99999);
}

6. Finally, we will create a listener and function for our stop button. The method for stopping a channel is simply stop():

stopBtn.addEventListener(MouseEvent.CLICK, stopTrack);
function stopTrack(e:MouseEvent):void {
myChannel.stop();
}

7. Note that, once that sound starts, pressing play again will generate a new sound, over the first one. To avoid that, simply insert:

myChannel.stop();

before

myChannel=myTrack.play(0,99999);

in the play function.

8. This is the whole code:

var playBtn:Sprite = new Sprite();
stage.addChild(playBtn);
playBtn.x=125;
playBtn.y=150;
playBtn.graphics.beginFill(0x00FF00);
playBtn.graphics.lineTo(100,50);
playBtn.graphics.lineTo(0,100);
playBtn.buttonMode=true;
var stopBtn:Sprite = new Sprite();
stage.addChild(stopBtn);
stopBtn.x=300;
stopBtn.y=150;
stopBtn.graphics.beginFill(0xFF0000);
stopBtn.graphics.drawRect(0,0,100,100);
stopBtn.buttonMode=true;

var trackURL:URLRequest=new URLRequest("som_instrumentos.mp3");
var myTrack:Sound = new Sound();
var myChannel:SoundChannel = new SoundChannel();
myTrack.load(trackURL);

playBtn.addEventListener(MouseEvent.CLICK, playTrack);
function playTrack(e:MouseEvent):void {
myChannel=myTrack.play(0,99999);
}
stopBtn.addEventListener(MouseEvent.CLICK, stopTrack);
function stopTrack(e:MouseEvent):void {
myChannel.stop();
}

And the exercise will look like this:

Download files: ex13-sound.zip

Advertisements

About Nuno Correia

audiovisuals+interaction
This entry was posted in 2. Controlling Audiovisual Objects and tagged . Bookmark the permalink.

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s