This site is now just an archive over the rise and fall of Flash. The domain flashmagazine.com is available for sale
Login | Register
Building A Flash MP3 player with the Teleo Introductory Module

Building A Flash MP3 player with the Teleo Introductory Module

In this article, David Vogeleer shows you how to create a Flash MP3 player with all of the controls being external with the Teleo Intro module and some basic switches.

Why Teleo and Flash?

When Flash began, it was mostly a vector animation tool, but as time progressed, Flash became more of a development platform with its own ECMA based language ActionScript and its ability to work with several server side languages such as PHP, .NET and Cold Fusion. Teleo modules allow Flash developers to take their applications to a whole new place, beyond the computer screen.

With Teleo modules, Flash developers can create the logic and functionality in Flash as well as certain visual aspects, and then create the controls with Teleo modules and basic electronic parts.

What do I need to get started?

Before you get started with this tutorial, you will need the following:

  • Flash MX 2004 (Regular or Pro) or Flash MX as well as a basic understanding of Flash and ActionScript
  •  

  • A few MP3s (you can download a few here)
  •  

  • Teleo Flash Component set which includes for both Mac and PC:

  • - Flash component set
    - USB driver
    - XML Socket server
    - Sample file

  • Teleo Introductory module set which includes:

  • - Introductory module
    - Power supply
    - USB cable

  • 22 gauge wire (you can find at any local electronic store)
  •  

  • Toggle switch (you can find at any local electronic store)
  •  

  • Two push button switches (you can find at any local electronic store)
  •  

  • Two potentiometers and knobs (you can find at any local electronic store)


  • First things first, lets set up the introductory module and switches.

    The external controls and wiring details

    In this section, I will go over the details of the wiring for the controls. It will not go over the basics of wiring up the Teleo Introductory module. For more on the basics of the Teleo Introductory module, click here.

    Take a look at the basic wiring layout in the figure below.

    image

    As you can see, we take the first 5+ power outlets and split it to wire both of the push button controls, and then wire each push button to its associated digital input connections (Din0 is the Fast Forward/Next button and Din1 is the Rewind/Previous button). After that, take the second 5+ power outlet and split it three ways and wire it to the toggle switch and both potentiometers. The toggle switch can be wired directly to the first analog input connection.

    Note: Normally, you would use a toggle switch in conjunction with the Digital Input section, but as there are only two available spots in the Digital in section, and they are both being used, we will use the Analog Input section for the toggle switch.

    Once the toggle switch is wired, you will then need to finish wiring the potentiometers. You will have to wire each of them to the ground and to their associated analog input connections. (Ain1 is the volume control and Ain2 is the pan control)

    imageThis is an actually picture of what it might look like when wired (little messy):

    I used alligator clips to make it easier for me to quickly test different devices.








    Now that the wiring is done, we need to create the directory, which holds the MP3s.

    When you create the Flash movie, where ever you save it will need a subdirectory called &quotmp3" which will hold all the mp3s we will be using.

    After the directory with mp3s is ready, we can move onto Flash.

    Building the Flash MP3 player

    This section will cover all the necessary Flash pieces and ActionScript

    1. First, create a new Flash file (File/New)

    Note: If you are using Flash 2004 (Regular or Pro) you will want to change your publish settings to Flash Player 6, and ActionScript 1.0 as the Teleo components are compiled for this version.

    2. Save the new Flash file in the same directory where the &quotmp3" sub-directory is held

    3. Set the stage size as 300x100 and 30 fps (Frames Per Second)

    4. After that, you will want to create 2 new layers so that you have 3 in total and they are named from top to bottom like this:

  • actions - where all ActionScript will reside
  •  

  • teleo - where all the Teleo components will reside
  •  

  • content - where the visual Flash pieces will reside


  • 5. In the content layer, create 4 dynamic text fields with the following instance names:

  • title_txt
  •  

  • volume_txt
  •  

  • pan_txt
  •  

  • pos_txt


  • You can also put static text fields beside them labeling what they are like the figure below.

    image

    Now we have the all the visual elements on the stage we need, lets move to the Teleo components we will be working with.
    1. In the teleo layer, drag the following components onto the stage from the Components panel:

  • t_intro_ain
  •  

  • t_intro_din
  •  

  • Teleo Manager
  •  

  • XMLSocketConnector
  •  

  • XMLTranslator


  • Note: In this project, the interfaces for these components will not be visible at runtime, but if you want them to be, you must drag their associative interface component onto the stage for both the t_intro_ain and the t_intro_din component.

    2. Now remove the XMLSocketConnector and the XMLTranslator from the stage because they will be brought back in at runtime by the Teleo Manager

    3. Create a second t_intro_din component by copying and pasting

    4. Create two copies of the t_intro_ain component by copying and pasting

    5. Give the Teleo Manager component the instance name &quotmyManager" and keep the default settings

    6. Name the first t_intro_ain component &quotain0" and set the manager component parameter to &quotmyManager" and leave the other parameters to their default settings, then name the other two t_intro_ain components &quotain1" and &quotain2" accordingly, and set their manager parameter to &quotmyManager" as well

    7. Name the first t_intro_din component &quotdin0" and set the manager component parameter to &quotmyManager" and leave the other parameters to their default settings and then name the other t_intro_din component &quotdin1" and set the same parameters

    8. Make sure all the components are off stage (not for any reason in particular, just so it is easier to see what will be on the stage at runtime)

    Also, I shrunk the components so they would not take up as much screen space.

    Now we have the visual elements and the components, the last thing we need to do is to add the ActionScript.

    1. In the actions layer, open the actions panel in the frame

    2. The first thing we will want to do is to initialize the components with the XML sever, and set some initial text for a couple of the text fields, so add these lines:

    //initialize the connections
    if(!init){
       din0.create();
       din1.create();
    
       ain0.create();
       ain1.create();
       ain2.create();
       //initial state of some text fields
       volume_txt.text = 75;
       pan_txt.text = 0;
    
       //set init to true
       init=true;
    }


    3. Next we create a function that will take the milliseconds of our mp3s and convert it to readable time output. We also instantiate a couple variables and the array of mp3s:

    //function for formatting milliseconds into actual time
    function convert(mSecs){
     var seconds = Math.round(mSecs/1000);
    
     var minutes = Math.floor(seconds/60);
     var leftOver = (seconds-(minutes*60));
     if(leftOver<10){
      leftOver = "0"+leftOver;
     }
     return (minutes+":"+leftOver);
    
    }
    
    //main position that other elements read from
    var mainPos = 0;
    //this varibale holds the difference between next and FF in milliseconds
    var dTime = 500;
    //create the array to hold the mp3's
    mp3_array = new Array("flashMag.mp3","evo-1.mp3","trance-1.mp3");
    //the variable that holds the length of the mp3_array
    
    var mp3Length = mp3_array.length;
    //variable to hold which mp3 is playing
    var song = 0;



    If you have your own mp3’s, you will need to put them in the array, these mp3’s are part of the sample files you can download at the end of this article.
    4. After that, we need to create the sound object to be able to play mp3’s. We also create an event that is fired whenever the song reaches the end. It will go to the next song in the list.

     

    //the sound object we will use throughout the application
    mp3_sound = new Sound();
    
    //this event is triggered when the mp3 reaches the end of the song
    mp3_sound.onSoundComplete = function() {
    	//this little bit of code checks to see which mp3 should play next
    	if (song == mp3Length-1) {
    		song = 0;
    	} else {
    		song++;
    	}
    	//resets the current position of the song to the beginning
    	mainPos = 0;
    	//sets the new song's name to the text field
    	title_txt.text = mp3_array[song];
    
    	//load the new song into the sound object
    	mp3_sound.loadSound("mp3/"+mp3_array[song]);
    	//this event is triggered when the song is completely loaded
    	mp3_sound.onLoad = function() {
    		//check to see if it should play automatically (if the toggle is true)
    		if (ain0.valueGet() == 31) {
    
    			//get the current length of the song
    			var dur = convert(mp3_sound.duration);
    			//start playing
    			mp3_sound.start(mainPos,0);
    			//keep track of the position in the song
    			ain0.onEnterFrame = function() {
    
    				pos_txt.text = convert(mp3_sound.position)+" / "+dur;
    			};
    		}
    		//destroy this event because it is no longer needed 
    		delete this.onLoad;
    	};
    
    };
    //load the first song in
    mp3_sound.loadSound("mp3/"+mp3_array[song]);
    //put the first song in the text field
    title_txt.text = mp3_array[0];



    5. The next step is to create the listener object for the toggle button which will control the play/pause functionality:

     

    //create the object to listen to the toggle button
    playPause = new Object();
    
    //create the event callback for the object receives the event
    playPause.reportSwitchState = function(iValue) {
    	//if the toggle is true
    	if (iValue == 31) {
    		//get the total length of the song
    		var dur = convert(mp3_sound.duration);
    		//play at the current position
    
    		mp3_sound.start(mainPos,0);
    		//constantly update the text field with the position in the song
    		ain0.onEnterFrame = function() {
    			pos_txt.text = convert(mp3_sound.position)+" / "+dur;
    		};
    	} else {
    
    		//if the toggle is false get the position it was paused at
    		mainPos = (mp3_sound.position/1000);
    		//stop the song
    		mp3_sound.stop();
    	}
    };
    
    //add the event listener to the component
    ain0.addCallback("ValueChanged",playPause,"reportSwitchState");



    What we did in the above code was to create a generic object that will be the listener object for the toggle switch. We then created an event callback for the reportSwitchState event so that every time the toggle button is toggled, it will trigger an event for this object and run the associated code. And the code that is being run is detecting whether the toggle is turned on or off. If the toggle is turned on, it will play the mp3 from its current position (defaulted to 0 so it will initially start in the beginning of the song), and then it will update the position text field to constantly display the current position. If the toggle is turned off it will grab the current position (so it can start back at that position) and stop the mp3. Finally we added the event callback to the first t_intro_ain component with the instance name of &quotain0&quot.

    6. Now we have the code for the play/pause toggle switch, we need the code for the fast forward and rewind push buttons. They are a good deal more complex because of what they are doing. They do not just fast forward and rewind, they can also skip to the next or previous song in the list depending on how long the user suppresses the button. Earlier we created a variable called dTime which holds the amount of milliseconds between a &quotnext" call and a &quotfast forward" call (defaulted to 500 milliseconds, or half a second). Add the following code for the fast forward / next button:

     

    //event for fastforward
    ff = new Object();
    ff.reportSwitchState = function(iValue) {
    	//stop the sound from playing
    	mp3_sound.stop();
    	if (iValue == 31) {//when the button is pressed
    		var dur = convert(mp3_sound.duration);
    
    		//get the current time
    		tempTime = getTimer();
    		// display the new position as you fast forward
    		myManager.onEnterFrame = function() {
    			//make sure the button is supressed long enough
    			if (getTimer()-tempTime>dTime) {
    
    				if (mainPos<(mp3_sound.duration/1000)-1) {
    					mainPos++;
    				}
    				pos_txt.text = convert(mainPos*1000)+" / "+dur;
    			}
    		};
    
    	} else {//when the button is released
    		//destroy the running event
    		delete myManager.onEnterFrame;
    		//check to see how long the button was pressed
    		if ((getTimer()-tempTime)<=dTime) {
    			//go to the correct song
    
    			if (song == mp3Length-1) {
    				song = 0;
    			} else {
    				song++;
    			}
    			//reset the position back to the beginning
    			mainPos = 0;
    			//load the next song
    			mp3_sound.loadSound("mp3/"+mp3_array[song]);
    			//set the text field
    			title_txt.text = mp3_array[song];
    			//creat the event for when the mp3 loads
    
    			mp3_sound.onLoad = function() {
    				//get the length of the song
    				var dur = convert(mp3_sound.duration);
    				//this checks if it should play automatically
    				if (ain0.valueGet() == 31) {
    					mp3_sound.start(mainPos,0);
    
    					myManager.onEnterFrame = function() {
    						pos_txt.text = convert(mp3_sound.position)+" / "+dur;
    					};
    				} else {
    					pos_txt.text = convert(mp3_sound.position)+" / "+dur;
    				}
    
    				//destroy the unneccesary event
    				delete this.onLoad;
    			};
    		} else {//if when the button is released, it was held down beyong 500 milliseconds
    			//check to see if the song should play
    			if (ain0.valueGet() == 31) {
    
    				mp3_sound.start(mainPos,0);
    			}
    		}
    	}
    };
    //add the event listener to the component
    din0.addCallback("ValueChanged",ff,"reportSwitchState");


    In the preceding code, like before, we first create the listener object, and then set an event callback to that listener object. Inside the event callback, we use conditional statements to check not only whether the button is pressed or released, but also how long the button is pressed. If the button is suppressed for less than 500 milliseconds (half a second) the callback will move to the next song, but if the button is pressed for more than 500 milliseconds, it will begin to fast forward through the song.

    7. The rewind / previous button is very similar to the fast forward / next button except it rewinds or moves to the previous song depending on how long the button was pressed.

     

    //event for rewinding
    rw = new Object();
    rw.reportSwitchState = function(iValue){
     mp3_sound.stop();
     if (iValue){
    
      tempTime = getTimer();
      myManager.onEnterFrame=function(){
       if(getTimer()-tempTime > dTime){
        if(mainPos >= 1){
         mainPos --;
        }
    
        pos_txt.text = convert(mainPos*1000)+" / "+convert(mp3_sound.duration);
       }
      }
     }else{
      delete myManager.onEnterFrame;
      if((getTimer()-tempTime)<=dTime){
    
       if(song == 0){
        song = mp3Length-1;
       }else{
        song--;
       }
       mainPos=0;
    
       mp3_sound.loadSound("mp3/"+mp3_array[song]);
       title_txt.text=mp3_array[song];
       mp3_sound.onLoad=function(){
        var dur = convert(mp3_sound.duration);
        if(ain0.valueGet()==31){
         mp3_sound.start(mainPos,0);
    
         myManager.onEnterFrame=function(){
          pos_txt.text = convert(mp3_sound.position)+" / "+dur;
         }
        }else{
         pos_txt.text = convert(mp3_sound.position)+" / "+dur;
        }
    
        delete this.onLoad;
       }
      }else{
       if(ain0.valueGet()==31){
        var dur = convert(mp3_sound.duration);
        mp3_sound.start(mainPos,0);
    
        myManager.onEnterFrame=function(){
         pos_txt.text = convert(mp3_sound.position)+" / "+dur;
        }
       }
      }
     }
    
    }
    //add the event listener to the component
    din1.addCallback("ValueChanged", rw, "reportSwitchState");



    Again, note the similarities between this and the fast forward / next button. The only major difference is it rewinds or goes to the previous song. (that’s why it is not commented)

    8. Now the play/pause and the push button controls will work, the next step is to do the volume and pan controls. The two controls we are using are the potentiometers and they will be able to adjust the volume of the Sound object from 0 to 100 and the pan of the Sound object from -100 to 100.

     

    //<--this section is for volume and panning-->
    
    vControl = new Object();
    //create the event callback for the object recieves the event
    vControl.reportSwitchState = function(iValue){
        //get the volume amount
        var vAmount = Math.floor((iValue/31)*100);
        //set the volume and text
        mp3_sound.setVolume(vAmount);
        
        volume_txt.text=vAmount;
    }
    //add the event listener to the component
    ain1.addCallback("ValueChanged", vControl, "reportSwitchState");
    
    //this object is for the panning
    pControl = new Object();
    //create the event callback for the object recieves the event
    pControl.reportSwitchState = function(iValue){
    
    //get the correct panning amount
    var myPan = Math.floor(((15.5 - iValue)/15.5)*-100);
    //set the pan and the text
    mp3_sound.setPan(myPan);
    pan_txt.text = myPan;
    }
    
    //add the event listener to the component
    ain2.addCallback("ValueChanged", pControl, "reportSwitchState");



    Because the max value being returned will be 31, we use a little math to create the correct volume and pan amount.

    That’s it for the ActionScript, now all we have to do is test the movie.

    Testing the MP3 player

    Before you test the player, make sure you have installed the driver for the module. Also make sure that the module is connected to the computer through USB and is plugged in. Make sure all the wires are secured to the module and their associated control devices (push buttons, potentiometers and toggle switch).

    Once that is all done, go ahead and start the XML socket server from the terminal. (You will find directions on how to do this from the software download at makingthings.com).

    After the XML server is running, you can then test your application. You can adjust the volume and pan even before you play any songs.

    The last step would be to mount to the controls instead of having them just laying out (like I do).

    Downloads:

  • Sample MP3’s
  •  

  • Flash 2004 file
  •  

  • Flash MX file


  • Related Articles:

    Making Things: the coolest tinker toys ever

     

    Get new stories first

    Click to follow us on Twitter!

     

    Comments

    No comments for this page.

    Submit a comment

    Only registered members can comment. Click here to login or here to register