Howler.js: How to start / resume the AudioContext via Howler? Re: Chrome AudioContext rules.

[jacobedawson]

I'm currently using Vue and assumed Howler would work out of the box, then bumped into the ridiculous Chrome AudioContext rules that require user interaction to resume the context.

After the first user interaction on my page I'm trying the following:

Howler.ctx = new AudioContext();
Howler.ctx.resume();

Even though I've initiated a new Howl instance and use the play() method, there is no sound despite the fact that I've 'resumed' the context. Has anyone else got a solid way to hurdle Chrome's AudioContext obstacles? Otherwise, is there an example of using the Howler.ctx property?

Thanks in advance :)

[frizurd]

Did you figure out this issue? Facing the same problem right now

[skaraman]

use a user driven event like 'onClick' to run the sound right away

const sound = new Howl({
    src: ['/path/to/your.mp3']
});
sound.play();

There should be no need to do new AudioContext or resume as long as the function is called from a user Event

[amypellegrini]

I'm facing this issue as well. While the audio is being triggered with a user action from a UX perspective, there is a level of indirection from the moment the event is handled in the code and then the sound being played.

I'm using Xstate to handle playback so it may be that the user action is not so evident to the browser as the actual source of the event.

Any ideas on how can I work around this issue in a case like this?

EDIT: reading a bit more, I think it may be something else going on, not sure exactly what.