Blog スタッフブログ

JavaScript WEB制作

[JavaScript]WebSpeechAPIを利用して音声読み上げを行う

こんにちは、株式会社MIXシステム開発担当のBloomです。

早速本題のWebSpeechAPIを利用して音声読み上げを行う手順について、

お仕事の中で得た知見を共有させていただきたいと思います。

WebSpeechAPIとは

ウェブ音声 API – Web API | MDN

WebSpeechAPIでは音声認識・音声合成をブラウザと連携して行うことができます。

例えばChromeで音声認識処理を実行する場合、Googleのサーバと連携して音声認識、結果を返却するといった動作を行います。

今回は音声読み上げ処理にフォーカスして実装してみましょう。

<input type="text" id="web_speech_text" name="web_speech_text" value="" placeholder="テキストを入力" />
<button onClick="speech()">音声読み上げ</button>
<script>
function speech() {
  const text = document.getElementById("web_speech_text").value
  if ('speechSynthesis' in window) {
    const utterance = new SpeechSynthesisUtterance()
    utterance.text = text
    window.speechSynthesis.speak(utterance)
  } else {
    alert('音声合成が利用できないブラウザです。')
  }
}
</script>

実行結果

たったこれだけで読み上げ処理を実装することができました。良かったですね。

参考文献

ウェブ音声 API – Web API | MDN – developer.mozilla.org

Can I use… Support tables for HTML5, CSS3, etc – caniuse.com

戻る一覧へ戻る