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

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

　今回はオーディオファイルを扱うためのプラグインを紹介します。アプリで音を扱うシーンは多く、効果音やBGM、そして、マイクを使っての音声を録音などがあります。アプリの場合にはクリックして音が鳴ったりすることが普通と受け止めている利用者もいます。また、効果音を上手に利用することでよりよいアプリができあがることと思います。また、今回紹介するプラグインは音声の再生だけではなく、録音も可能で、録音については次回紹介します。

対象読者

• スマホアプリに挑戦したいと思っているWeb開発者
• アプリ開発をもっと楽にしたいと思っている方
• 業務スマホアプリを作る開発者

オーディオファイルを扱う方法

　HTMLでもaudioタグというのがあり、そちらを使っても再生は可能です。

　したがって、HTMLでのaudioタグで良いのではないかと思う方もいるでしょう。HTMLでのaudioタグで実現ができる場合にはそちらでも問題がありません。

　しかし、オーディオファイルというのはMP3やOggなどファイルフォーマットがたくさんあり、端末毎に標準SDKで再生できる、できないなどや、ブラウザの種類でもその制限があります。

　また、iOSではaudioタグの場合では、アプリがバックグラウンドになったときに再生を維持するなどができませんが、このプラグインを使うとバックグラウンドでも再生し続けることができます。このように、できることが同じでも、利用制限はブラウザのaudioタグよりは緩いため使いやすくなっています。

　このように、端末側の制限などでできない場合がある場合など、今回紹介するプラグインを導入することでその問題が解決することもあります。また、再生だけではなく、録音もできるので、ちょっとした録音が必要な場合に、使ってみるのもよいでしょう。

インストール

　インストールするプラグインは、「cordova-plugin-media 」です。インストールはリスト1のように行います。ただし、このプラグインを使う場合には、端末のOS毎で多少の分岐処理が必要になってしまいます。このため、第4回でも解説したcordova-plugin-deviceもインストールした方がよいでしょう。また、同時に前々回に紹介したFileプラグインにも依存しているため、自動でインストールされます。

リスト1　MediaプラグインとDeviceプラグインのインストール方法

$cordova plugin add cordova-plugin-media
$cordova plugin add cordova-plugin-device

プラグインの使い方

　このプラグインを使う場合の処理の流れは、リスト2のように必ずインスタンスの作成とその解放処理が必要です。

リスト2　プラグインを使う際の流れ

var audio = new Media(filename,successCallback,failureCallback,statusCallback);
: // 様々なAPIの実行処理
audio.release(); // （1）必ず実行する処理

　コンストラクタの引数は別途説明しますが、ここで重要なことは（1）のように必ず、必要がなくなった段階でreleaseというメソッドを実行することです。これは、SDK側の都合ではありますが、これを行うことでSDK内部のリソースが解放されます。通常、JavaScriptではあまりリソースの解放に気を遣わず開発を進めていくことができますが、このプラグインを使う場合には注意が必要です。

　また、このプラグインは今まで紹介してきた他のプラグインよりもよりOSによって生じる小さな機能の差や制限などが比較的多いのではないかと思います。それは、ネイティブAPIの制限により差異が出ているのですが、それらを意識しないCordova開発では、実機での試行錯誤が多少必要になってしまう傾向があるプラグインだと思います。