SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

DeveloperZine(デベロッパージン)- エンジニアの意思決定を支える技術情報メディア ProductZine

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

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

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

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

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

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

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

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

 次に示すのはこのプラグインのコンストラクタで、表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)

次のページ
音楽プレイヤーを作成する

この記事は参考になりましたか?

Apache Cordovaで本格スマホアプリに挑戦しよう連載記事一覧

もっと読む

この記事の著者

WINGSプロジェクト 小林 昌弘(コバヤシ マサヒロ)

WINGSプロジェクト について> 有限会社 WINGSプロジェクト が運営する、テクニカル執筆コミュニティ(代表 ...

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

山田 祥寛(ヤマダ ヨシヒロ)

静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。主な著書に「独習シリーズ(Java・C#・Python・PHP・Ruby・JSP&サーブレットなど)」「速習シリーズ(ASP.NET Core・Vue.js・React・TypeScript・ECMAScript、Laravelなど)」「改訂3版JavaScript本格入門」「これからはじめるLaravel実践入門」「はじめてのAndroidアプリ開発 Kotlin編 」他、著書多数

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

CodeZine(コードジン)
https://codezine.jp/article/detail/9593 2016/09/13 14:00

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー