Safari and Mobile Safari require page refresh to play Howler Audio

Question

I'm currently implementing HowlerJS and I got it working. But the following happens on Safari using El Capitan:

1. Open Safari and enter HowlerJS and click play, and it starts loading.
2. For several of the machines it never plays
3. Refresh page, click play, it works.
4. Close open Safari, happens again.

And it is also happening on iOS. Now I've seen that you need to wait for a user click to play audio, which is what I'm doing.

On click of the button it loads and plays the audio. Has anyone faced this problem? I'm using the stable version 1.1.28.

Answer 1

Safari 9 has started to suspend audio on initial page load. In addition to all the other song and dance you usually have to do, now we have to instruct the AudioContext to resume and defer our business logic until that promise resolves. You'll probably want this check just inside a click handler.

if(Howler.ctx && Howler.ctx.state && Howler.ctx.state == "suspended") {
    Howler.ctx.resume().then(function() {
        console.log("AudioContext resumed!");
        // fire your callback here
    });
}

Howler 2.0 has supposedly already fixed this, but no such luck as of 1.1.28 for us stable users >_>