Sound does not Play when Used with VoiceOver/Audio Ducking Mode on iOS 18 or Later

[naokiluca]

The Problem

When adding the "sound.play();" function to a click event, the sound does not play when first clicking/tapping the element in the following situation:

• Device: iPhone/iPad
• OS: iOS 18 or later
• Accessibility Features: VoiceOver On, Audio Ducking Always On

Reproducible Example

No response

Reproduction Steps

1. Turn on VoiceOver on an iPhone/iPad running iOS/iPadOS 18.0 or later.
2. Set the "Audio Ducking" option to "Always", using the rotor or VoiceOver settings.
3. Access any page where the "sound.play()" function is added to a click event, in any browser/application.
4. When clicking the element, the sound, along with any click events added aside it, does not function propperly, and the page freezes for a few seconds.
5. When clicking the element for the second time, the sound plays as expected.

Possible Solution

I have tried updating howler.js to the latest version, changing the sound track, deleting all "audio" tags from the HTML, etc., with no success.

Currently, the only way to solve this problem is to turn off Audio Ducking/VoiceOver, but that isn't a very good solution for a blind user like me.

Context

I have a menu button on my website for the blind and visually impaired, with a sound track to indicate the menu has opened/closed. I'd like my users to be able to use this button, without having them click the button multiple times.

Howler.js Version

v2.2.4

Affected Browser(s)/Versiuon(s)

Safari, Chrome, Edge, and a webview-based application