🗣 Speech Synthesis in Japanese

speak-japanese.html

<p id=o></p>

<script>
/*
Sources:
* https://manu.ninja/using-the-speech-synthesis-interface-of-the-web-speech-api/
* https://css-tricks.com/using-the-web-speech-api-for-multilingual-translations/
* https://www.zeolearn.com/magazine/the-new-speech-synthesis-web-api
*/
let syn = speechSynthesis;
o.innerHTML = syn.getVoices().map(v => `<div>${v.name} (${v.lang})</div>`).join``;

let voice;
let attempts = 0;
const initJpVoice = () => {
  attempts++;
  voice = syn.getVoices().find(_voice => /ja[-_]JP/.test(_voice.lang));
  if (!voice) {
    if (attempts < 10) setTimeout(() => initJpVoice(), 250);
    else alert('`ja-JP` voice not found.');
  }
};

initJpVoice();

const speak = s => {
  if (!voice || !syn || syn.speaking) return;
  const utter = new SpeechSynthesisUtterance(s);
  utter.voice = voice;
  syn.speak(utter);
};


speak("あ");
// speak("い");
// speak("う");
// speak("え");
// speak("お");
</script>