【JavaScript】Safari だけじゃないオーディオ再生の制約と再生開始遅延の解決方法 – webfrontend.ninja
オーディオの自動再生に大きな制約があるといえば、以前は iOS Safari に限った話でした。しかし、現在は PC も含め、あらゆるブラウザーでオーディオの自動再生に大きな制約があります。もし再生できたとしても、次に立ちはだかるのが再生開始遅延です。とりわけスマートフォンでタップ音や通知音を再生したい場合は違和感を感じてしまいます。 今回は、HTML マークアップおよび JavaScript によるオーディオ自動再生にどのような制約があるのか、その制約をどう解決するのか、そして、再生開始遅延を解消する方法について、詳しく見ていきます。 Chrome の自動再生ポリシー オーディオの自動再生ができないという制約は、当初は iOS Safari に限った話でした。ところが、Google が自動再生ポリシーを発表してから、メジャーブラウザーすべてがそれに従うようになりました。英語ですが「Aut
無音を鳴らして自動再生ポリシーをアンロックする - console.lealog();
Safariなどのブラウザには、音の自動再生に制限があって、ロード時にいきなり再生！というのがだいたいできない時代。（この制限にはいろいろ条件があるけども） そのため、「このサイトでは音が出ます」みたいなモーダルを出して、まずそれをクリックしてもらい、そのタイミングでこの制限を突破するために一手間かけるということが行われてきた。 で、そのひと手間で盛大に音を鳴らすわけにはいかないので、無音を鳴らすという半ばハック的な方法があるのである。 その無音の鳴らし方を毎回思い出すのが大変なので、いい加減メモっておく。 HTMLAudio const $audio = new Audio(); $audio.src = "/sound-of-silence.mp3"; $audio.play(); ここでアンロックした`audio`要素を使い続けることが重要で、Reactとかでイミュータブルにやるとな
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
