SHOEISHA iD

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

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

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

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

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

  • X ポスト
  • このエントリーをはてなブックマークに追加

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

  • X ポスト
  • このエントリーをはてなブックマークに追加

対象読者

  • スマホアプリに挑戦したいと思っている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開発では、実機での試行錯誤が多少必要になってしまう傾向があるプラグインだと思います。

会員登録無料すると、続きをお読みいただけます

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

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

メールバックナンバー

次のページ
オーディオファイルを再生する流れ

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

  • X ポスト
  • このエントリーをはてなブックマークに追加
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本格入門」「これからはじめるReact実践入門」「はじめてのAndroidアプリ開発 Kotlin編 」他、著書多数

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

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

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/9593 2016/09/13 14:00

おすすめ

アクセスランキング

アクセスランキング

イベント

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

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

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

メールバックナンバー

アクセスランキング

アクセスランキング