====== 音声認識を利用する ======
音声認識を利用して様々な機器を操作することはスマートスピーカーの登場によってすでに一般化したと言えます。一方で音声認識を利用してなにかアプリケーションを開発したいと思った時、どのようなやり方があるでしょうか？昔は音声認識といえば京大のJuliusだったのですが、Web Speech APIを利用することで簡単に音声認識機能を自分のプログラム内に組み込むことが可能になりました。jsとかにこだわりはなく、とにかく高精度に音声認識をしたい、という場合は以下のJuliusを触ってみてください。githubでも公開されています。
* https://julius.osdn.jp
さて、このページではjsを利用してブラウザ上で手軽に音声認識を利用してみたいと思います。なにか簡単な実装目標があると良いかなと思うので、の背景色を音声認識を利用して操作可能なプログラムを開発してみたいと思います。兎にも角にも音声認識をまずどうやるかですが、MDN Web Docs（モジラによるウェブブラウザ規格マニュアル）にはすでにWeb Speech APIなるものが公開されています。
* https://developer.mozilla.org/ja/docs/Web/API/Web_Speech_API
見ていただくとわかりますが、2021年3月9日時点で、未だに実験的な機能であることが明記されています。ブラウザ互換性一覧で確認するとこの機能が動作するのは、ChromeかEdgeのみとなり、FirefoxやSafariではWeb Speech APIは未実装です。ただしこの前のAppleの発表によって、Safariは11.3以降からこのWeb Speech APIがサポートされることがアナウンスされました。素晴らしいですね。https://developer.apple.com/safari/features/ を見る限りは音声読み上げしか対応しなさそうな雰囲気もありますが。
では早速スケッチしていきましょう。
====== シンプルなテンプレート ======
こちらでシンプルなテンプレートを用意しておきました．[[https://idmnyu.github.io/p5.js-speech/|p5.speech.js]]を利用したサンプルになります．このページに行くといくつかサンプルを確認することができるので，「なんだこっちを参照すればいいじゃん」と思うかもしれませんが，実際に利用するとわかりますが，微妙にかゆいところに手が届かない実装になっています．具体的には
* 音声認識をstopするメソッドが用意されていない
* continousを利用した連続音声認識だと，タイムアウトまでが非常にながく，喋る内容を順次テキスト化することが困難
といった点がよろしくないため，少しこちらで改造を加えています．音声認識を利用したアプリケーション開発はこちらのサンプルからスタートすると作りやすいとおもいます．
* 音声認識テンプレート: https://editor.p5js.org/tetsuakibaba/sketches/9qIVXpsU5
Speech Recognition Demo
by Tetsuaki Baba
status: quiet
Log
var myRec = new p5.SpeechRec(); // new P5.SpeechRec object
var is_recognition_activated = false;
var words = [];
function setup() {
// キャンバスは使わない
noCanvas();
// スピーチの切れ目があったときに呼び出す関数を登録
myRec.onEnd = endSpeech;
// 随時音声入力をテキスト化する際に呼び出される関数を登録
myRec.onResult = parseResult;
// 連続した音声認識は行わない．プログラム内で適時音声認識のstopとstartを制御する
myRec.continuous = false; // no continuous recognition
// 読み上げている最中の認識途中の文字列も利用する場合
myRec.interimResults = true; // allow partial recognition (faster, less accurate)
// プログラム制御用変数（true: 音声認識利用中を示す）
is_recognition_activated = false;
// 認識言語は日本語
myRec.rec.lang = "ja";
// start/stop のDOMボタンを押したときに音声認識切り替えを行う
select("#button_start_or_stop").mouseClicked(toggleSpeechRecognition);
}
// 認識途中随時呼び出される関数（認識途中の文字列を取得できる）
function parseResult() {
document.getElementById("label").innerHTML = "speaking...";
document.getElementById("text").value = myRec.resultString;
}
function toggleSpeechRecognition() {
// 認識ステータスを反転させる（trueならfalse，falseならtrue）
is_recognition_activated = !is_recognition_activated;
// 音声認識アクティベート
if (is_recognition_activated == true) {
myRec.rec.lang = "ja"; // 日本語認識
myRec.start(); // 認識スタート
this.html("stop"); //ボタンの表示をstopにする
}
// 音声認識を停止させる
else {
// 音声認識をとめる
myRec.stop();
// ボタンの表示をstartにする
this.html("start");
}
}
function endSpeech() {
// 音声認識アクティベート中なら
if (is_recognition_activated == true) {
// 認識文字列に何も入っていなければ（タイムアウトでendSpeechになった場合）
if (!myRec.resultValue) {
myRec.start(); // start engine
return;
}
// 認識文字列になんか入ってれば
if (myRec.resultString.length > 0) {
console.log("End");
document.getElementById("label").innerHTML = "quiet";
document.getElementById("textarea").innerHTML +=
myRec.resultString + "。";
document.getElementById("text").value = "";
console.log(myRec.resultString);
myRec.resultString = "";
}
myRec.start(); // start engine
console.log("start");
}
}
まずはこのプログラムをしっかりと理解してください．これを理解できれば自分の利用したいアプリケーションでも簡単に音声認識を実装することができると思います．音声認識の言語設定は以下を参照してください．
* 言語指定
* BCP-47:speech apiはこっちの規格（音声認識をする場合）
* https://appmakers.dev/bcp-47-language-codes-list/
* ISO-639-2:google translate はこっちの規格
* https://cloud.google.com/translate/docs/languages
====== 音声入力で背景色を変更する ======
それでは上記サンプルを理解したところで喋った色で背景色が変わるプログラムを作成してみます．まず全体背景色を変更するには，bodyタグのcssで背景色を設定すればよいです．javascriptでcssを操作する場合は，対象となるidのDOMに対して，.style.background="black" 等とすれば背景色を黒色に変更できます．今回は読み上げた音声をそのままbodyタグの背景色に適応してみます．最初にindex.htmlのにたいして id="body" を追加しておきます．
では実際のコードです．W3C（html等のウェブ系の規格をつくってるところ）では色指定にはカラー名と呼ばれる色名指定もできるようになっています．例えば
- black
- white
- red
- blue
- green
等です．今回は音声認識を英語（en）に切り替えて，読み上げた単語をそのままbodyのスタイルに適応させてみます．
var myRec = new p5.SpeechRec(); // new P5.SpeechRec object
var is_recognition_activated = false;
var words = [];
function setup() {
noCanvas();
myRec.onEnd = endSpeech;
myRec.onResult = parseResult;
myRec.continuous = false; // no continuous recognition
myRec.interimResults = true; // allow partial recognition (faster, less accurate)
is_recognition_activated = false;
myRec.rec.lang = "en";
select("#button_start_or_stop").mouseClicked(toggleSpeechRecognition);
}
function parseResult() {
document.getElementById("label").innerHTML = "speaking...";
document.getElementById("text").value = myRec.resultString;
}
function toggleSpeechRecognition() {
is_recognition_activated = !is_recognition_activated;
if (is_recognition_activated == true) {
myRec.rec.lang = "en";
myRec.start();
this.html("stop");
}
else {
myRec.stop();
this.html("start");
}
}
function endSpeech() {
if (is_recognition_activated == true) {
if (!myRec.resultValue) {
myRec.start(); // start engine
return;
}
if (myRec.resultString.length > 0) {
console.log("End");
document.getElementById("label").innerHTML = "quiet";
document.getElementById("textarea").innerHTML +=
myRec.resultString + "。";
document.getElementById("text").value = "";
console.log(myRec.resultString);
document.getElementById("body").style.background = myRec.resultString;
myRec.resultString = "";
}
myRec.start(); // start engine
console.log("start");
}
}
===== 例 =====
音声認識機能を利用した応用例として、challengeableを制作しました。
Challengeableは音声認識区分によって会話を録音し、ユーザの「噛み」をその場で検証するためのツールです。「いま〇〇っていってなかった？」をその場で手軽に確かめることができるようになります。汎用的な波形編集ソフトウェアではどの部分で噛んだのかをすぐに見つけることが困難で、即座に該当箇所を再生するには熟練の技術が必要とされています。そこで本システムでは、自動音声認識区切りを参考にして、即座に噛んだであろう箇所を見つけ、ワンクリックで録音箇所を再生することを可能としました。
詳しくはgithubのページを参照してください。
* https://github.com/TetsuakiBaba/challengeable