JavaScript
HTML5
vue.js
SpeechSynthesis
SpeechRecognition

Chromeブラウザと英会話しながら形容詞の語順を学んでみる

概要

音声合成と音声認識の両技術を活用してChromeブラウザを相手に会話可能なページを作成します。
継続利用可能な役立つページにしたいので会話のテーマは「英語における形容詞の語順」の理解とします。

TL;DR

  1. デモサイトはこちら (Chromeブラウザでアクセスしてね!)
  2. ソースコードはこちら
  3. 利用APIはこちら

音声認識について

PCのマイクに向かって喋った言葉を理解してもらう。
Web Speech API インターフェイスの「SpeechRecognitionXXX」を利用します。

今回利用したのは以下のとおり。

インターフェース 説明
SpeechRecognition 音声認識の親玉(認識言語や認識結果の候補数の設定など)
SpeechGrammarList 認識させたい単語の列挙
speech.js
const SpRec = SpeechRecognition
const SpGrm = SpeechGrammarList

const words = QuestionGenerator.getWords() // 認識させたい単語を全部配列で取得
const grammar = '#JSGF V1.0; grammar words; public <words> = ' + words.join(' | ') + ' ;'

// 認識の準備として各種設定
const speechRecognitionList = new SpGrm()
speechRecognitionList.addFromString(grammar, 1)
SpRec.grammars = speechRecognitionList
SpRec.continuous = false
SpRec.lang = 'en-US'
SpRec.interimResults = false
SpRec.maxAlternatives = 3

SpRec.onstart = function (event) {
  // 認識開始
}
SpRec.onresult = function (event) {
  // 認識結果取得
}
SpRec.onend = function (event) {
  // 認識終了
}

音声合成について

PCのスピーカーから言葉を発してもらう。
Web Speech API インターフェイスの「SpeechSynthesisXXX」を利用します。

今回利用したのは以下のとおり。

インターフェース 説明
SpeechSynthesis デバイス上の合成音声に関する情報を検索したり、speech の開始、一時停止、またはその他のコマンドを使用したりする際に使われます
SpeechSynthesisUtterance 発話内容(言語、音声の高低、音量を含む)
SpeechSynthesisVoice システムがサポートする音声
speech.js
// システムがサポートする音声のリストを取得
const voiceList = window.speechSynthesis.getVoices()

// 音声リストの1番目を利用して喋ってもらう
const msg = 'Hello!'
var utterThis = new SpeechSynthesisUtterance(msg)
utterThis.voice = voiceList[0]
window.speechSynthesis.speak(utterThis)

参考にさせていただいたサイト

  1. 音声合成や音声認識を説明するデモ

まとめ

音声合成、音声認識共にAPIの通りに引数を渡すだけで自動的しゃべったり、認識を行なってくれるので簡単に利用することが出来ます。

文頭が「a」の場合、「あ」って発音してもまず認識してもらえませんでした。
同じ「限定詞(determiner)」の「The」「ざ、じ」は大丈夫なんですけどねぇ。。。
ちなみに「えいー」って発音すると認識してくれるのですが、それは負けな気がするので「限定詞(determiner)」の部分は認識対象から外しました。
結果、キーボード操作なしの発話だけで操作可能です。
ぜひお試し下さい。

最後まで読んでくれた方ありがとうございます。