オーディオファイルを再生する流れ
まずは、図1のようにボタンをクリックしたときに、クリック音などを鳴らすような簡単なケースを用いて基本となるAPIを紹介します。今回もサンプルコードがAngularJSで記述していますが、実際のプラグインの呼び出しはAngularJSには依存していませんのでご安心下さい。
また、今回はサンプルコード内には権利の都合上、オーディオファイルは含めておりません。オーディオファイルはご自分で用意するか、以下のようなサイトなどから自分のアプリに合う音声データなどを探してみることも面白いとは思います。
次に示すのはこのプラグインのコンストラクタで、表1にその引数を示します。
Media(src, successCallback, errorCallback, statusCallback);
| 変数名 | 説明 |
|---|---|
| src | 再生(もしくは録音)するファイル名を指定します |
| successCallback | 再生、もしくは録画が終了したときに呼ばれるコールバック関数(省略可) |
| errorCallback | エラーが発生したときのコールバック関数(省略可) |
| statusCallback | ステータスが変わった時のコールバック関数(省略可) |
ここで注意すべきことは、src引数で指定するファイルのパスです。MP3などiOSでもAndroidでもいずれの環境でも再生できるフォーマットであれば問題ありませんが、OSやそのOSのバージョンにより利用できないコーデックがある場合があります。
iOSであれば、「Apple Developer サイト」、Andoridであれば「Android Developerサイト」を参照すると良いでしょう。ただし、必ず実機でも確認することをおすすめします。
また、ボタンをクリックした時に指定するオーディオファイルを再生するサンプルがリスト3のようになります。
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メソッドに引数を指定することもできます。
media.play({ numberOfLoops: 3 })
このように指定できるプロパティの一覧が表2です。
| プロパティ | 説明 |
|---|---|
| numberOfLoops | オーディオファイルを何回繰り返して再生するか |
| playAudioWhenScreenIsLocked | 画面がロックされた状態でも再生を継続するかの指定(デフォルト:true) |
