Requirements
 

User level
Beginning

Required products

Flash Media Server (Download trial)
Adobe Animate CC CS4

 

This is the fifth article in my series covering Adobe Flash Media Server 3.5 for beginners. This particular installment shows you how to stream audio files through FMS 3.5. First I'll give you a quick overview of the audio streaming capabilities of Flash Media Server. Then I'll walk you through several sample applications that show you how to stream audio and control it, both through the new FLVPlayback 2.5 component and through ActionScript 3.0. (The article after this one delves more into streaming video through ActionScript.)
 

Here are all the articles in the series:

So far in this series, you have dealt with streaming video files. However, there will come a time when someone will ask you to deliver audio through Flash Media Server 3.5.
 
The first thing you need to know about audio and FMS 3.5 is that it is a completely different game from working with audio using ActionScript 3.0. ActionScript includes a number of Sound classes to manage audio. When it comes to FMS 3.5, those classes play a minor role. The reason is simple: The file is being added to a stream and, as such, the "attachAudio" method from ActionScript 3.0 is, for all intents and purposes, rendered useless.
 
Flash Media Server 3.5 can stream only three audio formats: Nellymoser, MP3, and ACC. For this tutorial, you really won't be using Nellymoser, which is more for voice than anything else. The new kid on the block is AAC. There are a few "flavors" of this fomat, and Adobe Flash supports AAC+, HE-AAC, AAC v1, and AAC v2. That's the good news. The bad news is that AAC content can be played only through Adobe Flash Player 9,0,115,0 or later. (This makes sense because this was the Flash Player update released in conjunction with the introduction of H.264 playback.)
 

Note: For a great overview of the AAC format, check out this blog post by my Adobe Developer Connection colleague, Fabio Sonnati: HE-AAC v2: A quick technical overview.

Now that you know what you can use, I'll show you how to actually use it.

 

Streaming audio with the FLVPlayback component
 
I recently started using an Apple MacBook Pro and, along with the Leopard OS, I installed Microsoft Vista. The thing is, every time I launch Vista, I can't help but think, "This isn't right. I am using an Apple computer." I get the same feeling whenever I stream audio through the FLVPlayback component. Running audio through a component that I use to play video takes a lot of getting used to. 
 
This example shows you two things: how to play an audio file and how to turn the sound on and off.
 
Basic audio streaming through the FLVPlayback component
To get started:
  1. Download the files for this tutorial. When you unzip the sample download, open the Exercise folder and place a copy of AndreHprofile.mp3 in the vod folder found at C:\Program Files\Adobe\Flash Media Server 3.5\applications\vod\media

    Note: I would like to thank William Hanna, dean of the School of Media Studies and Information Technology at the Humber Institute of Advanced Learning and Technology in Toronto, for permission to use this clip, produced by the students in the Radio Broadcast program at Humber.

  2. Open a new Flash CS4 ActionScript 3.0 document.
  3. When the document opens, select Window > Components to open the Components panel.
  4. Drag a copy of the FLVPlayback 2.5 component to the Stage.
  5. With the component selected on the Stage, open the Component inspector and click the Parameters tab there to see the FLVPlayback component's parameters.
  6. Double-click the skin parameter. When the Select Skin dialog box opens, select SkinUnderPlay.swf.
  7. Double-click the source parameter and enter 
    rtmp://localhost/vod/mp3:AndreHprofile (see Figure 1).
When you click OK, a progress bar will show that the component is reading the audio file's metadata. Still, the key here is the media type. Notice it is MP3. If you do not add mp3 in the path, the audio file won't play.

 

Streaming audio through the FLVPlayback 2.5 component
Figure 1. Streaming audio through the FLVPlayback 2.5 component
 
    Save the file and test it. The audio plays and you can use the button in the skin to turn the audio on and off.
  1. Obviously there are a couple of things wrong here. The first is that there is a great big white area where "the video" should play. The second is the skin just seems to hang around. What this should tell you is that maybe adding a skin isn't such a good idea; the FLVPlayback component uses up Stage space that could be put to better use.
    Note: You can add a photo to fill the FLVPlayback screen at runtime. I would love to show you how, but that technique is way out of the scope of this article.
    So, assume the audio will be playing in the background and there is no need to turn it on or off.
  2. Move the component to the pasteboard (see Figure 2) and, with the component selected, set the skin parameter to None.
  3. Test the movie. The audio file still plays.
Controling the audio with the MuteButton component
Controlling audio streaming through the FLVPlayback component
In the previous example the audio played. The problem is, this is not exactly regarded as an industry best practice. The user has to be given the opportunity to turn to audio on or off. Here's how:
  1. Open the Component03.fla file in the sample download. When it opens you will see I have already added a copy of the FLVPlayback component to the pasteboard and added some text.
  2. Select the Audio layer and open the Components panel.
  3. Open the Video components list and drag a copy of the MuteButton component to the Stage (see Figure 3).
