Accessibility

Flash Communication Server Article

Scenario 1: An Online MP3 Library

Scenario 1 uses the client-side NetStream methods to set up an online library of MP3 files. Users accessing the application will be able to select and play MP3 files. When a user selects files, they will display ID3 tag information.

Figure 1. User interface for MP3 site (Scenario 1)

Figure 1. User interface for MP3 site (Scenario 1)

Requirements: Online MP3 Library

  • Macromedia Flash Communication Server 1.5

  • Macromedia Flash MX (This will be your authoring environment.)

  • Components (contained in Macromedia Flash MX)

    • A ListBox component
    • 3 PushButton components
  • Background graphics (optional)
  • MP3 files

Downloads

Download the source files to use as a guide:

Building the Library (Jukebox)

Use the following steps to build the MP3 library in Scenario 1:

  1. Store your MP3 files. Create a streams folder within the Flash Communication Server application folder. Inside this folder create another folder. Name this folder "defstream". (See Figure 2.) Place all the MP3 files you want in the library within this folder.

    Figure 2. The defstream folder

    Figure 2. The defstream folder.

    Figure 3. The location of the cs_mp3 Macromedia Flash movie

    Figure 3. The location of the cs_mp3 Macromedia Flash movie

  2. Create the user interface. Create a new Macromedia Flash document and name it cs_mp3 (see Figure 3).
    1. Create four layers in your Macromedia Flash movie. Name them Logic, Buttons and Listbox, Navigation Background, and Floor. (See Figure 4.) The first 3 layers have graphic elements.

      Figure 4. Layers in cs_mp3 Macromedia Flash movie

      Figure 4. Layers in cs_mp3 Macromedia Flash movie.

    2. On the Floor layer, create a movie clip and name it speakers_mc. This layer doubles as the graphic background for the application.
    3. Create some end-user controls to start, stop, and pause the MP3 streaming. Create three push buttons using the standard PushButton component from the Macromedia Flash UI Components.
    4. Name the push buttons login_pb, stop_pb, and pause_pb.
      • login_pb has the label name "activate"; its clickHandler is "init".
      • stop_pb has the label name "stop"; its clickHandler is "doStop".
      • pause_pb has the label name "pause"; its clickHandler is "doPause".
    5. List the MP3 files. Create a Listbox component and name it "mp3_lb"; set the changeHandler as "doSelectSong".
    6. Disable the push buttons stop_pb and pause_pb as follows: 
      stop_pb.setEnabled(false), pause_pb.setEnabled(false);

      They will be enabled once the application has made a successful connection to the server.

Code and Logic for Scenario 1

  1. Set up the debugging environment. In the first frame of the Logic layer, set up debugging functionality by including the "NetDebug.as" and "NetServices.as" at the top of the scripting window. 
    #include "NetDebug.as"
#include "NetServices.as"

    You can now use the Communication App Inspector and the Net Debugger to check for errors and feedback from Flash Communication Server 1.5 information objects.

  2. Create arrays to hold MP3 files and details. Create two arrays—one to hold the artist names and another to hold the MP3 file names. The first array mp3ArrArtiste lists the names of the artists, and the next, mp3ArrSong, lists the MP3 files. Place these MP3 files in the folder cs_mp3/streams/defstream.

    In the example I listed the MP3s in the arrays as follows.

    mp3ArrArtiste= new Array()
mp3ArrArtiste=["Jazz","Groove"];
mp3ArrSong= new Array()
mp3ArrSong =["jazz","groove"];
    Note: To recreate the example you must replace the files I have in the above code with your own, as follows:
    mp3ArrArtiste= new Array()
