javascript - AudioContext 不允许在 ToneJS (Chrome) 中启动

Question

在 Chrome 中使用 ToneJS 时，我经常收到此错误消息:“不允许启动 AudioContext。用户在页面上进行手势后必须恢复(或创建)它。”

例如，使用下面的代码，每次使用 ctrl-r 或 ctrl-f5 刷新页面时都会收到此消息。

我可以通过在控制台中输入 Tone.context.resume() 使其再次工作，但这会变得相当重复。为什么会发生这种情况，我该如何阻止它？

var keyToPitch = { "z":"C3", "s":"C#3", "x":"D3", "d":"D#3", "c":"E3", "v":"F3", "g":"F#3", "b":"G3", "h":"G#3", "n":"A3", "j":"A#3", "m":"B3", ",":"C4" }


var synth = new Tone.PolySynth(6, Tone.Synth, {
    "oscillator" : {
        "type": "sawtooth",
        "partials" : [0, 2, 3, 4],
        }
    }).toMaster();


 window.addEventListener('keydown', this.onkeydown)
 window.addEventListener('keyup', this.onkeyup)

function onkeydown(e){
   synth.triggerAttack(keyToPitch[e.key], Tone.context.currentTime)
}
function onkeyup(e){
    synth.triggerRelease(keyToPitch[e.key])
}

Answer 1

Chrome 似乎正在制定一项政策 require user interaction to use AudioContext这样网站就无法在用户未启动的情况下侵入性地播放音频。

幸运的是，您已经在使用用户输入通过 keydown 和 keyup 事件来触发音频。您可以连接事件来启动resume()，而不是手动调用Tone.context.resume()，如下所示:

function onkeydown(e){
  Tone.context.resume().then(() => {
    synth.triggerAttack(keyToPitch[e.key], Tone.context.currentTime)
  });
}
function onkeyup(e){
  Tone.context.resume().then(() => {
    synth.triggerRelease(keyToPitch[e.key])
  });
}