Double sound init when page audio is still locked

[Tomalak]

The Problem

Erroneous playback duplication from a single Howl using HTML5 audio when the page audio is still locked, and the Howl is set to retry playback on unlock.

Reproducible Example

No response

Reproduction Steps

On a page where audio is not allowed by default, the following runs into the expected issues with locked audio:

var howl = new Howl({
    src: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/Yodel_Sound_Effect.mp3',
    html5: true,
    onload(id) {
        console.log('load', this._src);
    },
    onplay(id) {
        console.log('play', id);
    },
    onend(id) {
        console.log('end', id);
    },
    onplayerror(id) {
        console.log('playerror', id);
        this.once('unlock', () => {
            console.log('unlock', id);
            this.play();
        });
    },
});

At this point, the log already shows that the AudioContext has been created/initialized twice:

An AudioContext was prevented from starting automatically. It must be created or resumed after a user gesture on the page. howler.js:2521:21
An AudioContext was prevented from starting automatically. It must be created or resumed after a user gesture on the page. howler.js:2521:21
Autoplay is only allowed when approved by the user, the site is activated by the user, or media is muted. howler.js:431:33
HTML5 Audio pool exhausted, returning potentially locked audio object. howler.js:434:18
undefined
load https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/Yodel_Sound_Effect.mp3

When calling howl.play(), the playerror event occurs twice for the same ID:

Autoplay is only allowed when approved by the user, the site is activated by the user, or media is muted. [howler.js:907:28]
playerror 1002
playerror 1002
1002

Once the page receives user interaction, the unlock event occurs, and the sound starts playing duplicated, with split-second delay. The console output at that point:

unlock 1002
play 1003
load https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/Yodel_Sound_Effect.mp3
play 1004
end 1003
end 1004

This does not occur on a page where the audio is allowed or has already been unlocked, or when using WebAudio.

Possible Solution

No response

Context

No response

Howler.js Version

v2.2.4

Affected Browser(s)/Versiuon(s)

Firefox 119.0

[jeveloper]

@Tomalak Hi Martin, I seek to commit to open source contribution in 2024 more than I have in a while. Do you still need this issue resolved?

[Tomalak]

@jeveloper Since there was no other option at the time, I've worked around the issue by using WebAudio instead of html5, but it does still seem like a genuine bug worth fixing.