Web Speech API を使ってWebブラウザで音声認識を行う
Web Speech APIを使い、ブラウザで音声認識を行う方法です。
Web Speech APIは音声合成と非同期音声認識の2つの部分から成り立っていますが、今回は非同期音声認識の部分になります。
以下、条件など。
- ローカル以外でWeb Speech APIを使うにはhttpsで通信する必要がある
- インターネット接続が必要(Chromeの場合)
- 音声認識結果はブラウザによって異なる
初期化
本記事はChrome用のものです。
次の処理をページロード時に1度実行します。
認識開始
設定
設定の一部を紹介します。なお、ブラウザによっては対応していないものもあるので注意が必要です。
認識途中にも受け取る
音声認識が確定する前でも、変換途中のデータを通知するかどうかを設定します。
言語設定
認識する言語を設定します。
結果の最大候補数
結果として返す候補数の最大値を設定します。
イベントハンドラ
認識結果取得
音声認識サービスが結果を返した時にコールされます。
認識途中にも結果を受け取る(interimResults = true
)場合は、event.results[0].isFinal
で認識完了かどうかを判定します。(true
なら認識完了)
maxAlternatives
の値までevent.results[0].length
が増えます。
認識途中、完了時ともに、event.results[0][n].transcript
に変換後の文字列が格納されています。
認識終了
音声認識サービスとの接続が切れた時にコールされます。
この時点で音声認識は終了してしまうので、引き続き認識を行いたい場合は、ここで再度start()
をコールします。
認識なし通知
音声認識サービスが"結果なし"を返した時にコールされます。
音声補足開始
ユーザーエージェントが音声の捕捉を開始した時にコールされます。
音声補足終了
ユーザーエージェントが音声の捕捉を終了した時にコールされます。
認識終了
一度認識が完了すると自動で停止します。強制的に音声認識を停止したい場合はstop()
をコールします。
サンプル
音声認識機能をまとめてクラス化したものです。指定したHTMLのエレメントに認識結果を追加します。
SpeechRecognition = webkitSpeechRecognition; | |
class VoiceInput { | |
_targetElement; | |
_currentValue; | |
_recognition; | |
_oneTime; // 一度の認識で終了するかどうか. | |
constructor(element) { | |
this._targetElement = element; | |
this._currentValue = element.value; | |
const recognition = new SpeechRecognition(); | |
// 認識途中にも受け取る | |
recognition.interimResults = true; | |
// set event handler. | |
recognition.onaudiostart = () => { | |
console.log('SpeechRecognition', 'onaudiostart'); | |
}; | |
recognition.onaudioend = () => { | |
console.log('SpeechRecognition', 'onaudioend'); | |
}; | |
recognition.onresult = (event) => { | |
if (event.results[0].isFinal) { | |
// 確定した. -> 現在の値も更新. | |
this._currentValue = this._currentValue + event.results[0][0].transcript | |
this._targetElement.value = this._currentValue; | |
} else { | |
this._targetElement.value = this._currentValue + event.results[0][0].transcript; | |
} | |
}; | |
recognition.onnomatch = () => { | |
console.log('SpeechRecognition', 'onnomatch'); | |
}; | |
recognition.onend = () => { | |
console.log('SpeechRecognition', 'onend', this._targetElement.id); | |
// 自動で停止するので、stop()コールまでは継続してstart()する. | |
if (this._recognition && !this._oneTime) { | |
this._recognition.start(); | |
return; | |
} | |
}; | |
this._recognition = recognition; | |
} | |
/** | |
* 認識開始. | |
* @param {*} oneTime true - 一度の認識で終了する | |
*/ | |
start(oneTime) { | |
if (this._recognition) { | |
this._oneTime = oneTime; | |
this._recognition.start(); | |
} | |
} | |
stop() { | |
if (this._recognition) { | |
this._recognition.stop(); | |
this._recognition = undefined; | |
} | |
} | |
} |
使い方
認識ごとにインスタンスを生成します。