Help us understand the problem. What is going on with this article?

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

More than 3 years have passed since last update.

概要

音声合成と音声認識の両技術を活用して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)」の部分は認識対象から外しました。
結果、キーボード操作なしの発話だけで操作可能です。
ぜひお試し下さい。

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away