Section 7.5. Streaming MP3 Audio

7.5. Streaming MP3 Audio

One of the additions to FlashCom 1.5 from the original 1.0 release is the capability to stream MP3 audio files from a FlashCom application. Now, you may be scratching your head, thinking, "Can't I already load MP3 files into the Flash Player with Sound.loadSound( ) ?" And you're right. However, loadSound( ) operates with HTTP, and so requires that the MP3 files (or source) are accessible from a web server. Also, it's possible for someone to discover this source and access the MP3 files directly, without the use of Flash Player. With FlashCom, you can protect your MP3 sources and be fairly confident that the right to access those files is managed. Just like FLV files, MP3 files streamed with FlashCom over RTMP (or HTTP tunneling) are never cached as whole files on the end user 's computer. The MP3 data is stored only temporarily as chunks within the Flash Player's buffer. After the sound has played , there's nothing left over on the user's machine. Because of this security feature, you may decide to use FlashCom Server as your MP3 streaming server as well as your video streaming server.

For a review of stream basics and an introduction to MP3 streaming, including use of the NetStream and Stream classes, refer to Chapter 5.

7.5.1. Considerations for MP3 Playback

Unlike the FLV format, the MP3 audio format is very popular and widely accessible. There are more MP3 audio converters than you can shake a stick at, and many of them are freely available on http://www.download.com. Apple iTunes includes a free MP3 encoder, with several customizable compression options.

Like the Sorenson Spark codec, the MP3 audio codec has two primary encoding methods : CBR (constant bit rate) or VBR (variable bit rate). While VBR encoding takes a bit longer to complete, the better audio quality is worth the wait. In our experience, FlashCom can stream just about any MP3 file you want to stream. If you are going to encode a batch of files in the MP3 format with the hope of streaming them on FlashCom, you should create a few test files with your preferred encoder and compression options to use with a sample FlashCom application. Once you know your flavor of MP3 files works with FlashCom, proceed to encode the rest of the files in the same manner.

7.5.2. Using the MediaPlayback Component to Play MP3 Files

In this section, you learn how to create a list of MP3 sound effects and play them with the MediaPlayback component that ships with Flash Pro. Download the following Zip file containing four MP3 files:

http://www.flash-communications.net/examples/ch07/mp3.zip

Once you have downloaded the Zip file, uncompress the MP3 files ( dog.mp3 , cat.mp3 , bird.mp3 , duck.mp3 ) and move them to the following application path on your FlashCom Server:

applications/broadcast/streams/_definst_

If you haven't created the main.asc for the broadcast application as discussed in the previous section, review the "Configuring the FCS Application" section for more details.

Now that you have the MP3 files ready to stream from your FlashCom Server, you're ready to build the user interface in Flash Pro:

1. Open a new document in Flash Pro. Save this document as MediaComponent_mp3.fla .

2. Rename Layer 1 to clbSounds . On frame 1 of this layer, drag an instance of the List component from the UI Components folder of the Components panel to the Stage. Place the instance near the top-left corner of the Stage. In the Properties panel, name this instance clbSounds .

3. Create a new layer, and name it cmpPlayer . On frame 1 of this layer, drag an instance of the MediaPlayback component to the Stage, to the right of the clbSounds instance. In the Properties panel, name this instance cmpPlayer and set its height to 80. Click the Launch Component Inspector button, and in the Parameters tab of the Component Inspector panel, select the MP3 option and the On value for the Control Visibility setting, as shown in Figure 7-31.

   Figure 7-31. The settings for the MediaPlayer instance in the Component Inspector panel

   
   

4. Now you're ready to add the ActionScript code to populate the list and trigger the MediaPlayback component when an item in the list is selected. Create a new layer named Actions , and drag this layer to the top of the layer stack. Select frame 1 of this layer, and open the Actions panel (F9). Add the following code:

    import mx.controls.List; import mx.controls.MediaPlayback; var clbSounds:mx.controls.List; var cmpPlayer:mx.controls.MediaPlayback; var dp:Array = [ {label: "Dog", data: "dog.mp3"},                  {label: "Cat", data: "cat.mp3"},                  {label: "Duck", data: "duck.mp3"},                  {label: "Bird", data: "bird.mp3"}]; clbSounds.dataProvider = dp; var oSounds:Object = new Object( ); oSounds.change = function (oEvent:Object) {   var sVal:String = oEvent.target.selectedItem.data;   cmpPlayer.contentPath = "rtmp://209.29.151.23/ch07/" + sVal;   cmpPlayer.play( ); }; clbSounds.addEventListener("change", oSounds); 

   
   

5. This block of code creates a data provider for the clbSounds instance. The dp array contains four objects, each with a label and data property. The oSounds object is a listener whose change( ) method is invoked whenever an item in the list is clicked. For this example, the contentPath of the cmpPlayer instance uses the public URL on the book's server, but you can change this path to reflect the location of your own broadcast application.

6. Save the document, and test the movie (Ctrl-Enter or Cmd-Enter). When you click the Dog item in the list, you will hear the sound of a dog barking. The dog.mp3 file is streaming from the FlashCom Server. If you select another item in the list, you will hear that sound play.