【Web Speech API（SpeechRecognition）】ブラウザで音声認識機能を実装する

2023年1月11日2023年1月12日

はじめに
Web Speech APIとは
先に成果物
Hello World
- 実装
- 解説
認識途中の結果も取得しながら、それっぽく表示してみる
- 実装
- 解説
参考

はじめに

お世話になります、hosochinです
今回はwebブラウザの音声認識機能を利用する方法についてまとめてみます

まず代表的な音声認識のAPIについてですが、

Google Cloud Speech-to-Text
Watson Speech to Text
Bing Speech API
Amazon Transcribe

らへんが主流のようでした
が、こいつら基本有料でして、なるべく無料でやりたいなあと探していたら、「Web Speech API」なるものを見つけました

Web Speech APIとは

Web Speech APIとはwebブラウザで簡単に音声認識機能を実現できるAPIになります

https://developer.mozilla.org/en-US/docs/Web/API/Web_Speech_API

こいつはブラウザの音声認識機能になりまして、対応ブラウザなら誰でも無料で利用可能です（音声合成機能も提供しています）
早速こいつを使って音声認識機能を実装していきたいと思います
対応ブラウザについてはこちらを参照

先に成果物

web speech apiを活用して、音声によるシンプルなTODOリストを作成するツールを作ってみました
https://voicetodolist.net/
よかったら見てやってくださいmm

Hello World

まずは簡単なコードで動きをみてみたいと思います

実装

index.html

<script>
  speechRecognition = new webkitSpeechRecognition();
  speechRecognition.onresult = console.log;
  speechRecognition.start();
</script>

解説

web speech apiを使うためにwebkitSpeechRecognitionのインスタンスを作成してやります
上記のhtmlをブラウザで開くとマイクの使用許可を求めるポップアップがでるはずです
許可をクリックするとマイクがオンになるので、何か喋ってみてください
そうするとコンソールログが出力されます

「テスト」と喋ってみたんですが、results[0][0].transcriptに’テスト’と出力されていますね！
音声認識の解析結果がここに入ってくるわけです
transcriptの詳細はこちら

認識途中の結果も取得しながら、それっぽく表示してみる

音声認識中のテキストを表示しながら、認識が完了した結果をリスト形式で表示してみたいと思います

実装

index.html

<div>
  <button id="start-btn">START</button>
  <button id="stop-btn">STOP</button>
</div>

<div>
  音声認識中のテキスト
  <p id="process"></p>
</div>
<div>
  認識結果
  <ol id="results"></p>
</div>

<script>
  const startBtn = document.querySelector("#start-btn");
  const stopBtn = document.querySelector("#stop-btn");
  const process = document.querySelector("#process");
  const results = document.querySelector("#results");

  const recognition = new webkitSpeechRecognition();

  // 日本語を指定
  recognition.lang = "ja-JP";
  // 認識途中でも結果を得る
  recognition.interimResults = true;
  // 認識を終わらせない
  recognition.continuous = true;

  recognition.onresult = (event) => {
    let interimTranscript = ""; // 認識中のテキスト
    for (let i = event.resultIndex; i < event.results.length; i++) {
      let transcript = event.results[i][0].transcript;
      if (event.results[i].isFinal) {
        // 音声認識が完了した場合にisFinalがtrueになる
        var result = document.createElement("li");
        result.innerText = transcript;
        results.appendChild(result);
      } else {
        interimTranscript += transcript;
      }
    }
    process.innerHTML = interimTranscript;
  };

  startBtn.onclick = () => {
    recognition.start();
  };

  stopBtn.onclick = () => {
    recognition.stop();
  };
</script>

解説

startボタンを押して、マイクを許可し、テキトーに喋ってみました

画像なので分からないんですが、認識中のテキストも表示されるので、認識してくれてる感でてると思います笑

プロパティ

設定したプロパティについて説明します

lang
- 言語設定
- 日本語を設定しています
interimResults
- 中間結果を返すかどうかの設定（デフォルトはfalse）
- これをtrueにしてやることで、認識中のテキストを表示する仕掛けに利用します
continuous
- 連続した結果を返すかどうかの設定（デフォルトはfalse）
- これをtrueにしてやることで、単一の音声の認識結果が返ってきたあとも音声認識を継続できます