不允许在ToneJS（Chrome）中启动AudioContext

Question

在Chrome中使用ToneJS时，我经常收到以下错误消息：“不允许启动AudioContext。必须在页面上用户手势后恢复（或创建）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似乎正在制定一项政策， 要求用户进行交互才能使用AudioContext，以便网站在用户未启动的情况下不能侵入性地播放音频。

幸运的是，您已经在使用用户输入通过keydown和keyup事件触发音频。 无需手动调用Tone.context.resume() ，而是可以挂接事件以启动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])
  });
}