CODEWITHSUNDEEP
javascriptangularjshtml5-audio
Reguen
Reguen

Reputation: 1

The AudioContext was not allowed to start. AngularJS Recorder Chrome 71

I've been using AngularAudioRecorder (AngularJS) for the last 4 years and with the last Chrome update I'm getting the following error:

The AudioContext was not allowed to start. It must be resumed (or created) after a user gesture on the page.
init @ angular-audio-recorder.js: 861

Code:

getPermission: function () {
      navigator.getUserMedia({
        "audio": true
      }, html5HandlerConfig.gotStream, html5HandlerConfig.failStream);
    },
    init: function () {
      service.isHtml5 = true;
      var AudioContext = window.AudioContext || window.webkitAudioContext;
      if (AudioContext && !html5AudioProps.audioContext) {
        html5AudioProps.audioContext = new AudioContext();
      }

      if (localStorage.getItem("permission") !== null) {
        //to get permission from browser cache for returning user
        html5HandlerConfig.getPermission();
      }
    }
  };

Please find the full code here: Angular Audio Recorder

Thank you for any help you can offer

Upvotes: 0

Views: 4384

Answers (4)

italobarros
italobarros

Reputation: 21

I solved my problem with:

setTimeout(() => {
  context.close();
}, timenotification);

Upvotes: 0

mathheadinclouds
mathheadinclouds

Reputation: 3735

This issue is nothing which only applies to Angular; it's much more general, and has to do with the fact that modern browsers have disabled auto-playing sounds (until user has interacted 'enough') so that you're not annoyed by sounds of some web page which you just opened.

see this old question here.

I was getting the exact same 'not allowed to start' message, and I'm not using Angular; I was just trying to have JavaScript play a sound (programmatically) before 'enough' user interaction. What I did to fix it was to take care that ... = new AudioContext() is executed only after the user has pressed a button or interacted with a (native) slider. The accepted answer to above old question suggests essentially the same strategy.

Good to see that you already solved the problem. Probably (caution: not tested) an alternative solution would be to just delay the loading and/or initialization of the recorder code until the user has pressed some button or so.

Upvotes: 0

saurabhgoyal795
saurabhgoyal795

Reputation: 1285

do it when user press any key or touch any button

if(audio_context.state !== 'running') { audio_context.resume(); }

Upvotes: 1

Reguen
Reguen

Reputation: 1

I solved the problem. Finally resumed the paused AudioContext with:

html5AudioProps.audioContext.resume().then(() => {
     var audioContext = html5AudioProps.audioContext;
})

Inside the function that starts the recording.

Upvotes: 0

Related Questions