【JS】Web Speech APIの音声読み上げ機能の実装方法（日本語 / 英語読み上げ）

WEBページで、WEB Speech APIを使ってWEBページのテキストを読み上げる実装方法を共有しようと思います。JavaScriptで実装をしました。

今回は、個人開発で作成した英語学習サービスの英単語の発音を確認する際に、こちらのブラウザの音声合成機能を使用しました。

英語を読み上げる際におこった不具合の対処も併せて紹介させていただきます。

Web Speech APIの音声読み上げ機能使ってみる

【デモ】テキストを読み上げてみる

どのように読み上げるのか確認できるデモサイトは下記になります。

デモを見る

<input type="text" id="text" name="text" value="吾輩は猫である。" placeholder="読み上げたいテキストを入力してください" />
<button onclick="readAloud()">読み上げる</button>
<p>上記テキストを読み上げます。<br>「読み上げる」ボタンをクリックしてください。</p>

<script>
function readAloud() {
  // テキストを取得
  const text = document.getElementById("text").value

  // ブラウザにWeb Speech API Speech Synthesis機能があるか判定
  if ('speechSynthesis' in window) {
    // 発言を設定
    const uttr = new SpeechSynthesisUtterance()
    uttr.text = text
    // 発言を再生
    window.speechSynthesis.speak(uttr)

  } else {
    alert('大変申し訳ありません。このブラウザは音声合成に対応していません。')
  }
}
</script>

 

音声合成機能「Web Speech API」とは

ブラウザの音声合成で、文章を読み上げてくれる機能です。

無料で使用ができ、特に登録や認証なども必要ないため、気軽に使用することができます。

ブラウザのネイティブAPIなので、ライブラリをインポートする必要もありません。

Web Speech APIの使い方

【結論】日本語を読み上げるとこんな感じ

// ブラウザにWeb Speech API Speech Synthesis機能があるか判定
  if ('speechSynthesis' in window) {

    // 発言を設定 (必須)
    const uttr = new SpeechSynthesisUtterance()

    // テキストを設定 (必須)
    uttr.text = '【読み上げたい日本語テキスト】'

    // 言語を設定
    uttr.lang = "ja-JP"

    // 速度を設定
    uttr.rate = 1

    // 高さを設定
    uttr.pitch = 1

    // 音量を設定
    uttr.volume = 1

    // 発言を再生 (必須)
    window.speechSynthesis.speak(uttr)

 }

※速度や高さなどのオプションは省略化

以下から詳細を確認できます。

テキスト読み上げ / オプション設定方法

テキスト読み上げ機能の実装方法を見ていきましょう。

1. 発言を設定
2. オプションを設定
3. 音声を再生

 

const uttr = new SpeechSynthesisUtterance()

 

② オプションを設定

（必須）読み上げるテキストを設定

uttr.text = '【読み上げたいテキスト】'

※下記は設定が必要なようなら設定してください。

言語を設定

uttr.lang = "ja-JP"

(日本語:ja-JP, アメリカ英語:en-US, イギリス英語:en-GB, 中国語:zh-CN,)

速度を設定

uttr.rate = 1

(初期値:1 / 範囲 0.1-10 )

高さを設定

uttr.pitch = 1

(初期値:1 / 範囲 0-2 )

音量を設定

uttr.volume = 1

(初期値:1 / 範囲 0-1 )

ボイスを設定

uttr.voice = 【ボイスの種類】

voiceは下記から確認できます

https://codepen.io/kenzauros/pen/agvEWe

③ 音声を再生する (必須)

window.speechSynthesis.speak(uttr)

 

 

英語を読み上げてみる

実は最初に上記をベースにした「英語学習サイト」のプログラムを実装していたのですが、実は一つ不具合が。

私が実装したのは、英単語の読み上げだったのですが、ブラウザによって使用されるvoiceが違い、そのためSafariでの英単語の読み上げが、日本語voiceになってしまっていました。

そのため英語を読み上げているのに、すごい日本語の発音に…

英語学習サイトでそれはマズいと思い、こちらの不具合の対処を下記のようにしました。

英語読み上げ機能実装

// ブラウザにWeb Speech API Speech Synthesis機能があるか判定
  if ('speechSynthesis' in window) {

    // 発言を設定
    const uttr = new SpeechSynthesisUtterance()

    // テキストを設定
    uttr.text = '【読み上げたい英語テキスト】'

    // 言語を設定
    uttr.lang = 'en-US'

    // 英語に対応しているvoiceを設定
    const voices = speechSynthesis.getVoices()
    for (let i = 0; i < voices.length; i++) {
      if (voices[i].lang === 'en-US') {
        uttr.voice = voices[i]
      }
    }

    // 発言を再生
    window.speechSynthesis.speak(uttr)

 }

 

英語読み上げのオプション設定

言語を設定

言語を英語設定（アメリカ英語）にしておく

uttr.lang = 'en-US'

使用できるvoiceを取得

const voices = speechSynthesis.getVoices()

取得したvoiceから英語（アメリカ英語）対応のvoiceを探し、設定する

for (let i = 0; i < voices.length; i++) {
  if (voices[i].lang === 'en-US') {
    uttr.voice = voices[i]
  }
}

 

Web Speech APIのメリット

• 無料で簡単に実装できる
• ブラウザ上で音声読み上げ機能を実装できる
• 特別なツールやライブラリを読み込む必要がない
• 様々なサービス開発・機能に応用できる

 

音声合成機能を使う例

今回は英語学習サイトでの英単語を読み上げて、発音や読み方を確認する機能を作成しました。

英単語の右横の読み上げアイコンをクリックすると英単語を読み上げをしてくれます。

今回は、英語学習サイトのために読み上げ機能を追加したのですが、アクセシビリティの観点から、音声読み上げ機能を追加しているサイトもたまに見かけます。そう言った用途のための実装にもWeb Speech APIは使えるかもしれませんね。

以上です!

最後まで閲覧ありがとうございました!