I created an animated progress bar and would like to play a sound on click when the animation is advanced.
Unfortunately, the sound does not play on first click but plays ok on second click. I checked the low latency API option and the audio file is preloaded so not sure what is going on. Also, the audio file is in mp3 file and pretty small size.
I tested across all browsers and behaviour is consistent.
I would appreciate any pointers on how I may fix this.
I don't know why but for some reason my playback is temperamental. Sometimes it plays and sometimes it doesn't.
Then I remembered I had the same issue with another project and what helped was to extend the length of the audio file to one second and now it is all working fine. Before, the length of the audio file was very short 0.3s.
Everything looks "correct" in your document - the audio is being preloaded and you're using the low latency API.
My biggest wonder is if this basically only happens on mobile for you? I see you're using the On Click event, which means that if there's a touch involved it can often be the case the touch down is on the button but sometimes the touch up drifts away and then the event does not get called. Perhaps try using On Mouse Down instead? (though this would not account for the audio length differences you are seeing).
Otherwise I'd still be curious what browser/device/OS and versions of those you are using to test. Also, are you on low power mode or perhaps have other non-standard configuration changes (like accessibility differences)?