This is the third tutorial in the Apollo JukeBox mp3 player series.The first one being Creating a mp3 player in Apollo and Flex 2 and the second one is Making the mp3 player Window Transparent. As this tutorial uses and modifies the code used in Making the mp3 player Window Transparent tutorial, please go through it before proceeding further.

In this tutorial we will use the Native Window properties and methods to display id3 tag info of an mp3 file.

 

See the screenshot of the app belowApollo JukeBox_windowing
This process of feature addition can be divided into 4 smaller tasks as follows:

Task 1: Creating the native window

Task 2: Creating the text field in the window to display id3 info

Task 3: Retrieving the id3 info for display

Task 4: Preventing the user to display null value in window

 

Task 1: Creating a native Window using NativeWindowInitOption() feature.

 

Creating a native window in Apollo is easier than you think.

Open the ApolloJukeBox.mxml file in Flex Builder.

Type the following code before </Panel> tag.

<mx:Button x=”164″ y=”42″ label=”ID3″ fontFamily=”Georgia” fontSize=”12″ fontStyle=”italic” click=”createNewWindow()” id=”snId”/>

This creates a button with id as “snId” and sets its label as “ID3”.When this button is clicked it calls “createWindow()” function.

Now lets define the custom createWindow() function.

Type the following code before the </mx:Script> tag.

private function createNewWindow():void{

var wOptions:NativeWindowInitOptions = new NativeWindowInitOptions();

wOptions.systemChrome = NativeWindowSystemChrome.STANDARD;

wOptions.transparent = false;

var newWindow:NativeWindow = new NativeWindow(true, wOptions);

This will open a blank window displaying standard chrome (OS dependent) and it will have opaque background.

 

Task 2 Creating the text field in the window to display id3 info

To display the id3 info of selected mp3 file, modify the above code to look like this.

import flash.display.Sprite;

import flash.text.TextField;

private function createNewWindow():void{

var wOptions:NativeWindowInitOptions = new NativeWindowInitOptions();

wOptions.systemChrome = NativeWindowSystemChrome.STANDARD;

wOptions.transparent = false;

var newWindow:NativeWindow = new NativeWindow(true, wOptions);

var field:TextField = new TextField();

field.borderColor = 0x000ccc;

field.autoSize = TextFieldAutoSize.CENTER;

field.text = “Album:” + songId3al + “\n” +”Artist:”+ songId3at + “\n” +”Genre:” + songId3gn + “\n” +”Songname:” + songId3sn + “\n” + “Track:” + songId3tr + “\n” + “Year:” + songId3yr + “\n” + “Comments:” + songId3ct;

newWindow.stage.addChild(field);

}

Here a new text field is created and it is added to the window , otherwise it will not be displayed in the window. The id3 info is passed to the text property of the text field instance as string.

 

Task 3: Retrieving the id3 info for display

 

Type the following code for declaring variables required for storing the id3 info.

[Bindable]

private var songId3al:String;

[Bindable]

private var songId3at:String;

[Bindable]

private var songId3gn:String;

[Bindable]

private var songId3sn:String;

[Bindable]

private var songId3tr:String;

[Bindable]

private var songId3yr:String;

[Bindable]

private var songId3ct:String;

Now modify the startPaly() function as follows:

private function startPlay():void {

_sound = new Sound(new URLRequest(songURL));

_channel = _sound.play();

_sound.addEventListener(Event.ID3, onID3);

}

Define the event listener function onID3() as follows

public function onID3(event:Event):void {

songId3al = _sound.id3.album;

songId3at = _sound.id3.artist;

songId3gn = _sound.id3.genre;

songId3sn = _sound.id3.songName;

songId3tr = _sound.id3.track;

songId3yr = _sound.id3.year;

songId3ct = _sound.id3.comment;

}

Once the id3 info is loaded the sound instance will call onID3() function which will assign various id3 properties to the variables.

Task 4: Preventing the user to display null value in window

 

As id3 info will not be assigned to the variables until unless the mp3 file is played, clicking the id3 button will display null value in the window.This will not be a good experience for the user.So we have to keep the button disable until the selected mp3 file is played

To do this the code needs to be modified at three places in three steps.

Step 1: Change the code from

<mx:Button x=”164″ y=”42″ label=”ID3″ fontFamily=”Georgia” fontSize=”12″ fontStyle=”italic” click=”createNewWindow()” id=”snId”/>

To

<mx:Button x=”164″ y=”42″ label=”ID3″ fontFamily=”Georgia” fontSize=”12″ fontStyle=”italic” click=”createNewWindow()” enabled=”false” id=”snId”/>

Step 2: Change the startPlay() function from

private function startPlay():void {

_sound = new Sound(new URLRequest(songURL));

_channel = _sound.play();

_sound.addEventListener(Event.ID3, onID3);

}

To

private function startPlay():void {

_sound = new Sound(new URLRequest(songURL));

_channel = _sound.play();

_sound.addEventListener(Event.ID3, onID3);

snId.enabled = true;

}

Step 3: Change the stopPlay() function from

public function stopPlay():void {

_channel.stop();

}

To

public function stopPlay():void {

_channel.stop();

snId.enabled = false;

}

We are done.

Now save the ApolloJukeBox.mxml file and press Run to compile the file.

Now test the app with a properly tagged mp3 file to see id3 info in a new window.

Now export the app and distribute it.

 

Something for you to do:

Modify the code so that the native window closes automatically when the user clicks “Stop” button to stop the mp3 being played.

(Hint: Follow Rich Tretola’s Windowing with Apollo tutorial.)

Download Source

Download Application

Alternative Download link (use it when the above download link does not work).

http://rapidshare.com/files/23012587/ApolloJukeBox3_source.zip.html

 

Advertisements