LoginSignup
6
4

More than 5 years have passed since last update.

Monaca(Cordova)で複数音源の同時再生をする

Last updated at Posted at 2019-02-14

やりたかったこと

iOS Android でBGMを流しながらSE音を再生する。

試してみたこと

❌ Web Audio API
iOSで再生されない。できればこれを使いたかった。
実は、大丈夫だろ〜!ということで、はじめに Web Audio API ですべて実装してしまいました。
痛い目をみました・・・。

❌ cordova-plugin-media
https://docs.monaca.io/ja/reference/cordova_7.1/media/
Monaca Docs にも載っているこちらです。
音源再生はされるのですが、再生できるのは一つの音源だけで、同時再生はできませんでした。

⭕ cordova-plugin-nativeaudio
https://github.com/floatinghotpot/cordova-plugin-nativeaudio
iOS Android 共に同時再生ができました。
・ 再生、停止、ループ、フェードイン・アウト、ぐらいの機能。
・ Monacaで使う場合はProプランでないと使用できない。
・ ミュート時でも音がでる(iPhoneの左上のスイッチがOFFの時)
ミュート時でも音が出るのは、今回のアプリではNGだったので改善しないといけませんでした。

導入手順

Monaca にpluginの導入

通常なら

cordova plugin add cordova-plugin-nativeaudio

だけなのですが、Monacaは管理画面からpluginを導入しないといけません。
管理画面からcordova-plugin-nativeaudioと検索しても何も出てこないので
URL指定で https://github.com/floatinghotpot/cordova-plugin-nativeaudio と入れました。
結果はエラーが起こったので、GitHubからzipデータをDLして、そちらを登録しました。

コード


function onDeviceReady() {
  if (window.plugins && window.plugins.NativeAudio) {
    // プリロード処理
    window.plugins.NativeAudio.preloadComplex('sound', 'sound/sample.mp3', 1, 1, 0, function (msg) {
      // 再生 
      window.plugins.NativeAudio.play('sound');
    }, function (msg) {
      console.log('error: ' + msg);
    });
  }
}
document.addEventListener("deviceready", onDeviceReady, false);

これで、音源再生できれば一安心、あとはREADMEを見て好きにいじれます!

ミュート時にも音が鳴ってしまう問題

https://github.com/floatinghotpot/cordova-plugin-nativeaudio/issues/82
issue にも上がっていました。
一通り目を通して、とりあえず plugin 内の src/ios/NativeAudio.m を見てみました。
そのなかに


    [session setCategory:AVAudioSessionCategoryPlayback error:nil];

という一文が、怪しい・・・検索してみました。↓
https://developer.apple.com/documentation/avfoundation/avaudiosessioncategoryplayback?language=occ

your app audio continues with the Silent switch set to silent or when the screen locks.

Silent switchがONでも再生し続けますよ。ということでしょうか。
上の一行をコメントアウトしてビルド

ミュートにしたら再生されなくなりました!!
これで使用条件を満たせました。
Cordovaのpluginは日本語記事がなかなかないので大変ですね。

6
4
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
6
4