Error: AudioContext must be created after user gesture.

[mdn]

Error: AudioContext must be created after user gesture.

[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. :)