Using ToneJS in Chrome, I frequently get this error message: "The AudioContext was not allowed to start. It must be resume (or created) after a user gesture on the page."

For example, with the code below, I get this message every time I use ctrl-r or ctrl-f5 to refresh the page.

I can get it working again by typing Tone.context.resume() into the console, but that gets pretty repetitive. Why this is going on, and how can I stop it?

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])
}

Using ToneJS in Chrome, I frequently get this error message: "The AudioContext was not allowed to start. It must be resume (or created) after a user gesture on the page."

For example, with the code below, I get this message every time I use ctrl-r or ctrl-f5 to refresh the page.

I can get it working again by typing Tone.context.resume() into the console, but that gets pretty repetitive. Why this is going on, and how can I stop it?

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])
}

• javascript
• web-audio-api

Share Improve this question Follow edited May 10, 2018 at 22:37 drenl asked May 10, 2018 at 21:11 drenldrenl 1,35344 gold badges1919 silver badges3232 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 10

It appears that Chrome is instituting a policy to require user interaction to use AudioContext so that sites can't intrusively play audio without the user initiating it.

Fortunately, you are already using user input to trigger the audio via keydown and keyup events. Instead of calling Tone.context.resume() manually, you can hook up the events to initiate resume(), like this:

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])
  });
}