mp3ArrArtiste=["your artiste name 1","your artiste name 2"];
mp3ArrSong= new Array()
mp3ArrSong =["artiste1 MP3","artiste2 MP3"];

  3. Make the NetConnection.

    1. Define a function "init" to initialize the application and connect to the Flash Communication Server. Within its block, the function "init" defines a new NetConnection object named mp3_nc. The NetConnection object opens a two-way connection to Flash Communication Server. The callback function, init, is assigned to the clickHandler for the push button, login_pb.

      init = function () {
	if (login_pb.getLabel()== "activate") {
		mp3_nc = new NetConnection();

    2. The mp3_nc onStatus callback method calls to check for a successful connection to the server. If the connection is successful, the info object of the onStatus method sends a code result of "NetConnection.Connect.Success."

    3. Using an if (info.code=="NetConnection.Connect.Success"){ conditional statement and the info.code result as a control, the listbox component mp3_lb populates with the MP3 files and artist names.

    4. Assign the values of mp3ArrArtiste to the label property of mp3_lb, and the values of mp3ArrSong to the data property of the listbox mp3_lb. Enable the stop (stop_pb) and pause (pause_pb) push buttons.

      		mp3_nc.onStatus = function(info) {
			trace(info.code);
			if (info.code=="NetConnection.Connect.Success"){
				//
      
				// populate listbox with mp3ArrArtiste and mp3ArrSong
				//
      
				for (var i =0; i<mp3ArrArtiste.length; i++){
				mp3_lb.addItem(mp3ArrArtiste[i],mp3ArrSong[i])
				}
				//
      
				//Enable push buttons
				//
      
				stop_pb.setEnabled(true), pause_pb.setEnabled(true);
				}
		};

    5. Make the NetConnection to the application and its instance:

       mp3_nc.connect("rtmp:/cs_mp3/defstream");

    6. Disable the login push button: 

       login_pb.setLabel("deactivate");

    7. Create a toggle for the login push button to allow the user to switch the application off. This script sets the application state to its unconnected state:

      } else if (login_pb.getLabel() == "deactivate") {
		mp3_ns.close(), mp3_nc.close(), login_pb.setLabel("activate");
		stop_pb.setEnabled(false), pause_pb.setEnabled(false);
	}
  4. Create the Stream Object.
    1. Create a new NetStream object called mp3_ns.
    2. Set its target NetConnection object as mp3_nc.
    3. Declare an onStatus event handler method for the NetStream object. When NetStream object status changes, it triggers the onStatus event handler. It is an excellent control to use during development to check the status of your streams. You can use the results from the info object (code or description) as conditions to trigger events and actions that may need to run in sync with the streamed files. 
      mp3_ns = new NetStream(mp3_nc);
mp3_ns.onStatus = function(info) {
			trace(info.code);
		};

    4. The NetStream object is attached to a movie clip; this gives it a platform from which it can play. This application uses the background movie clip, speakers_mc. Using the method speaker_mc.attachAudio(mp3_ns), you associate the NetStream object mp3_ns with speakers_mc by .

      speakers_mc.attachAudio(mp3_ns);
  5. Select, play, and control the MP3 files. To select, play, and control the MP3 files in the library, employ the functionality of the push buttons and the listbox.

    The listbox "mp3_lb" has its changeHandler method assigned to the function literal doSelectSong. When a user selects an artist from the list, doSelectSong retrieves the MP3 file name and assigns it to the variable selectedMP3. The mp3_ns.play() method is now called to play the requested MP3 file. You must put a "mp3:" prefix before the MP3 filename.

    doSelectSong = function(component){
	var selectedMP3 = component.getSelectedItem().data;
	mp3_ns.play("mp3:"+selectedMP3);
    1. To retrieve the song title from the ID3 tags of the MP3 file, create another NetStream object. Call it id3_ns. Declare its NetConnection object as mp3_nc:
      id3_ns = new NetStream(mp3_nc);

    2. Within the doSelectSong function, call the play method of id3_ns: 

      id3_ns.play("id3:"+selectedMP3);

    3. To access the ID3 tag information, write a callback function using the info object as the function parameter. The various properties of the ID3 tags become properties of the info object. On the stage, create a text object, name it mp3_title_txt, and assign to it the value of info.songtitle.

      id3_ns.onStatus = function(info) {
		trace(info.songtitle);
		mp3_title_txt.text = info.songtitle;
		
		};

    4. The script improves user control over playback by providing pause and stop options. The stop button stop_pb and the pause button "pause_pb" trigger the stop and pause options in the library. These push buttons have the callback functions doStop and doPause, assigned to their clickHandlers in the properties panel.

    5. Create a toggle for the pause push button so that the app notifies the user of its status.

      doStop = function () {
	mp3_ns.close();
};
doPause()
{
mp3_ns.pause();
if (pause_pb.getLabel() == "pause"){
pause_pb.setLabel("resume");
}else{
pause_pb.setLabel("pause");
}
}

Online MP3 Library: Complete Code

Voila! You have an online MP3 library. This is the complete code:

//

#include "NetDebug.as"
#include "NetServices.as"
mp3ArrArtiste = new Array();
mp3ArrArtiste = ["Jazz", "Groove"];
mp3ArrSong = new Array();
mp3ArrSong = ["jazz", "groove"];
stop_pb.setEnabled(false), pause_pb.setEnabled(false);
init = function () {
	if (login_pb.getLabel() == "activate") {
		mp3_nc = new NetConnection();
		mp3_nc.onStatus = function(info) {
			trace(info.code);
			if (info.code == "NetConnection.Connect.Success") {
				for (var i = 0; i<mp3ArrArtiste.length; i++) {
					mp3_lb.addItem(mp3ArrArtiste[i], mp3ArrSong[i]);
				}
				stop_pb.setEnabled(true), pause_pb.setEnabled(true);
			}
		};
		mp3_nc.connect("rtmp:/cs_mp3/defstream");
		mp3_ns = new NetStream(mp3_nc);
		id3_ns = new NetStream(mp3_nc);
		mp3_ns.onStatus = function(info) {
			//trace(info.code);
		};
		speakers_mc.attachAudio(mp3_ns);
		login_pb.setLabel("deactivate");
	} else if (login_pb.getLabel() == "deactivate") {
		mp3_ns.close(), mp3_nc.close(), login_pb.setLabel("activate");
		stop_pb.setEnabled(false), pause_pb.setEnabled(false);
	}
};
doSelectSong = function (component) {
	var selectedMP3 = component.getSelectedItem().data;
	mp3_ns.play("mp3:"+selectedMP3);
	id3_ns.play("id3:"+selectedMP3);
	id3_ns.onId3 = function(info) {
		
			trace(info.songtitle);
			mp3_title_txt.text = info.songtitle;
		
	};
};
doStop = function () {
	mp3_ns.close();
};
doPause = function () {
	mp3_ns.pause();
if (pause_pb.getLabel() == "pause") {
		pause_pb.setLabel("resume");
	}else{
		pause_pb.setLabel("pause");
};

To browse it, launch cs_mp3.swf. Activate the application and play your MP3 files.

‹ Back | Contents | Next ›