スマートフォンでSpeechSynthesisUtteranceを使用する際はユーザーアクションが必要 ☝️

SpeechSynthesisUtteranceを使用し、

let number = 0;

setInterval(() => {
  const utterThis = new SpeechSynthesisUtterance();

  utterThis.text = String(++number);
  speechSynthesis.speak(utterThis);
}, 1000);

こんな感じで、数字を読み上げるWebサイトを作りました。

こちら、現在（2024.12.04）はPC版のGoogle Chrome（131.0.6778.86）、Safari（18.1.1）でアクセスすると、自動で読み上げが始まりますが、iPhoneのSafari（18.1.1）、AndroidのChrome（131.0.6778.81）で観覧した際は読み上げが始まりません。
なぜならば音声の再生にはユーザーアクションが必要だからです。

対応策

document.addEventListener('click', () => {
  const utterThis = new SpeechSynthesisUtterance();

  utterThis.text = '';
  speechSynthesis.speak(utterThis);
});

let number = 0;

setInterval(() => {
  const utterThis = new SpeechSynthesisUtterance();

  utterThis.text = String(++number);
  speechSynthesis.speak(utterThis);
}, 1000);