Safari で WebAudioAPI を働かせるために無音mp3ファイルを再生する処理をはさむ

前つくった手法とは違う方法で,音源を再生しようとプログラムを構築。

具体的には,前回は,ボタンをクリックすると,音源再生用のタイマーを生成するやり方だった。

新しい方法では,ボタンをクリックしたら,用意されたタイムライン変数を更新する。
そして,10msごとにループするタイマー(setInterval(fn, 10ms))によって,タイムライン変数を参照し,再生する値があれば,再生処理を行う方法へ変更。

しかし,Google Chrome ではこれで音源再生できたが,Safari では音源再生ができなかった。

色々探してみると,Safari では,音源再生がユーザー主体かどうかの判定が厳しいらしい。

[参考] iOSのMobile Safari でWeb Audio API を利用したサウンドが再生されない (タッチ制約による制限) (JavaScript プログラミング)

よって,あらかじめ,ダミーのサウンドファイル(無音mp3)を再生するボタンを用意し,アクセス時にユーザーが毎回そのボタンをクリックするような仕組みとする。
(ユーザーは,無音mp3を再生していることには気付かない)

これで,setInterval を用いた間接的な音源再生ができるようになった。

今回はボタンで対応したが,画面をクリックしたかどうかクリックフラグを立てておき,それが false の場合,画面クリック時に無音mp3音源再生を行う処理を挟むことでもうまくいく,かもしれない。


投稿に関連する記事抜粋

投稿記事のカテゴリやタグと同じ記事をランダム表示します。

 カテゴリ一覧

 雑談(170)
アニメ(19)/ゲーム(12)/ドラマ(3)/パソコン(33)/小説(3)/広島東洋カープ(16)/映画(11)/漫画(33)/音楽(61)
 製作記(89)
AI(4)/CakePHP(3)/CentOS(4)/JavaScript(JS)(9)/Nuxt.js(4)/Vue.js(18)/WordPress(23)/料理(10)