Web Speech API（ウェブ音声API）の説明と使い方とサンプルコード【2023】

JavaScript
2023.03.13

Web Speech APIとは？

Web Speech APIは、W3C（World Wide Web Consortium）が策定したAPIです。ブラウザのネイティブAPIなので料金も認証キーも不要です。JavaScriptの知識さえあれば誰でも無料ですぐに利用することが出来ます。

Web Speech APIを使用することで、ブラウザ上で音声を認識し、テキストに変換したり、逆にテキストを音声に変換したりすることができます。また、多言語に対応しており、複数の言語で音声認識や音声合成を行うことができます。

Web Speech APIの機能について

Web Speech APIには、以下の2つの機能があります。

  1. 音声認識
  2. 音声合成

１．音声認識（SpeechRecognition）

音声認識は、音声をテキストに変換する機能です。Web Speech APIでは、SpeechRecognitionというオブジェクトを使用して、音声認識を実現します。SpeechRecognitionは、以下のように使用します。

const recognition = new window.SpeechRecognition();
recognition.lang = 'ja-JP';
recognition.start();

recognition.onresult = function(event) {
  const transcript = event.results[0][0].transcript;
  console.log(transcript);
};

このコードでは、SpeechRecognitionオブジェクトを作成し、音声認識の言語を指定し、音声認識を開始しています。音声認識が成功すると、onresultイベントが発生し、認識されたテキストがevent.resultsオブジェクトに含まれます。アクセスした時点で音声認識を開始しようとするため、そのまま使用するには向いていませんのでご注意ください。

２．音声合成（SpeechSynthesis）

音声合成は、テキストを音声に変換する機能です。Web Speech APIでは、SpeechSynthesisというオブジェクトを使用して、音声合成を実現します。SpeechSynthesisは、以下のように使用します。

const synthesis = window.speechSynthesis;
const utterance = new SpeechSynthesisUtterance('Hello, world!');
synthesis.speak(utterance);

このコードでは、SpeechSynthesisオブジェクトを作成し、SpeechSynthesisUtteranceオブジェクトを作成して、そのテキストを音声合成しています。音声合成が成功すると、ブラウザでその音声が再生されます。アクセスすると「Hello world」とブラウザから音声出力されます。

Web Speech APIの対応状況

Web Speech APIは、現在、Google Chrome、Microsoft Edge、Mozilla Firefox、Safariなどの一部のブラウザでサポートされています。ただし、対応していないブラウザもありますので、使用する前にブラウザの対応状況を確認する必要があります。https://developer.mozilla.org/ja/docs/Web/API/Web_Speech_APIをご参考にしてみてください。
（2023年3月時点ではFirefoxは未対応です。）

SpeechRecognitionの使い方とサンプル

SpeechRecognitionを使うには、以下の手順で行います。

  1. SpeechRecognitionオブジェクトを生成する
  2. イベントリスナーを登録する
  3. start()メソッドを呼び出す
// 1. SpeechRecognitionオブジェクトを生成する
SpeechRecognition = window.SpeechRecognition || webkitSpeechRecognition;
const recognition = new SpeechRecognition();

// 2. イベントリスナーを登録する
recognition.addEventListener('result', (event) => {
  const transcript = event.results[0][0].transcript;
  console.log(transcript);
});

// 3. start()メソッドを呼び出す
recognition.start();

このコードでは、SpeechRecognitionオブジェクトを生成し、resultイベントリスナーを登録しています。start()メソッドを呼び出すことで、音声認識を開始します。

1.についてはSpeechRecognitionをwindow.SpeechRecognition || webkitSpeechRecognition;で宣言していますが、これは接頭辞webkitが後々不要になった場合にはwebkit無しでも動作するう、どちらでも動作が可能なように指定しています。

２．は

