Error: AudioContext must be created after user gesture.

[coolaj86]

I wanted to try out this cool demo: https://mdn.github.io/webaudio-examples/compressor-example/

But, alas:

The AudioContext was not allowed to start. It must be resumed (or created) after a user gesture on the page. https://goo.gl/7K7WLu

[coolaj86]

Looks like instantiating the AudioContext needs to move to within a button click. Maybe something like this:

var myAudio = document.querySelector('audio');
var pre = document.querySelector('pre');
var myScript = document.querySelector('script');
var button = document.querySelector('button');

pre.innerHTML = myScript.innerHTML;

var audioCtx;
var source;
var compressor;

function setupAudioCtx() {
  var AudioContext = window.AudioContext || window.webkitAudioContext;
  audioCtx = new AudioContext();

  // Create a MediaElementAudioSourceNode
  // Feed the HTMLMediaElement into it
  source = audioCtx.createMediaElementSource(myAudio);

  // Create a compressor node
  compressor = audioCtx.createDynamicsCompressor();
  compressor.threshold.value = -50;
  compressor.knee.value = 40;
  compressor.ratio.value = 12;
  compressor.attack.value = 0;
  compressor.release.value = 0.25;

  // connect the AudioBufferSourceNode to the destination
  source.connect(audioCtx.destination);
}

button.onclick = function() {
  if (!audioCtx) {
    setupAudioCtx();
  }
  var active = button.getAttribute('data-active');
  if(active == 'false') {
    button.setAttribute('data-active', 'true');
    button.innerHTML = 'Remove compression';

    source.disconnect(audioCtx.destination);
    source.connect(compressor);
    compressor.connect(audioCtx.destination);
  } else if(active == 'true') {
    button.setAttribute('data-active', 'false');
    button.innerHTML = 'Add compression';

    source.disconnect(compressor);
    compressor.disconnect(audioCtx.destination);
    source.connect(audioCtx.destination);
  }
}

[chrisdavidmills]

@solderjs hi there,

Thanks for the headsup (and damn that autoplay policy ;-) )

I have fixed this now. I ended up doing it in a slightly different way (using the play event of the audio element), but it is basically equivalent.

[coolaj86]

Thanks! Works for me. :)