ハイブリットアプリ開発でオーディオファイルの再生を便利にするプラグインを使う

Apache Cordovaで本格スマホアプリに挑戦しよう 第8回

オーディオファイルを再生する流れ

　まずは、図1のようにボタンをクリックしたときに、クリック音などを鳴らすような簡単なケースを用いて基本となるAPIを紹介します。今回もサンプルコードがAngularJSで記述していますが、実際のプラグインの呼び出しはAngularJSには依存していませんのでご安心下さい。

図1　クリック時に音を鳴らすサンプルアプリのキャプチャ

　また、今回はサンプルコード内には権利の都合上、オーディオファイルは含めておりません。オーディオファイルはご自分で用意するか、以下のようなサイトなどから自分のアプリに合う音声データなどを探してみることも面白いとは思います。

• フリーBGM（音楽素材）無料ダウンロード｜DOVA-SYNDROME

　次に示すのはこのプラグインのコンストラクタで、表1にその引数を示します。

Media(src, successCallback, errorCallback, statusCallback);

表1　コンストラクタの引数

変数名	説明
src	再生（もしくは録音）するファイル名を指定します
successCallback	再生、もしくは録画が終了したときに呼ばれるコールバック関数（省略可）
errorCallback	エラーが発生したときのコールバック関数（省略可）
statusCallback	ステータスが変わった時のコールバック関数（省略可）

　ここで注意すべきことは、src引数で指定するファイルのパスです。MP3などiOSでもAndroidでもいずれの環境でも再生できるフォーマットであれば問題ありませんが、OSやそのOSのバージョンにより利用できないコーデックがある場合があります。

　iOSであれば、「Apple Developer サイト」、Andoridであれば「Android Developerサイト」を参照すると良いでしょう。ただし、必ず実機でも確認することをおすすめします。

　また、ボタンをクリックした時に指定するオーディオファイルを再生するサンプルがリスト3のようになります。

リスト3　オーディオファイルを再生する基本的な流れ（js/controllers/ClickSoundController.jsより抜粋）

function ClickSoundPlayController($scope){
    var src;
    //  （1） iOSの場合には、絶対パスでは指定しないで www以下のファイルにアクセスできる
    if(device.platform == 'iOS'){
        src = "res/click_01.mp3";
    }
    else {
        // （2） Androidの場合には、絶対パスを指定するのでここではFileプラグインを使って指定する
        src = cordova.file.applicationDirectory + "www/res/click_01.mp3";
    }
    // （3） コンストラクタの実行
    var media = new Media(src);
    //  ボタンがクリックされた時
    $scope.clickAndPlay = function(){
        media.play(); // （4） 再生処理
    };
    $scope.$on('$destroy',function(){
        media.release();  // （5） リリース処理
    });
};

　最初に再生するオーディオファイルのパスを指定します。実際のオーディオファイルはwww/res/click_01.mp3というWebリソース内のパスに保存していますが、iOSの場合にはデフォルトでwww以下のパスを検索しますので、（1）のようにwww以下からの記述方法で指定します。そして、Androidの場合には絶対パスでの指定が必要なため、（2）のようにFileプラグインを利用してwww以下のパスを指定します。

　iOSとAndroidで同じ指定をしてもエラーになってしまい、そのため、OS毎に記述方法を分けています。プラグインのドキュメントを参照しても、具体的にどのようなパスの記述方法が各OS毎に必要であるかの記載がなく、各OS毎の実装に依存していると思われ、ある程度、トライ・アンド・エラーを繰り返しながら試してみる必要があるようです。

　続いて、（3）ではMeidaプラグインのコンストラクタを実行しています。この際、各コールバック関数の指定は省略しています。そして、（4）ではplayメソッドで再生を開始し、（5）ではrelease処理をしています。

　このようにオーディオファイルを再生するだけであれば、それほど面倒なく再生ができます。

　また、iOSの場合には、リスト4で示すようにplayメソッドに引数を指定することもできます。

リスト4　playメソッドの引数（iOSの場合）

media.play({ numberOfLoops: 3 })

　このように指定できるプロパティの一覧が表2です。

表2　コンストラクタに指定できるプロパティ

プロパティ	説明
numberOfLoops	オーディオファイルを何回繰り返して再生するか
playAudioWhenScreenIsLocked	画面がロックされた状態でも再生を継続するかの指定（デフォルト:true)