はじめに
基本的にブラウザ上で音声を再生するには、ユーザーのアクションで音声の再生を実行する必要があります。
このことを知らないとなぜか音が鳴らないなどの調査で1日をつぶすことになりかねません。
WebAudio API で音声の再生を好きなタイミングでするには?
結論
一度でもいいので、ユーザーのアクションで音声の再生する。
その後、再生に使用した AudioContext では、ユーザーのアクションでなくても再生できます。
実際には再生しなくても resume メソッドを実行するだけで、好きなタイミングで再生できるようになります。
ユーザーのアクションとは?
具体的には、 click や touchend などのイベントです。
サンプルコード
const audioContext = new AudioContext();
// ここではbodyタグにしていますが、なにかのボタンなどに設定しても良いです。
document.body.addEventListener('click', function f() {
// 後は、この audioContext を使用して再生する場合はどんなタイミングでも再生可能
audioContext.resume();
document.body.removeEventListener('click', f);
});
あとがき
resume メソッドの存在に気づくまでは、無音の音声を生成してそれを再生してすぐに停止など面倒な処理を書いていましたが、resumeを実行するだけで良いのでかなり楽になりました。
いきなり音を鳴らしてしまうとびっくりすることもあるので、ユーザーのことを考えると、いきなり音声を再生せずに初期状態ではミュートにしておき、ミュート解除などのUIを用意したほうがいいのかもしれません。
参考記事
Discussion