ブラウザの「Web Speech API」を使ったシンプルな音声認識・音声合成のテスト【2025年11月】

Last updated at 2025-11-03Posted at 2025-11-03

はじめに

以前、ブラウザ上で手軽に扱える「音声認識・音声合成」として使ったことがある「Web Speech API」の話です。

記事の中で扱う「Web Speech API」については、MDN の以下のページに説明が書かれています。

Web Speech API には、音声認識・音声合成のそれぞれのインターフェースが個別にあります。MDN のページで見てみると、それぞれの具体的な内容は以下となります。

以下は、音声認識用のインターフェースです。

上記のページの下のほうには Speech color changer というサンプルの、コードが示されていたりもします。

以下は、音声合成用のインターフェースです。

上記のページの下のほうには音声合成のサンプルのコードが示されていたりもします。

それでは、実際に試していきます。

以下は音声認識の処理を、シンプルに試してみたものです。

このサンプルの動作について、少しだけ補足します。

このサンプルをブラウザで開くと、以下のようにボタンだけが表示された状態になります。

このボタンを押すとマイク利用の許可を求められるので、それを許可します。その後、例えば「音声認識のテスト」としゃべると、以下のように途中段階の認識結果が、ボタンの下に表示されます。

そして、最終的にしゃべった内容が最後まで認識されたら、以下のように確定された認識内容を表示するようにしています。

この後で少しだけ、コードについて補足します。

以下は、マイク利用の許可に関わる部分です。

今回、ボタン押下で音声認識を行うようにしていますが、そのボタン押下に関して「最初の押下時のみ、マイク利用の権限を求める」という処理にするために、上記の処理を行っています。

認識処理に関わる部分はいくつかありますが、例えば以下の部分です。

Web Speech API による音声認識では、認識途中の内容も取得できるのですが、今回はその途中段階の内容も表示するようにしています。

以下は音声合成の処理を、シンプルに試してみたものです。

このサンプルの動作について、少しだけ補足します。

このサンプルをブラウザで開くと、以下のようにテキストボックスとボタンが表示された状態になります。

上記のテキストボックスにテキストを入力し、その状態で「読み上げ開始」ボタンを押すと、音声合成が行われます。

この後で少しだけ、コードについて補足します。

音声合成に関わる処理の一部を、以下でピックアップしてみます。

今回の内容では、「ボタン押下時に、テキストボックスに入力されていたテキストを読みあげる」という処理にしています。

上記の処理では、「ボタン押下時に既に読み上げ中であれば、既に実行中の内容をキャンセルする」ということをやっています。また、読み上げの言語は日本語が基本となるようにして、速度・ピッチは標準設定で読み上げを行う処理にしています。