Shoeisha Technology Media

CodeZine(コードジン)

記事種別から探す

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

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

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2016/09/13 14:00

 今回はオーディオファイルを扱うためのプラグインを紹介します。アプリで音を扱うシーンは多く、効果音や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開発では、実機での試行錯誤が多少必要になってしまう傾向があるプラグインだと思います。


  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

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

    <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2012年2月時点での登録メンバは37名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂きたい...

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

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XMLD...

バックナンバー

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

もっと読む

おすすめ記事

All contents copyright © 2006-2017 Shoeisha Co., Ltd. All rights reserved. ver.1.5