Web Speech APIを使ってテキストを読み上げる方法

2023年12月12日

こんばんわ！

つい最近サイトに読み上げ機能を実装する案件があったのでWeb Speech APIを使ってテキストを読み上げる方法を紹介します。

Web Speech APIとは

ウェブ音声 API (Web Speech API) で、音声データをウェブアプリに組み入れることができます。ウェブ音声 API は、SpeechSynthesis （音声合成、Text-to-Speech）と SpeechRecognition （非同期音声認識、Asynchronous Speech Recognition）の 2 つの部分から成り立っています。

登録も認証キーもいらず簡単なJavascriptの知識だけあれば誰でも使うことができます。

今回はSpeechSynthesisに絞って紹介していきます。

ソースコード

・index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <textarea id="read"></textarea>

    <button onclick="readText()" class="readbtn">読み上げる</button>

    <script src="read.js"></script>
  </body>
</html>

・read.js

function readText() {
   let textToRead = document.getElementById('read').value;
   let speechSynthesis = window.speechSynthesis;

   let utterance = new SpeechSynthesisUtterance(textToRead);

   speechSynthesis.speak(utterance);
}

これだけです。

「読み上げる」ボタンを押すとreadText()関数が動いてtextareaの中が読み上げられるという仕様です。

javascriptの解説をしていきます。

・テキストエリアの値を変数textToReadに入れる。

let textToRead = document.getElementById('read').value;

・Web Speech APIの speechSynthesis インターフェースを取得。

let speechSynthesis = window.speechSynthesis;

・テキストを読み上げる設定を行うオブジェクトを作成

let utterance = new SpeechSynthesisUtterance(textToRead);

・テキストの読み上げを実行

speechSynthesis.speak(utterance);

これで読み上げの実行ができます。

その他のオプション

その他にもいろんなオプションがあり

言語設定: 出力する音声の言語を設定することができます。langプロパティを使用して、音声の言語を指定します。
発声速度: 音声の発声速度を調整することができます。rateプロパティを使用して、発声速度を指定します。
音量設定：音声の音量を調整することができます。volumeプロパティを使用して、音量を指定します。

utterance.lang = "ja-JP" // 言語コード
utterance.rate = 1.5 // 速度 (0.1〜10、初期値:1)
utterance.volume = 1 // 音量(0〜1、初期値1)

まとめ

このようにWeb Speech APIを利用することで簡単なjavascriptですぐに実装することができるので機会があれば是非使ってみてください。

サイトに読み上げ機能がついていることで視覚障がい者や手が使えない人たちのアクセシビリティを向上させることが期待されます。

ブログ

BLOG