差分

このページの2つのバージョン間の差分を表示します。

--- processing:p5js:11.speech-recognition [2020/08/25 09:47] – baba
+++ p5js:11.speech-recognition [2021/06/30 01:47] – [シンプルなテンプレート] baba
@@ 行 1: / 行 1: @@
-====== Speech Recognition ======
+====== 音声認識で操作する ======
+音声認識を利用して様々な機器を操作することはスマートスピーカーの登場によってすでに一般化したと言えます。一方で音声認識を利用してなにかアプリケーションを開発したいと思った時、どのようなやり方があるでしょうか？昔は音声認識といえば京大のJuliusだったのですが、Web Speech APIを利用することで簡単に音声認識機能を自分のプログラム内に組み込むことが可能になりました。jsとかにこだわりはなく、とにかく高精度に音声認識をしたい、という場合は以下のJuliusを触ってみてください。githubでも公開されています。
+  * https://julius.osdn.jp
+さて、このページではjsを利用してブラウザ上で手軽に音声認識を利用してみたいと思います。なにか簡単な実装目標があると良いかなと思うので、Canvasの背景色を音声認識を利用して操作可能なプログラムを開発してみたいと思います。兎にも角にも音声認識をまずどうやるかですが、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
+<WRAP group>
+<WRAP half column>
+<file html index.html>
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.3.1/p5.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.10.2/addons/p5.sound.min.js"></script>
+    <link rel="stylesheet" type="text/css" href="style.css">
+    <meta charset="utf-8" />
+  </head>
+<body>
+  <h2>Speech Recognition Demo</h2>
+    <p>by Tetsuaki Baba</p>
+    <hr>
+    <button id="button_start_or_stop">start</button>
+    <input type="text" size="50" id="text"></input>status: <span id="label">quiet</span><br>
+    <hr> Log
+    <br>
+    <textarea id="textarea" cols=50 rows=5></textarea><br>
+    <br>
+    <script src="p5.speech.js"></script>
+    <script src="sketch.js"></script>
+</body>
+</html>
+</file>
+</WRAP>
+<file js sketch.js>
+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");
+  }
+}
+</file>
+<WRAP half column>
+</WRAP>
+</WRAP>
+まずはこのプログラムをしっかりと理解してください．これを理解できれば自分の利用したいアプリケーションでも簡単に音声認識を実装することができると思います．音声認識の言語設定は以下を参照してください．
+  * 言語指定
+    * BCP-47:speech apiはこっちの規格（音声認識をする場合）
+      * https://appmakers.dev/bcp-47-language-codes-list/
+    * ISO-639-2:google translate はこっちの規格
+      * https://cloud.google.com/translate/docs/languages
+===== 例 =====
 音声認識（日本語もできる）のサンプルがすでにあります。下記のgithubのページをご覧ください。
   * [[https://github.com/IDMNYU/p5.js-speech|p5.js-speech]]
@@ 行 8: / 行 161: @@
 </html>
-Challengeableは音声認識区分によって会話を録音し、ユーザの「噛み」をその場で検証するためのツールです。「いま〇〇っていってなかった？」をその場で手軽に確かめることができるようになります。汎用的な波形編集ソフトウェアではどの部分で噛んだのかをすぐに見つけることが困難で、即座に該当箇所を再生するには熟練の技術が必要とされています。そこで本システムでは、自動翻訳区切りを参考にして、即座に噛んだであろう箇所を見つけ、ワンクリックで録音箇所を再生することを可能としました。
+Challengeableは音声認識区分によって会話を録音し、ユーザの「噛み」をその場で検証するためのツールです。「いま〇〇っていってなかった？」をその場で手軽に確かめることができるようになります。汎用的な波形編集ソフトウェアではどの部分で噛んだのかをすぐに見つけることが困難で、即座に該当箇所を再生するには熟練の技術が必要とされています。そこで本システムでは、自動音声認識区切りを参考にして、即座に噛んだであろう箇所を見つけ、ワンクリックで録音箇所を再生することを可能としました。
 詳しくはgithubのページを参照してください。