音声検索機能の実装

初めましてこんにちは！すんぎぃです。
SoundReviewというアプリができるまでの流れをやっています。
今回は、音声での検索方法について話していきます。
文字での検索は、すでにできているのが前提で話を進めていきます。

1.目的

文字を打たなくても簡単に検索できるようにする。

2.扱うgem・API

*Web Speech API

*Web Speech APIとは、webページで、ブラウザの音声認識(マイクの音声を文章に変換)、音声合成(文章を読み上げる)機能を使うためのAPI。
・メリット
お金も認証キーもいらない。
HTML/CSS/JSだけの静的ページでも動く。
ブラウザのネイティブAPIであるためJavaScriptライブラリをインポートする必要もない。
・デメリット
音声認識は、Chromeしか正式に対応していない。

3.手順

①app/javascriptディレクトリ以下にsearch.jsファイルを作成します。

②app/javascript/packs/application.jsを以下のように編集します。

//省略
require("../search")
//省略

application.jsにsearch.jsを読み込むための記述をしています。

③serch.jsを以下のように編集してください。

window.addEventListener('load', function(){
const startBtn = document.querySelector('#start-btn');
const resultDiv = document.getElementById("result-div");
const startBtn2 = document.querySelector('#start-btn2');
const searchIcon = document.querySelector('.search-icon2');

SpeechRecognition = webkitSpeechRecognition || SpeechRecognition;
let recognition = new SpeechRecognition();
recognition.lang = 'ja-JP';
recognition.interimResults = true;
recognition.continuous = true;
let finalTranscript = ''; 
recognition.onresult = (event) => {
 const interimTranscript = event.results[0][0].transcript;
 
 resultDiv.value =  interimTranscript ;
}
startBtn2.addEventListener('click', function(){
 recognition.start();
 searchIcon.src="/images/maic2.png"
 
 setTimeout(function(){
   recognition.stop();
   document.getElementById("start-btn").click();
 }, 5500);
 
})

startBtn.addEventListener('click', function(){
 recognition.stop();
})
resultDiv.addEventListener('change', function(){
 document.getElementById("start-btn").click();
})

})

window.addEventListener('load', function(){}) 

とすることでページが読み込まれた後にJavascriptのコードを実行するように、loadイベントを用いて実装しています。

documentオブジェクトは、ブラウザ上で表示された情報(HTML)を操作することができるオブジェクトです。

HTMLで書かれたファイルは単なる文字情報なので、そのまま表示するととても見にくいです。そのため、HTMLを解析しDOMに変換、CSSやJavaScriptによる装飾を行ってから画面に映すという工程を経て一般的なWebページは表示されます。

*constを使って変数を定義しています。
*constというのは、後から書き換えることのでない変数を定義する書き方です。

//class名がfugaの要素を指定する場合
document.querySelector(".fuga")

//id名がhogeの要素を指定する場合
document.querySelector("#hoge")

//h1タグの要素を指定する場合
document.querySelector("h1")

querySelectorを用いることでHTML上から引数で指定したセレクタと合致する要素のうち一番最初に見つかった要素1つを取得することができます。

document.getElementById("result-div")

getElementById("id名")で因数に渡したidを持つ要素を取得することができます。

SpeechRecognition = webkitSpeechRecognition || SpeechRecognition;

Chrome と Firefox 両方に対応するようにしています。

recognition.start()が実行されるとマイクが許可されます。ここで話はじめ終わったタイミングでrecognition.onresultが着火して、引数の event が渡されます。
そして、認証結果がevent.results[0][0].transcriptの中に入っています。

recognition.lang = 'ja-JP';

ここでは、言語の設定をしています。
 BCP47言語タグの文字列で指定します。

日本語: ja-JP
アメリカ英語: en-US
イギリス英語: en-GB
中国語: zh-CN
韓国語: ko-KR

recognition.interimResults = true;

認識している途中でも暫定の結果を得ることができるようにしています。

recognition.continuous = true;

デフォルトでは、発言が終わったタイミングで録音が勝手に終了しますが、このように設定することで勝手に終了することなく、続けて認識してくれます。ただし1分ぐらいの沈黙があると終了します。

これにて完成です。

4.まとめ

以下のように音声で検索することができれば完成です。
アリゲータいました。

5.過去記事