ブラウザ上でjavascriptによるテキストの音声読み上げを行う方法

やりたいこと

• サーバから受け取ったテキストをブラウザ上で読み上げてもらいたい
• まずは最小限，テキスト読み上げの機能だけを作りたい

解決策

次のように作るだけ．

htmlファイル

<h1>デモ</h1>
<input class="text" value="こんにちは"/>
<button onclick="speak()">speak</button>
<script>
  const uttr = new SpeechSynthesisUtterance();  // 音声合成システムを作る
  function speak(){
    uttr.text = document.querySelector('.text').value; // テキストを設定
    window.speechSynthesis.speak(uttr);                // 読み上げ
  }
</script>

このhtmlファイルをローカルに保存して，ブラウザで表示すると次のような画面が出る．
speakボタンを押すと入力したテキストを読み上げてくれる．

まとめ

• 思ったより爆速解決した
• 技術の進歩ってすごい