Building a live DJ application for MP3 files

Creating the main.asc file (server-side file)

Use your favorite ActionScript editor to create an .asc file. You can use Flash 8 or Dreamweaver 8 to create this file. Simply save a text file with the ASC file extension.

First things first. Tell the application what to do when it starts up. The code for this is located in the onAppStart function of the Application class. Comments are included in the script below to clarify what is happening:

application.onAppStart = function(){
   //create a stream for each "line" on the server-side. The audience will subscribe to these streams to listen
   this.djStream1 = Stream.get("dj1");
   this.djStream2 = Stream.get("dj2");
   //track the users by establishing a userID
   this.userID = 0;
   //track the volume of the server-side lines for ease in control
   this.dj1Volume = 0;
   this.dj2Volume = 0;
   //the shared object that holds the volume values and updates all clients
   this.volSO = SharedObject.get("vol", false);
   //track the number of current users
   this.userCount = 0;
}

Next, deal with the users as they connect to our DJ application. This script would be more secure if you added code that checks for malicious users, but that is beyond the scope of this article. Read the comments to get a better understanding of each line in the script below:

application.onConnect = function(clientObj){
   //accept them for now
   application.acceptConnection(clientObj);
   //set their userID to their client object
   clientObj.userID = this.userID;
   //tell them they are ready to start listening and pass in the volumes of the lines
   clientObj.call("setUserID", null, clientObj.userID, application.dj1Volume, application.dj2Volume);
   //up the userID to make a new unique ID for the next one
   this.userID ++;
   //up the usercount
   this.userCount++;
   //broadcast a message to all clients of the new usercount minus one because we don't need to count the DJ
   application.broadcastMsg("setUserCount", this.userCount - 1);
}

If you happen to be a recent convert to Flash Media Server 2 from Flash Communication Server 1.5, you might notice that you are using the broadcastMsg() method of the Application class. This is handy because it will go through all the clients that are connected to the application and send them something. In this case, you want to call a function called setUserCount. This strategy eliminates the need to loop through all the connected clients manually.

Next set what the application should do when an audience member disconnects. At this point there isn't much going on, but you need to use the broadcastMsg() function again to tell the connected users that there is one less user listening in:

application.onDisconnect = function(){
   //reduce the usercount
   this.userCount--;
   //failsafe way to make sure we don't go into the minuses
   if(this.userCount < 0){
      this.userCount = 0;
   }
   //broadcast a message to all clients of the new usercount
   application.broadcastMsg("setUserCount", this.userCount - 1);
}

Now it's time to set up the functions that you want the DJ to be able to call to, which will tell all the clients what to do. Since there are two lines that we want audience members to be able to listen to (as the DJ mixes songs) you need two functions that will change the song that is playing in each of these. These first two functions are almost exactly the same; they just refer to different stream names.

In this case, you have set the functions up on the Client object as a prototype function. You could also choose to attach each function to the client object as they connect up. Personally I find this method is easier. It's not a big issue in this application to apply the functions to every single client that connects to your application in a blanket prototype style. However, if you are building an application where you need to apply many functions to one client (like an administrator of the application) then it is best just to attach the functions directly to that specific client. That approach is also more secure because it prevents potentially malicious users from calling functions within your application.

At this point I've switched styles of informing clients of a certain action. In the code below, I use the send() method of a shared object to communicate the volume of the streams to the clients. This is another good tool to have in your developer box—because it allows you to do certain things, such as call a function on the client side from the server. When you use the send() method, you are calling a function that is attached to the shared object on the client side if that client is connected to the shared object. In this case, if the user isn't subscribed to the shared object and doesn't have the function declared, then the function won't get called for the user. You could use the broadcastMsg() method again but I prefer to separate the functionality in this way to improve the application's performance:

Client.prototype.setDJ1Song = function(song){
   //setting a song here, stop playing the previous one
   application.djStream1.play(false);
   //play the MP3 file
   application.djStream1.play("mp3:" + song, 0, -1 ,true);
}

Client.prototype.setDJ2Song = function(song){
   //setting a song here, stop playing the previous one
   application.djStream2.play(false);
   //play the MP3 file
   application.djStream2.play("mp3:" + song, 0, -1 ,true);
}

//when the DJ changes the volume of the lines then this function is called
Client.prototype.setVolumeOfLines = function(v1, v2){
   //set the server side values
   application.dj1Volume = v1;
   application.dj2Volume = v2;
   //send the values to all the users that are subscribed to the shared object
   application.volSO.send("setVolumeOfLines", v1, v2);
}

This completes the server-side code for the DJ application. Now let's look at the client side and add the features for the DJ interface.

Page 3 of 5

Previous Page

Next Page