I am making a timer app in React. Whenever the timer counts back to 0 it should play a wav sound file. It works fine on IE, Chrome, Edge, Android, but not on iOS.
I have found an explanation why this is happening, but not how to work around it.
In Safari on iOS (for all devices, including iPad), where the user may be on a cellular network and be charged per data unit, preload and autoplay are disabled. No data is loaded until the user initiates it. This means the JavaScript play() and load() methods are also inactive until the user initiates playback, unless the play() or load() method is triggered by user action. In other words, a user-initiated Play button works, but an onLoad="play()" event does not. (Source: Apple Developer)
<audio id="beep" src="http://www.pacdv.com/sounds/interface_sound_effects/sound106.wav"></audio>
startTimer = () => {
document.getElementById('beep').play();
}
The start timer function runs when the timer reaches 0, not on a click event. Expected result would be on iOS to play the audio when counts back to 0.