特集記事

Adobe AIRでクールなMP3プレーヤーを作ってみる

AIRによる簡単なデスクトップアプリ製作を通してMXML/ActionScriptを学ぶ

2008/06/18 14:00

ポスト

Page 1
Page 2

各コンポーネントの初期化

　まず、アプリケーションを起動し、最上位のコンポーネントWindowedApplicationが呼ばれると、関数initApp()が実行されます。ここでは、File、Sound、SoundChannel、Sprite、UIComponentといったオブジェクトの生成と初期化を行っています。

各オブジェクトのアプリケーション内での役割

オブジェクト	役割
File	ファイルシステムへの情報の取得
WindowedApplication	AIRアプリケーションを構築するためのコンテナを定義
Sound	サウンド関連のデータへのアクセス
SoundChannel	アプリケーション内でのサウンドの制御
Sprite	グラフィックの表示
UIComponent	すべてのビジュアルコンポーネントの基本クラス

　Sprite、UIComponentはヴォリュームの変化を視覚的に表現するために使います。

　Adobe AIRで画像を表示するには、WindowedApplicationにUIComponentを追加（addChild）して、さらにUIComponentにSpriteオブジェクトを追加（addChild）する必要があります。次のコードでUIの設定を行っています。

spriteRight = new Sprite();
spriteLeft = new Sprite();
uic = new UIComponent;
uic.x=122;
uic.y=40;
this.addChild(uic);
spriteRight.graphics.beginFill(0x0000ff);
spriteRight.graphics.drawRect(0, 0, 0.1, 20 );
spriteRight.graphics.endFill();
spriteLeft.graphics.beginFill(0x0000ff);
spriteLeft.graphics.drawRect(0, 22, 0.1, 20 );
spriteLeft.graphics.endFill();
uic.addChild(spriteRight);
uic.addChild(spriteLeft);

　そしてFileオブジェクトにファイルを選択したときに発生するイベント（Event.SELECT）のイベントハンドラ、WindowedApplication本体にアプリケーションの実行中に連続して発生するイベント（Event.ENTER_FRAME）のイベントハンドラを、それぞれ付け加えています。

file.addEventListener(Event.SELECT,selectHandler);
this.addEventListener(Event.ENTER_FRAME,enterHandler);

MP3ファイルの処理

　ファイル選択時のイベントハンドラselectHandlerでは、次の処理を行っています。

soundPath = file.nativePath;
sound = new Sound();
sound.addEventListener(Event.COMPLETE,loadHandler);
sound.load(new URLRequest(soundPath));

　変数soundPathに選択されたファイルのパスを代入しておきます。変数soundPathはMP3を再生するのに使います。そしてsoundオブジェクトを初期化し、ファイルの読み込みが完了した際のイベントハンドラloadHandlerを追加します。そして先ほどの変数soundPathを用いてsoundオブジェクトにMP3ファイルをロードします。

MP3ファイルの再生

　次は、関数musicPlay()です。ボタンオブジェクトplayBtnをクリックしたときに呼び出されます。

channel = sound.play();
isPlaying = true;

　先ほどMP3をロードしたsoundオブジェクトで、サウンドを再生します。この時の戻り値の型はSoundChannelで、これをchannelオブジェクトに代入しています。これにより、channelオブジェクトから現在のサウンドのボリュームなどの情報を取得できるようになります。それと同時にisPlayingをtrueにします。

ボリュームレベルの表示

　enterHandlerを見てみましょう。

spriteRight.width = channel.rightPeak * 100;
spriteLeft.width  = channel.leftPeak  * 100;

　この関数内ではinitApp()によってアプリケーションが初期化された際に作られた図形spriteRight、spriteLeftの幅を、MP3の音量に応じてリアルタイムに変化させる処理を行っています。

再生の停止

　musicStop()では、musicPlay()が実行されたときに取得したchannelオブジェクトを利用して、サウンドの再生をストップします。ボタンオブジェクトstopBtnが押されることによって呼び出されます。isPlayingはfalseにします。

if(isPlaying == true) {
    channel.stop();
    titleText.text = "";
}
isPlaying = false;

MP3ファイルの選択

　selectFile()はボタンオブジェクトopenBtnが押された際に呼び出されます。

musicStop();
file.browse();
isPlaying = false;

　再生中のサウンドをストップし、ファイル選択のためのダイアログを表示します。isPlayingフラグはfalseにします。

インストーラの作成

　以上のように「AirMusicPlayer.mxml」を書き換えてコンパイルし、動作確認ができたら、アプリケーションのインストーラに必要な署名ファイルを作りましょう。以下のコマンドで作ります。

adt -certificate -cn SelfSigned 1024-RSA music.pfx password

　ここでは、「1024-RSA」という証明書鍵を用いて、「password」というパスワードで、「music.pfx」という署名ファイルを作ったことになります。

　それでは、次のようにコマンドを実行してインストーラの製作してみましょう。

adt -package -storetype pkcs12 -keystore music.pfx
 AirMusicPlayer.air AirMusicPlayer-app.xml AirMusicPlayer.swf

　ここで「password:」とパスワードを聞いてくるので先ほど指定した「password」というパスワードを入力してください。成功すると、「AirMusicPlayer.air」というインストーラーが同じディレクトリに生成されます。

Adobe AIRアプリケーションの実行

　「AirMusicPlayer.air」をダブルクリックするとインストール画面が現れ、作成したAdobe AIRアプリケーションをインストールすることができます。インストールが完了したら、［スタート］-［すべてのプログラム］-［AirMusicPlayer.air］を選択して、インストールしたプログラムを実行してみましょう（Windows XPの場合、環境によって異なります）。