差分

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

--- p5js:11.speech-recognition [2021/03/09 20:43] – baba
+++ p5js:11.speech-recognition [2021/06/30 10:22] (現在) – [音声認識で操作する] baba
@@ 行 1: / 行 1: @@
-====== 音声認識で操作する ======
+====== 音声認識を利用する ======
-音声認識を利用して様々な機器を操作することはスマートスピーカーの登場によってすでに一般化したと言えます。一方で音声認識を利用してなにかアプリケーションを開発したいと思った時、どのようなやり方があるでしょうか？昔は音声認識といえば京大のJuliusだったのですが、Web Speech APIを利用することで簡単に音声認識機能を自分のプログラム内に組み込むことが可能になりました。
+音声認識を利用して様々な機器を操作することはスマートスピーカーの登場によってすでに一般化したと言えます。一方で音声認識を利用してなにかアプリケーションを開発したいと思った時、どのようなやり方があるでしょうか？昔は音声認識といえば京大のJuliusだったのですが、Web Speech APIを利用することで簡単に音声認識機能を自分のプログラム内に組み込むことが可能になりました。jsとかにこだわりはなく、とにかく高精度に音声認識をしたい、という場合は以下のJuliusを触ってみてください。githubでも公開されています。
-jsとかにこだわりはなく、とにかく高精度に音声認識をしたい、という場合は以下のJuliusを触ってみてください。githubでも公開されています。
   * https://julius.osdn.jp
-さて、このページではjsを利用してブラウザ上で手軽に音声認識を利用してみたいと思います。なにか簡単な実装目標があると良いかなと思うので、Canvasの背景色を音声認識を利用して操作可能なプログラムを開発してみたいと思います。兎にも角にも音声認識をまずどうやるかですが、MDN Web Docs（Moz://aによるウェブブラウザ規格マニュアル）にはすでにWeb Speech APIなるものが公開されています。
+さて、このページでは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/#javascript を見る限りは音声読み上げしか対応しなさそうな雰囲気もありますが。
+見ていただくとわかりますが、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
+====== 音声入力で背景色を変更する ======
+それでは上記サンプルを理解したところで喋った色で背景色が変わるプログラムを作成してみます．まず全体背景色を変更するには，bodyタグのcssで背景色を設定すればよいです．javascriptでcssを操作する場合は，対象となるidのDOMに対して，.style.background="black" 等とすれば背景色を黒色に変更できます．今回は読み上げた音声をそのままbodyタグの背景色に適応してみます．最初にindex.htmlの<body>にたいして id="body" を追加しておきます．
+では実際のコードです．W3C（html等のウェブ系の規格をつくってるところ）では色指定にはカラー名と呼ばれる色名指定もできるようになっています．例えば
+  - black
+  - white
+  - red
+  - blue
+  - green
+等です．今回は音声認識を英語（en）に切り替えて，読み上げた単語をそのままbodyのスタイルに適応させてみます．
+<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;
+  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");
+  }
+}
-音声認識（日本語もできる）のサンプルがすでにあります。下記のgithubのページをご覧ください。
+</file>
-  * [[https://github.com/IDMNYU/p5.js-speech|p5.js-speech]]
+===== 例 =====
 音声認識機能を利用した応用例として、challengeableを制作しました。
 <html>