WebSpeechAPIを利用してWebブラウザで音声認識を行う
はじめに
ウェブ音声サービスを調べていた際にWebSpeechAPIと遭遇しました。JavaScriptひとつでブラウザで簡単に音声を扱えるということで気になったので触ってみました。
WebSpeechAPIとは
WebSpeechAPIは、W3C（World Wide Web Consortium）によって策定された Web標準のAPIです。音声をテキストに変換したりテキストを音声に変換するなどブラウザ上での音声データの取り扱いを可能とします。
WebSpeechAPI Specification では以下のようなユースケースが挙げられています。（一部抜粋）
- 音声ウェブ検索
- 音声コマンド入力
- 音声運転案内
- 音声翻訳 など
音声サービスをはじめ、最近ではChatGPTと組み合わせても利用できるのではないでしょうか。
また、Web標準APIとして提供されているためサービスへのAPIコールも不要、いくら使っても無料というのはとても魅力的です。
WebSpeechAPIのブラウザ対応
2023年5月現在、どちらもExperimentalです。SpeechSynthesisAPI（音声合成）は比較的サポートされているのに対しSpeechRecognitionAPI（音声認識）は未対応またはベンダープレフィクスでの実装対象となっている状況です。
WebSpeechAPIの機能
WebSpeechAPIは以下2つから構成されます。
- 「出力」 音声合成 SpeechSynthesisAPI
- 「入力」 音声認識 SpeechRecognitionAPI
「出力」 音声合成 SpeechSynthesisAPI
テキストを音声で読み上げる機能です。読み上げる音声のオプションを指定したり、再生、一時停止、再開、停止の操作が可能です。
const utterance = new SpeechSynthesisUtterance();
const speakButton = document.querySelector(".speak");
speakButton.addEventListener("click", () => {
utterance.text = document.querySelector(".text").value;
utterance.pitch = document.querySelector(".pitch").value;
utterance.rate = document.querySelector(".rate").value;
utterance.volume = document.querySelector(".volume").value;
speechSynthesis.speak(utterance);
});
utteranceオブジェクトを作成し音声に関するオプションを指定、speechSynthesisのメソッドへ渡すことで再生することができます。音声再生中に連続してspeakを実行するとutteranceはキューに追加され、現在再生中の音声が全て読み上げられた後に再生されます。
「入力」 音声認識 SpeechRecognitionAPI
音声を認識する機能です。ユーザーがマイクから音声を入力することで、Webアプリケーションがその音声を解析し、テキストに変換することができます。
入力された音声は一度サーバーへ送信され解析されたデータを返しているため
精度や速度はブラウザによって異なります。そのためオフラインでは利用できないので要注意ではあります。
const recognition = new webkitSpeechRecognition();
recognition.lang = "ja";
recognition.continuous = true;
recognition.onresult = ({ results }) => {
const output = document.querySelector(".output");
output.textContent = results[0][0].transcript;
};
const startButton = document.querySelector(".start");
startButton.addEventListener("click", () => {
recognition.start();
});
const stopButton = document.querySelector(".stop");
stopButton.addEventListener("click", () => {
recognition.stop();
});
SpeechRecognitionオブジェクトを作成しstart()やstop()メソッドを呼ぶ。単語やフレーズが正しく認識され音声認識サービスが結果を返した際にresultイベントが発行されます。返す値の形式を選択もできるので逐次表示のような表示をすることも可能です。
さいごに
音声読み上げや音声認識は有料サービスが大多数の中、WebAPIとして提供され無料で利用できるのはとても大きのではないでしょうか。ChromeについてはGoogleの解析エンジン利用できるため精度もかなり高いです。環境は限られてしまいますが個人的な開発などで気軽に取り入れられるのはとても魅力的に思います。
Discussion