Controling the audio with the MuteButton component
Figure 3. Controling the audio with the MuteButton component
 
  1. Select the FLVPlayback component on the Stage and, in the Parameters, set its source parameter to rtmp://localhost/vod/mp3:AndreHprofile
  2. Save the file and test it. When you click the Mute button, the audio file turns on and off.
Now that you know how to use the component, I'll show you how to do the same thing using ActionScript 3.0.
Streaming audio through the FLVPlayback 2.5 component

 

If you have used Flash for a while, you know that using the FLVPlayback component adds some serious weight to the SWF file. The FLVPlayback 2.5 component is no exception. For example, that last exercise kicked out a SWF file that weighs in at a beefy 62K. How would you like to do the same thing but finish with a SWF that weighs only 2K? ActionScript 3.0 is the solution.
 
As I mentioned at the start of this piece, you need to put yourself in a different mindset if you are using Flash Media Server to deliver audio files. You are streaming the audio, not playing it. This very fine distinction is critical for you to understand. There are no Sound objects used.
 
Streaming one audio file
Before we start, open the download folder and copy the AudioTest folder to C:\Program Files\Adobe\Flash Media Server 3.5\applications. If you open the AudioTest folder, you will see I have included the main.asc file used throughout this series and placed four audio files in the _definst_ folder.
 
Open the DevCenterApp.fla file found in the sample download folder. As you can see in Figure 4, I have added a couple of buttons and some text to the Stage. All you need to do is to "wire it up" with ActionScript.
 

Figure 4. A couple of buttons and text; ActionScript does the magic

 

Select the first frame in the Actions layer and press F9 (Windows) or Option+F9 (Mac) to open the Actions panel. Click once in the Script pane and enter the following code:

var nc:NetConnection = new NetConnection(); var ns:NetStream; nc.connect("rtmp://localhost/AudioTest"); nc.addEventListener(NetStatusEvent.NET_STATUS, netStatusHandler); function netStatusHandler(evt:NetStatusEvent):void{ if (evt.info.code == "NetConnection.Connect.Success" ){ playNetStream(); } }; function playNetStream():void{ ns = new NetStream(nc); ns.play("mp3:AndreHprofile"); }; pauseBTN.addEventListener(MouseEvent.CLICK,pauseIt); function pauseIt(evt:MouseEvent):void{ ns.pause(); }; playBTN.addEventListener(MouseEvent.CLICK,playIt); function playIt(evt:MouseEvent):void{ ns.resume(); };
I'll walk you through this code so that you'll understand what is going on.
 
The first two lines create the NetConnection and create a variable name (ns) for the NetStream that will be used to feed the sound into Flash Player. The reason for the variable instead of a NetStream object is that you need to make sure there is a real connection to Flash Media Server before you start playing files. The next line creates the connection to the application named VideoTest that you copied to your applications folder.
 

Note: If you were to use the vod folder instead of an application, the line would be this:

 

nc.connect("rtmp://localhost/vod");
The last line of the code block tells Flash to listen in on the NetConnection and listen for a NetStatusEvent named NET_STATUS and, when it hears it, to execute the netStatusHandler function.
 
For those of you who are somewhat new to streaming, you need to know that as soon as a connection is made between Flash Media Server and Flash Player, they start chatting with one another. This conversation takes the form of specific instructions—one of which you will be listening for in particular. All this listener does is to start eavesdropping in on the conversation as soon as it starts.
 
The next code block is the netStatusHandler function. The conditional statement tells Flash exactly what to listen for ( NetConnection.ConnectSuccess ) and as soon as it hears that, to execute the playNetStream(); function.
 
This next code block is how the audio is played. A NetStream object is created using the NetConnection named nc . That NetStream then uses the play() method to play the audio file.
 
The remaining two functions use the pause() and resume() methods of the NetStream class to turn the audio off and to turn it back on.
 
Save the file and test it.
 
Choosing among multiple audio files
Now that you know how to play a single file, I'll show you how to choose from among multiple audio files.
 
My son-in-law, Phil Darling, is the bassist and founder of Tin Bangs, a rather hot indie band in Toronto. The group released an EP that contains three songs, and they want to stream them out in order to let their fans hear the work. (Many thanks to Phil and the other members of the band for letting me use these files for this example.)
 
This means that the user of your streaming app needs to be given the opportunity to pick from among three songs. I have chosen to use the ComboBox component. This way, a pop-up menu of available tunes won't interfere with the interface very much.
 

Note: This exercise could just as easily be accomplished using the ListBox component. Also, I will be hard-coding the songs into the project. If you find this practice a bit odd, you should know that XML can be used as the DataProvider for the ListBox and ComboBox components. I won't be using this approach due to space constraints.

