Using AudioPlayback in Flash CS3

In Getting Started, we created a simple AudioPlayback component with a form field to input the audio url. In this example, we will allow the user to populate a playlist through the form field. The player will then cycle through the songs on the playlist.

For starters, let's go ahead and import all the classes we will need for the tutorial.

import com.yahoo.astra.fl.controls.AudioPlayback; import com.yahoo.astra.fl.events.MediaEvent; import fl.controls.Button; import fl.controls.CheckBox; import fl.controls.TextInput; import fl.events.ComponentEvent;

We will need the following variables

• continuosPlay indicates whether the player will cycle back to the first song after the last one is played
• playlist is an array that will hold all of the audio urls in the playlist
• counter will be used to track the current song

var counter:int = 0; var playlist:Array = []; var continuousPlay:Boolean;

We will need the following component for our application:

• playlistInput - a TextInput field for the user to enter songs to add to the playlist.
• playlistButton - a Button to submit the input into the playlist
• loadButton - a Button to load the playlist into the player
• nextButton - a Buttonto manually advance the playlist
• previousButton - a Button to move to the previous song
• continuosPlayToggle - a CheckBox that indicates whether continousPlay is set to true.

//button for moving back in the playlist var previousButton:Button = new Button(); previousButton.label = "<< PREVIOUS"; previousButton.name = "previous"; previousButton.x = padding; previousButton.y = 53; previousButton.addEventListener(MouseEvent.CLICK, clickHandler); addChild(previousButton); //button for moving forward in the playlist var nextButton:Button = new Button(); nextButton.label = "NEXT >>"; nextButton.name = "next"; nextButton.x = 295; nextButton.y = 53; nextButton.addEventListener(MouseEvent.CLICK, clickHandler); addChild(nextButton); //checkbox for toggling the value of continuousPlay var continuousPlayToggle:CheckBox = new CheckBox(); continuousPlayToggle.label = "continuous play"; continuousPlayToggle.labelPlacement = "bottom"; continuousPlayToggle.x = 150; continuousPlayToggle.y = 53; continuousPlayToggle.addEventListener(Event.CHANGE, toggleContinuousPlay); continuousPlayToggle.setStyle("textFormat", new TextFormat("Verdana", 9, 0xcccccc)); continuousPlayToggle.setStyle("textPadding", 2); addChild(continuousPlayToggle); continuousPlay = continuousPlayToggle.selected; //Add text field to add media urls var playlistInput:TextInput = new TextInput(); playlistInput.width = 300; playlistInput.height = 22; playlistInput.x = 5; playlistInput.y = 85; addChild(playlistInput); //Add playlist button var playlistButton:Button = new Button(); playlistButton.width = 80; playlistButton.height = 22; playlistButton.x = 310; playlistButton.y = 85; playlistButton.label = "Load Url"; playlistButton.addEventListener(MouseEvent.CLICK, addPlaylistItem); addChild(playlistButton); //Add load Playlist Button var loadButton:Button = new Button(); loadButton.width = 100; loadButton.height = 22; loadButton.x = 295; loadButton.y = 140; loadButton.label = "Load Playlist"; loadButton.addEventListener(MouseEvent.CLICK, loadPlaylist); addChild(loadButton); //Creat the audioPlayback component var audioPlayback = new AudioPlayback(this); audioPlayback.width = this.stage.stageWidth - (padding*2); audioPlayback.x = padding; audioPlayback.y = padding; //Add an event handler for the Media ended event audioPlayback.addEventListener(MediaEvent.MEDIA_ENDED, mediaEndedHandler);

The main function for managing the playlist is playClips. It moves to the next or previous song based on the position in the playlist, the increment parameter and the value of continousPlay

//Moves the up and down in the playlist based on the increment parameter function changeClips(increment:Boolean):void { var len:int = playlist.length-1; if(increment) { if(counter < len) { counter++; audioPlayback.loadMedia(playlist[counter]); } else if(continuousPlay) { counter = 0; audioPlayback.loadMedia(playlist[counter]); } } else { if(counter > 0) { counter--; audioPlayback.loadMedia(playlist[counter]); } else if(continuousPlay) { counter = len; audioPlayback.loadMedia(playlist[counter]); } } }

Next we'll add the event handlers.

For managing the playlist we have event handlers attached to the AudioPlayback component's mediaEnded event as well as the previous and next buttons.

/Event handler for the MediaEvent.MEDIA_ENDED event function mediaEndedHandler(event:MediaEvent):void { changeClips(true); } //Event handler for the buttons function clickHandler(event:MouseEvent):void { var increment:Boolean = event.target.name == "next"; changeClips(increment); }

Finally, we have handlers for the continuous play check box and the playlistButton and loadButton buttons

//Continuous play checkbox event handler - sets the value of continuousPlay function toggleContinuousPlay(event:Event):void { continuousPlay = event.target.selected; } //Adds a url from the playlistInput text field to the playlist array function addPlaylistItem(event:MouseEvent):void { playlist.push(playlistInput.text); playlistInput.text = ""; } //Loads the first item in the playlist. function loadPlaylist(event:MouseEvent):void { audioPlayback.loadMedia(playlist[counter]); }

Example: AudioPlayback with Playlist

Download the FLA file.

For additional information, please take a look at the Examples section for functional demonstrations and the ActionScript 3.0 Class Reference for full details on every property, method, and style available to the AudioPlayback component.