The AudioContext was not allowed to start. It must be resumed (or created) after a user gesture on the page

[magic-77]

Hi, this is a very nice Plugin. I'm trying to get it working with Chrome Mobile on Android.

But it stops here:

_autoResume: function() {
   ...
   self.ctx.resume().then(function() {
     ....
  )}
}

any ideas if this is solvable?

[pongstylin]

Is there actually a problem? I use this library successfully on Chrome Mobile on Android. Yes, the titular warnings are issued to the console, but only because I create the howl objects on page load. But once all of my assets are loaded, I make the user click a button to enter the app. Once the user clicks the button, all of your sounds should work just fine. Just call the "play" method on a howl object and you should hear it. The point is, the user must touch the page before sounds will play.

[magic-77]

@pongstylin : I have to add some more info about that. I needed a solution to play a Notification Sound at Backend after an order has been created. Therefor there will be no user interaction with the page before. And this is blocked by Chrome. My Solution for that is to create an WebAPK and using Howler as plaback plugin. This works fine now

[salientnet]

@magic-77 , I have same issue with you and so, can you explain how you fixed the issue?

[magic-77]

Hi @salientroot, if you need to invoke sound without user interaction then you have to setup your app as "WebAPK"

[salientnet]

can you let me know how should i setup my app as "WebAPK" in detail? Actually I am not sure about that.

[magic-77]

@salientroot sure, get into deep with https://developers.google.com/web/fundamentals/integration/webapks or do you need code examples?

[jsphpndr]

The following code works in Safari:

    const stream = document.getElementById('stream');
    const station = stream.getAttribute('station');

    let player = new Howl({
      src: station,
      html5: true,
      format: ['mp3', 'aac'],
      autoplay: false,
      howl: null
    });

    stream.addEventListener('click', function () {

      if (stream.innerHTML == 'Play') {
        stream.innerHTML = 'Pause'
        player.play();

      } else {
        stream.innerHTML = 'Play'
        player.pause();
      }

    });

Chrome issues the warning as listed in the issue title: "The AudioContext was not allowed to start. It must be resumed (or created) after a user gesture on the page."

And, Firefox offers this warning: "Autoplay is only allowed when approved by the user, the site is activated by the user, or media is muted."

Safari shows me the streaming link's content being loaded on initial page load, and I get the warnings in Chrome and Firefox.

I've tried the demos, they all work in the various browsers, but if object.play(); is all that's supposed to be required and the Web Audio API is included in the latest version, why am I having this issue? Isn't click a user interaction?

This is my first time working with audio, so I have no clue.

@goldfire

[jsphpndr]

The following code works in Safari:

    const stream = document.getElementById('stream');
    const station = stream.getAttribute('station');

    let player = new Howl({
      src: station,
      html5: true,
      format: ['mp3', 'aac'],
      autoplay: false,
      howl: null
    });

    stream.addEventListener('click', function () {

      if (stream.innerHTML == 'Play') {
        stream.innerHTML = 'Pause'
        player.play();

      } else {
        stream.innerHTML = 'Play'
        player.pause();
      }

    });

Chrome issues the warning as listed in the issue title: "The AudioContext was not allowed to start. It must be resumed (or created) after a user gesture on the page."

And, Firefox offers this warning: "Autoplay is only allowed when approved by the user, the site is activated by the user, or media is muted."

Safari shows me the streaming link's content being loaded on initial page load, and I get the warnings in Chrome and Firefox.

I've tried the demos, they all work in the various browsers, but if object.play(); is all that's supposed to be required and the Web Audio API is included in the latest version, why am I having this issue? Isn't click a user interaction?

This is my first time working with audio, so I have no clue.

@goldfire

So, I got this solved for the streaming error, there was an issue with the url. Once that was sorted, it was also a matter of the object.pause(); being changed to object.stop(); to ensure the stream worked properly.