recognition.addEventListener('result', (event) => {

のようにaddEventListnerでイベントを待機しています。この記述はonresultを使って下記でも動作します。好みに応じて使い分けてみてください。

recognition.onresult = (event) => {

resultイベントは、音声認識が成功した場合に発生します。イベントオブジェクトのresultsプロパティから、認識されたテキストを取得することができます。上記の例では、transcript変数に認識されたテキストが格納され、コンソールに出力されます。

また、以下のように、endイベントリスナーを登録することで、音声認識が終了した際に処理を実行することもできます。

recognition.addEventListener('end', () => {
  console.log('音声認識が終了しました');
  recognition.start(); // 音声認識を再度開始する
});

このaddEventListener('end', () => {もresultと同様にonresult = (event) => {にしても同じ動作をします。

recognition.onend = () => {
  console.log('音声認識が終了しました');
  recognition.start(); // 音声認識を再度開始する
);

サンプルが出来たらブラウザ（PCのマイク）に向かって言葉をかけてみてください。onresultが発火してコンソールに話した言葉が表示されます。

ちなみに初回アクセス時や再度ページを訪問した際に、ブラウザから音声の聞き取りを許可するかどうかがユーザーに尋ねられます。これは意図しない会話がブラウザ経由でネットワーク上に漏れることが無いようにセキュリティ面での機能ですのでどうしようもありません。

SpeechRecgnitionのオプションについての補足

  • 言語設定: 認識する言語を設定することができます。langプロパティを使用して、認識言語を指定します。たとえば、英語の場合はen-US、日本語の場合はja-JPなどです。
  • 継続的な認識: continuousプロパティをtrueに設定することで、音声認識を継続的に行うことができます。この場合、ユーザーが話し始めるたびに、SpeechRecognitionは新しい認識セッションを開始し、認識結果を追加していきます。
  • 途中経過の取得: interimResultsプロパティをtrueに設定することで、認識の途中経過を取得することができます。この場合、認識結果が確定する前に、途中経過として認識された言葉が返されます。
  • イベントの処理: start()メソッドを呼び出すことで、録音を開始します。そして、認識結果が利用可能になると、onresultイベントが発生します。このイベントハンドラー内で、認識結果を処理することができます。

これらのオプションはSpeechRecgnitionオブジェクト（上記サンプルではrecognition）に対して指定します。例えば次のように指定します。recognitionの宣言直下に置くのが普通でしょう。

recognition.lang = 'ja-JP';
recognition.continuous = true;
recognition.interimResults = true;

SpeechSynthesisの使い方とサンプル

以下のようなコードで、SpeechSynthesisの基本的な使い方を示します。

const msg = new SpeechSynthesisUtterance();
msg.text = 'Hello, world!';
msg.lang = 'en-US';
msg.rate = 1;

speechSynthesis.speak(msg);

このコードでは、英語でHello, world!と音声合成（ブラウザが喋る機能の提供）を行っています。音声の言語はen-USに設定されており、発声速度は標準速度の1に設定されています。

speechSynthesis.speak(msg);でHello, world!という発声が実行されます。

また、以下のようにgetVoices()メソッドを使用して、利用可能な音声の種類を取得することも可能です。

const voices = speechSynthesis.getVoices();
console.log(voices);

SpeechSynthesisのオプションについて補足

  • 言語設定: 出力する音声の言語を設定することができます。langプロパティを使用して、音声の言語を指定します。たとえば、英語の場合はen-US、日本語の場合はja-JPなどですね。
  • 発声速度: 音声の発声速度を調整することができます。rateプロパティを使用して、発声速度を指定します。値は、1が標準速度で、2が2倍速度、0.5が半分の速度などです。
  • 音声の種類: getVoices()メソッドを使用して、利用可能な音声の種類を取得することができます。このメソッドを呼び出すと、SpeechSynthesisVoiceオブジェクトの配列が返されます。この配列から、利用したい音声を選択することができます。
  • イベントの処理: speak()メソッドを呼び出すことで、音声を出力します。音声出力が開始されると、onstartイベントが発生します。音声出力が完了すると、onendイベントが発生します。

まとめ

Web Speech APIは、音声認識と音声合成をWebアプリケーションに組み込むことができるAPIです。

音声認識を行うには、SpeechRecognitionオブジェクトを生成し、イベントリスナーを登録し、start()メソッドを呼び出します。音声認識の結果は、resultイベントで取得できます。また、endイベントを利用することで、音声認識を継続的に行うことができます。

音声合成を行うには、SpeechSynthesisオブジェクトを生成し、speak()メソッドを呼び出します。音声の再生中に発生するイベントを利用することで、音声の制御や処理の実行が可能です。

Web Speech APIは、現在Google Chromeブラウザのみで利用可能であり、HTTPSプロトコルを使用する必要があります。

Web Speech APIを利用することで、音声による操作や情報提供を実現することができます。特に、視覚障がい者や手が使えない人たちのアクセシビリティを向上させることが期待されます。

タイトルとURLをコピーしました