コード・実装

【JavaScript】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の使い方

Web Speech APIとは

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

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

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

 

使い方

それでは実装のためのコードを見ていきましょう。

発言を設定

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 = 【ボイスの種類】

 

音声を再生する

window.speechSynthesis.speak(uttr)

 

英語を読み上げる

実は最初に上記をベースにしたプログラムを実装していたのですが、実は一つ不具合が。

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

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

実装コード

// 発言を設定
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]
  }
}

 

コードの詳細を見てみる

言語を設定

言語を英語設定(アメリカ英語)にしておく

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は使えるかもしれませんね。

 

ABOUT ME
WEBクリ開発者
当ブログでは主にWeb制作・HTML・ CSS・SCSS・JavaScript・jQuery・Vue.js・Wordpress・個人開発情報の情報を発信。 WEBデザイナー・コーダー・プログラマー向けのサイトです。 また、個人開発のサービスやアプリのお知らせもさせていただいています。