不允许在ToneJS中启动AudioContext (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事件触发音频。无需手动调用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])
  });
}