Open the TinBangs.fla file in the sample download folder. You will see that I have somewhat pulled together the interface for you. If you open the Library (see Figure 5), you will see a copy of the ComboBox component along with the background image. What you are going to do now is use ActionScript 3.0 to add the component to the Stage and then stream out the audio files.
 

Note: The audio files used in this exercise can be found in the AudioTest folder you installed earlier. If you skipped to this part of the exercise, copy the AudioTest folder to C:\Program Files\Adobe\Flash Media Server 3.5\applications.

Select the first frame of the actions layer and press F9 to open the Actions panel. When the panel opens, you will see that I have included the code that pulls to ComboBox out of the Library, formats it, and places it on the Stage. The key to the code is found in line 5, where an Array named songs is created.
 
The ComboBox component uses a value pair: label and data. The label is what the user sees when the ComboBox is on the Stage, and the data is the string that makes things happen in this project. The data string is nothing more than the name of the song found in the AudioTest folder with its .mp3 file extention stripped off. The first one with the Select a song label has no data associated with it; it tells the user what to do. Click this at runtime and the ComboBox opens.
 
The next code block creates a ComboBox object named songsCB, sets its dimensions and location on the Stage, tells where to get its data, and is finally put on the Stage using the addChild method.
The next code block simply styles the contents of the ComboBox by assigning the text a font, font color, size, and style.
 
Having dealt with letting the user choose a song, now I'll show you how to actually get the songs to play when the slection in the ComboBox is clicked.
 
Scroll down to line 28 of the Script pane and enter the following code:

 

songsCB.addEventListener(Event.CHANGE, playTune); var nc:NetConnection = new NetConnection(); var ns:NetStream; nc.connect("rtmp://localhost/AudioTest"); nc.addEventListener(NetStatusEvent.NET_STATUS, netStatusHandler);
This code starts by creating an EventListener that looks for a CHANGE event in the ComboBox. That event will be the user clicking a song title. As soon as Flash hears that, it executes the playTune handler.
 
The remainder of the code block is nothing new. The NetConnection is established and the code tells Flash to start eavesdropping on the conversation between the player and the server.
 
Press the Return/Enter key twice and enter the following code block:
function netStatusHandler(evt:NetStatusEvent):void { if (evt.info.code == "NetConnection.Connect.Success" ) { ns = new NetStream(nc); // trace("Congratulations. You are connected."); } };
This falls squarely in the realm of general housekeeping. Remember, the ns is never connected because a NetConnection is never established with the NetStream. This code block is how you tell Flash to wait until you get a successful connection.
 
With this housekeeping out of the way, you can now add the functionality.
 

Note: The trace comment is there for local testing purposes. You can remove it or leave the comment there when the file is eventually uploaded to the FMS server.

 

Press the Return/Enter key twice and add the following:
 
function stopMusic():void { ns.close(); }; function playTune(evt:Event):void { ns.close(); if (ComboBox (evt.target).selectedItem.data !="") { stopMusic(); ns.play("mp3:"+ComboBox(evt.target).selectedItem.data); } };
 
The first function, stopMusic() , is how a song is turned off. You simply use the NetStream's close() method to shut off the stream. The final function, playTune , is how the songs are actually played. You start by using the close()  method to kill anything that might be playing.

 

The conditional statement deals with what strip— selectedItem —in the ComboBox has been clicked. The first thing it does is ask if there is any data associated with the item. If there isn't, nothing will happen. Thus you can use the first item in the ComoboBox to actually turn off any song that may be playing, because there is no data associated with it. In this case, clicking this strip means the function simply returns to the previous line.
 
If there is data, the stopMusic() function is excuted. If it isn't there and you select a different song, you will have two songs playing over each other. (According to Martha Stewart, this is "not a good thing.")
 
With the current tune "killed," the final line of the code pulls the data portion of the selectedItem out of the array in Line 5 and heaves it into the the ns.play() method. Thus, if the first song is selected, this method will be this:
 
ns.play("mp3: WhiteLies(Timekiller)");
 
Check your code. If everything is correct, save and test your project. Click an item in the ComboBox (see Figure 6) and that song will play.
 
The final project
Figure 6. The final project
Where to go from here
I hope you have discovered that Flash Media Server 3.5 does a whole lot more than simply play video. It also plays audio. As you have seen, there are several ways you can use it to play anything from one song to an entire playlist. Best of all, because you are using FMS3, the audio files don't land in the browser's cache.
 
If you really want to create or manipulate your own audio files, a great place to start is with Adobe Soundbooth CS4, which is increasingly becoming regarded as the audio editor for Flash. The Soundbooth Help and Support center features quite a few tutorials that will get you rolling with this application in relatively short order.
 
If you are looking to do some industrial-strength audio work, then Adobe Audition 3 is the way to go. You can even download a test copy to check it out.
 
The next article in this series delves into streaming live video with ActionScript 3.0.