Web Speech APIを使ってテキストを読み上げる方法
こんにちわ！
つい最近サイトに読み上げ機能を実装する案件があったのでWeb Speech APIを使ってテキストを読み上げる方法を紹介します。
Web Speech APIとは
ウェブ音声 API (Web Speech API) で、音声データをウェブアプリに組み入れることができます。 ウェブ音声 API は、SpeechSynthesis （音声合成、Text-to-Speech）と SpeechRecognition （非同期音声認識、Asynchronous Speech Recognition）の 2 つの部分から成り立っています。
登録も認証キーもいらず簡単なJavascriptの知識だけあれば誰でも使うことができます。
今回はSpeechSynthesisに絞って紹介していきます。
実装例: ソースコード
以下は、テキストを読み上げる機能を持つ簡単なウェブページのサンプルコードです。
index.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);
その他のオプション
さらにカスタマイズしたい場合、以下のようなオプションも利用可能です。
- 言語設定: 出力する音声の言語を指定します。
utterance.lang = "ja-JP"; // 日本語
- 発声速度: 音声のスピードを調整します。
utterance.rate = 1.5; // 速度 (0.1〜10、初期値:1)
- 音量設定: 音声の音量を調整します。
utterance.volume = 1; // 音量 (0〜1、初期値1)
まとめ
このように、Web Speech API を使用することで、簡単なJavaScriptで音声読み上げ機能をウェブサイトに追加することができます。視覚障がい者や、手が使えない状況にあるユーザーのアクセシビリティを向上させるために、ぜひ活用してみてください。