Safari で WebAudioAPI を働かせるために無音mp3ファイルを再生する処理をはさむ
公開日：
最終更新日：
要約
SafariではWeb Audio APIによる音源再生が、ユーザー操作が明確でないと制限されるため、無音mp3ファイルを事前に再生する処理を挟むことで再生を可能にしました。以前はボタンクリックで直接再生していましたが、現在はタイムライン変数を更新し10ms間隔で再生処理を行う方法に変更。無音mp3再生ボタンを用意することで、Safariの制約を回避し、間接的な音源再生を実現しています。
前つくった手法とは違う方法で，音源を再生しようとプログラムを構築。
具体的には，前回は，ボタンをクリックすると，音源再生用のタイマーを生成するやり方だった。
新しい方法では，ボタンをクリックしたら，用意されたタイムライン変数を更新する。
そして，10msごとにループするタイマー（setInterval(fn, 10ms)）によって，タイムライン変数を参照し，再生する値があれば，再生処理を行う方法へ変更。
しかし，Google Chrome ではこれで音源再生できたが，Safari では音源再生ができなかった。
色々探してみると，Safari では，音源再生がユーザー主体かどうかの判定が厳しいらしい。
[参考] iOSのMobile Safari でWeb Audio API を利用したサウンドが再生されない (タッチ制約による制限) (JavaScript プログラミング)
よって，あらかじめ，ダミーのサウンドファイル（無音mp3）を再生するボタンを用意し，アクセス時にユーザーが毎回そのボタンをクリックするような仕組みとする。
（ユーザーは，無音mp3を再生していることには気付かない）
これで，setInterval を用いた間接的な音源再生ができるようになった。
今回はボタンで対応したが，画面をクリックしたかどうかのクリックフラグを立てておき，それが false の場合，画面クリック時に無音mp3音源再生を行う処理を挟むことでもうまくいく，かもしれない。