chromeでAudioContextが動かない時の対処法

わかってそうなタイトルですが何が起こってるのか全然わかってません。ただ、こうしたら動きました。

sample.js

const audioCtx = new AudioContext()
audioCtx.onstatechange = () => {
  if(audioCtx.state !== 'running')
    audioCtx.resume()
}

以下の記事を参考にしました。
https://developer.mozilla.org/en-US/docs/Web/API/BaseAudioContext/state

AudioContext.stateについて

AudioContextには状態を表すstateプロパティがあり、以下の3つの値を取ります。

• runnning
  正常に動いている状態

• suspended
  一時停止状態

• closed
  AudioContext.close()を呼び出した後に設定される状態

• (interrupted)
  なんやこれ

chromeではユーザーアクションなしでAudioContextを作成するとデフォルトでstateに"suspended"が設定されるようです。

他に登場するもの

AudioContext.stateの他に上記のコードで登場するものの説明です。

• AudioContext.onstatechange
  stateに変更があったときに呼び出さるイベントハンドラです。

• AudioContext.resume()
  state === "suspended"のAudioContextを再び動くようにするメソッドです。

結論

上記のコードを記述することでaudioCtxが使えるようになったわけですが、AudioContextを作成したあとのどこかのタイミングでstateが変更されていると考えられます。そのおかげでonstatechangeにaudioCtx.resume()を記述して強制的にstateを"running"に戻せているわけですが、肝心の

いつ、なんでstateが変更されるの？

という疑問の答えについてはわかりません。

誰か教えて〜〜（トライさんの気分）（古）