Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Error: AudioContext must be created after user gesture. #29

Closed
coolaj86 opened this issue Jun 13, 2019 · 3 comments
Closed

Error: AudioContext must be created after user gesture. #29

coolaj86 opened this issue Jun 13, 2019 · 3 comments

Comments

@coolaj86
Copy link

coolaj86 commented Jun 13, 2019

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
Copy link
Author

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
Copy link
Contributor

@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
Copy link
Author

Thanks! Works for me. :)

bsmth added a commit to bsmth/webaudio-examples that referenced this issue Oct 5, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants