差分

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

--- p5js:11.speech-recognition [2021/06/30 09:33] – [シンプルなテンプレート] baba
+++ p5js:11.speech-recognition [2021/06/30 10:22] (現在) – [音声認識で操作する] baba
@@ 行 1: / 行 1: @@
-====== 音声認識で操作する ======
+====== 音声認識を利用する ======
 音声認識を利用して様々な機器を操作することはスマートスピーカーの登場によってすでに一般化したと言えます。一方で音声認識を利用してなにかアプリケーションを開発したいと思った時、どのようなやり方があるでしょうか？昔は音声認識といえば京大のJuliusだったのですが、Web Speech APIを利用することで簡単に音声認識機能を自分のプログラム内に組み込むことが可能になりました。jsとかにこだわりはなく、とにかく高精度に音声認識をしたい、という場合は以下のJuliusを触ってみてください。githubでも公開されています。
   * https://julius.osdn.jp
-さて、このページではjsを利用してブラウザ上で手軽に音声認識を利用してみたいと思います。なにか簡単な実装目標があると良いかなと思うので、Canvasの背景色を音声認識を利用して操作可能なプログラムを開発してみたいと思います。兎にも角にも音声認識をまずどうやるかですが、MDN Web Docs（モジラによるウェブブラウザ規格マニュアル）にはすでにWeb Speech APIなるものが公開されています。
+さて、このページではjsを利用してブラウザ上で手軽に音声認識を利用してみたいと思います。なにか簡単な実装目標があると良いかなと思うので、の背景色を音声認識を利用して操作可能なプログラムを開発してみたいと思います。兎にも角にも音声認識をまずどうやるかですが、MDN Web Docs（モジラによるウェブブラウザ規格マニュアル）にはすでにWeb Speech APIなるものが公開されています。
   * https://developer.mozilla.org/ja/docs/Web/API/Web_Speech_API
@@ 行 150: / 行 150: @@
 ====== 音声入力で背景色を変更する ======
-それでは上記サンプルを理解したところで喋った色で背景色が変わるプログラムを作成してみます．
+それでは上記サンプルを理解したところで喋った色で背景色が変わるプログラムを作成してみます．まず全体背景色を変更するには，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");
+  }
+}
+</file>
 ===== 例 =====