From my answer in https://stackoverflow.com/a/79296650/2219998, mobile Safari seems to require that the first utterance happens during a user interaction (even if it's empty!) in order to enable utterances in non-user-interactive places like timeouts/intervals. This works for me:
<!-- begin snippet: js hide: false console: true babel: false babelPresetReact: false babelPresetTS: false -->
<!-- language: lang-js -->
function speak(msg) {
speechSynthesis.speak(new SpeechSynthesisUtterance(msg));
}
const startTimerButton = document.getElementById('start-timer');
startTimerButton.addEventListener('click', () => {
// Mobile Safari requires an utterance (even a blank one) during
// a user interaction to enable utterances during timeouts.
speak('');
setInterval(() => {
speak('another five seconds passed');
}, 5 * 1000);
});
<!-- language: lang-html -->
<button id="start-timer">Start</button>
<!-- end snippet -->
As per [@Frazer's comment][1], mobile Safari seems to require that the first utterance happens during a user interaction (even if it's empty!) in order to enable utterances in non-user-interactive places like timeouts/intervals. This works for me:
<!-- begin snippet: js hide: false console: true babel: false babelPresetReact: false babelPresetTS: false -->
<!-- language: lang-js -->
function speak(msg) {
speechSynthesis.speak(new SpeechSynthesisUtterance(msg));
}
const startTimerButton = document.getElementById('start-timer');
startTimerButton.addEventListener('click', () => {
// Mobile Safari requires an utterance (even a blank one) during
// a user interaction to enable utterances during timeouts.
speak('');
setInterval(() => {
speak('another five seconds passed');
}, 5 * 1000);
});
<!-- language: lang-html -->
<button id="start-timer">Start</button>
<!-- end snippet -->
[1]: https://stackoverflow.com/questions/61658740/speechsynthesis-not-working-on-mobile-safari-even-though-its-supported#comment109595034_61658740
