モバイル環境での音声の連続再生の方法

Question

現在、Web上で動くオーディオプレイヤーを作っています。
この中の機能で曲を再生し終えると次の曲を自動で再生する「連続再生」を付けたいと思っています。

曲終了のイベントを取って次の曲を再生すればいいのかと思いましたが、iOS, Androidなどのモバイル端末だとうまく動きません。
調べたところ、モバイル端末はパケットの従課金に考慮してAudio, Videoタグの内容を自動で再生はできないらしく、何らかのユーザーアクションを必要とします。

これで終わればよかったのですが、偶然iPhoneでSoundCloudのWeb版を見ていると連続再生が実装されていました。

これがどのような方法で実装されているのかわかる方いれば是非、ご教授ください、お願いします。

Answer 1

端末が手元に無いためテストしていませんが、下記のような方法があるようです。（書き方法が今でも使えるなら）切り替える場合は2つAudioContextを用意しておいて順に書き換えていけば出来そうな気がします。

【[JavaScript] iOSのMobile Safari でWeb Audio API を利用したサウンドが再生されない (タッチ制約による制限)】
https://www.ipentec.com/document/document.aspx?page=software-mobile-safari-ios-web-audio-api-touch-limit

この問題を回避する方法として、リンクをタップしてサウンドを読み込むと同時に、AudioContextを作成し、一度再生しておく回避策があります。タップ操作で発生するイベント内に、AudioContextの作成とcreateBufferSource()の作成、BufferSourceの再生をあらかじめ実行し、その後、本来再生するファイルを読み込みます。

Comments

[tk1024]

回答いただきありがとうございます、検証してみます！