音声駆動型ウェブアプリ - Web Speech API の概要

新しい JavaScript Web Speech API を使用すると、ウェブページに音声認識を簡単に追加できます。この API を使用すると、Chrome バージョン 25 以降の音声認識機能を細かく制御し、柔軟に利用できます。話している最中に認識されたテキストがほぼすぐに表示される例を次に示します。

Web Speech API のデモ

デモ / ソース

内部を見てみましょう。まず、webkitSpeechRecognition オブジェクトが存在するかどうかを確認して、ブラウザが Web Speech API をサポートしているかどうかを確認します。サポートしていない場合は、ブラウザをアップグレードするようユーザーに提案します（API はまだ試験運用中であるため、現在はベンダー プレフィックスが付いています）。最後に、音声インターフェースを提供する webkitSpeechRecognition オブジェクトを作成し、その属性とイベント ハンドラをいくつか設定します。

if (!('webkitSpeechRecognition' in window)) {
    upgrade();
} else {
    var recognition = new webkitSpeechRecognition();
    recognition.continuous = true;
    recognition.interimResults = true;

    recognition.onstart = function() { ... }
    recognition.onresult = function(event) { ... }
    recognition.onerror = function(event) { ... }
    recognition.onend = function() { ... }
    ...

continuous のデフォルト値は false です。つまり、ユーザーが話すのを止めると、音声認識は終了します。このモードは、短い入力フィールドなどのシンプルなテキストに最適です。このデモでは、true に設定されているため、ユーザーが話している途中で一時停止しても認識は継続されます。

interimResults のデフォルト値は false です。つまり、認識ツールから返される結果は最終的なものであり、変更されません。デモでは、変更される可能性のある初期の中間結果を取得するために、true に設定されています。デモをよく見てください。グレーのテキストは中間テキストであり、変更されることがあります。一方、黒のテキストは、最終とマークされ、変更されない認識ツールからのレスポンスです。

開始するには、ユーザーがマイクボタンをクリックします。これにより、次のコードがトリガーされます。

function startButton(event) {
    ...
    final_transcript = '';
    recognition.lang = select_dialect.value;
    recognition.start();

音声認識ツールの発話言語「lang」を、ユーザーが選択プルダウン リストで選択した BCP-47 値（英語（米国）の場合は「en-US」など）に設定します。設定されていない場合、HTML ドキュメントのルート要素と階層の lang がデフォルトで使用されます。Chrome の音声認識は、多数の言語（デモソースの langs の表を参照）をサポートしています。また、このデモには含まれていませんが、he-IL や ar-EG などの右から左に書く言語もサポートしています。

言語を設定したら、recognition.start() を呼び出して音声認識ツールを有効にします。音声のキャプチャを開始すると、onstart イベント ハンドラが呼び出され、新しい結果セットごとに onresult イベント ハンドラが呼び出されます。

recognition.onresult = function(event) {
    var interim_transcript = '';

    for (var i = event.resultIndex; i < event.results.length; ++i) {
        if (event.results[i].isFinal) {
            final_transcript += event.results[i][0].transcript;
        } else {
            interim_transcript += event.results[i][0].transcript;
        }
    }
    final_transcript = capitalize(final_transcript);
    final_span.innerHTML = linebreak(final_transcript);
    interim_span.innerHTML = linebreak(interim_transcript);
    };
}

このハンドラは、これまでに受信したすべての結果を 2 つの文字列 final_transcript と interim_transcript に連結します。結果の文字列には「新しい段落」などのユーザーの発話が含まれる場合があるため、linebreak 関数を使用して、これらの文字列を HTML タグ <br> または <p> に変換します。最後に、これらの文字列を対応する <span> 要素の innerHTML として設定します。final_span は黒いテキストでスタイル設定され、interim_span はグレーのテキストでスタイル設定されます。

interim_transcript はローカル変数であり、このイベントが呼び出されるたびに完全に再構築されます。これは、最後の onresult イベント以降にすべての中間結果が変更されている可能性があるためです。final_transcript についても、for ループを 0 から開始するだけで同じことができます。ただし、最終的なテキストは変更されないため、final_transcript をグローバルにすることで、このイベントが event.resultIndex から for ループを開始し、新しい最終的なテキストのみを追加できるように、コードを少し効率化しています。

これで完了です。残りのコードは、すべてをきれいに表示するためだけのものです。状態を維持し、ユーザーに有益なメッセージを表示し、マイクボタンの GIF 画像を静止マイク、マイクスラッシュ画像、赤い点が点滅するマイクアニメーションの間で切り替えます。

recognition.start() が呼び出されるとマイク スラッシュ画像が表示され、onstart が起動するとマイク アニメーション画像に置き換えられます。通常、この処理は非常に高速で行われるため、スラッシュは目立ちませんが、音声認識を初めて使用する場合は、Chrome でマイクの使用許可をユーザーに求める必要があります。この場合、onstart はユーザーが許可した場合にのみ起動します。HTTPS でホストされているページでは、許可を繰り返し求める必要はありませんが、HTTP でホストされているページでは必要です。

ユーザーの声を聴くことができるようにして、ウェブページを生き生きとさせましょう。

皆様からのフィードバックをお待ちしております。

プライバシー ポリシーについては、Chrome のプライバシーについてを参照してください（更新日: 2026 年 6 月 16 日）。