やりたかったこと
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は日本語記事がなかなかないので大変ですね。