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.

[pjdiiori]

I'm facing a similar issue.

My audio files play without issue when I click my play button, however other properties of the Howl instance don't render until after clicking play, specifically .duration().

One should be able to display the duration of a file before clicking play, no?

[skaraman]

I'm facing a similar issue.

My audio files play without issue when I click my play button, however other properties of the Howl instance don't render until after clicking play, specifically .duration().

One should be able to display the duration of a file before clicking play, no?

I believe for your case and the one above you should create a new audio context from some kind of “fake” play button. For example in a game a wrote I have a big play button the user has to click before the main menu appears, after which I am free to manage audio as I want.

[pjdiiori]

That's unfortunate...thanks for your help!

---

Update: Turns out it wasn't the AudioContext causing my issue. I just set the onload function in my Howl instance to update the duration in state (using React).

const clip = new Howl({
    src: [audient.src],
    volume: 0.5,
    preload: true,
    onload: () => setDuration(clip.duration()),
    onplay: () => setIcon(pause),
    onpause: () => setIcon(play),
    onend: () => setIcon(play)
})

[Diex]

try autoplay:

const clip = new Howl({
    src: [audient.src],
    autoplay: true,
    volume: 0.5,
    preload: true,
    onload: () => setDuration(clip.duration()),
    onplay: () => setIcon(pause),
    onpause: () => setIcon(play),
    onend: () => setIcon(play)
})