差分
このページの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:// | ||
+ | |||
+ | さて、このページではjsを利用してブラウザ上で手軽に音声認識を利用してみたいと思います。なにか簡単な実装目標があると良いかなと思うので、Canvasの背景色を音声認識を利用して操作可能なプログラムを開発してみたいと思います。兎にも角にも音声認識をまずどうやるかですが、MDN Web Docs(モジラによるウェブブラウザ規格マニュアル)にはすでにWeb Speech APIなるものが公開されています。 | ||
+ | * https:// | ||
+ | |||
+ | 見ていただくとわかりますが、2021年3月9日時点で、未だに実験的な機能であることが明記されています。ブラウザ互換性一覧で確認するとこの機能が動作するのは、ChromeかEdgeのみとなり、FirefoxやSafariではWeb Speech APIは未実装です。ただしこの前のAppleの発表によって、Safariは11.3以降からこのWeb Speech APIがサポートされることがアナウンスされました。素晴らしいですね。https:// | ||
+ | |||
+ | では早速スケッチしていきましょう。 | ||
+ | |||
+ | ====== シンプルなテンプレート ====== | ||
+ | こちらでシンプルなテンプレートを用意しておきました.[[https:// | ||
+ | * 音声認識をstopするメソッドが用意されていない | ||
+ | * continousを利用した連続音声認識だと,タイムアウトまでが非常にながく,喋る内容を順次テキスト化することが困難 | ||
+ | といった点がよろしくないため,少しこちらで改造を加えています.音声認識を利用したアプリケーション開発はこちらのサンプルからスタートすると作りやすいとおもいます. | ||
+ | * 音声認識テンプレート: | ||
+ | |||
+ | <WRAP group> | ||
+ | <WRAP half column> | ||
+ | <file html index.html> | ||
+ | < | ||
+ | <html lang=" | ||
+ | < | ||
+ | <script src=" | ||
+ | <script src=" | ||
+ | <link rel=" | ||
+ | <meta charset=" | ||
+ | |||
+ | </ | ||
+ | < | ||
+ | <h2>Speech Recognition | ||
+ | <p>by Tetsuaki Baba</ | ||
+ | < | ||
+ | <button id=" | ||
+ | <input type=" | ||
+ | |||
+ | <hr> Log | ||
+ | < | ||
+ | < | ||
+ | |||
+ | < | ||
+ | |||
+ | |||
+ | <script src=" | ||
+ | <script src=" | ||
+ | </ | ||
+ | |||
+ | </ | ||
+ | |||
+ | </ | ||
+ | </ | ||
+ | <file js sketch.js> | ||
+ | var myRec = new p5.SpeechRec(); | ||
+ | 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 = " | ||
+ | |||
+ | // start/stop のDOMボタンを押したときに音声認識切り替えを行う | ||
+ | select("# | ||
+ | } | ||
+ | |||
+ | // 認識途中随時呼び出される関数(認識途中の文字列を取得できる) | ||
+ | function parseResult() { | ||
+ | document.getElementById(" | ||
+ | document.getElementById(" | ||
+ | } | ||
+ | |||
+ | function toggleSpeechRecognition() { | ||
+ | |||
+ | // 認識ステータスを反転させる(trueならfalse,falseならtrue) | ||
+ | is_recognition_activated = !is_recognition_activated; | ||
+ | |||
+ | // 音声認識アクティベート | ||
+ | if (is_recognition_activated == true) { | ||
+ | myRec.rec.lang = " | ||
+ | myRec.start(); | ||
+ | this.html(" | ||
+ | } | ||
+ | // 音声認識を停止させる | ||
+ | else { | ||
+ | // 音声認識をとめる | ||
+ | myRec.stop(); | ||
+ | // ボタンの表示をstartにする | ||
+ | this.html(" | ||
+ | } | ||
+ | } | ||
+ | |||
+ | function endSpeech() { | ||
+ | |||
+ | // 音声認識アクティベート中なら | ||
+ | if (is_recognition_activated == true) { | ||
+ | |||
+ | // 認識文字列に何も入っていなければ(タイムアウトでendSpeechになった場合) | ||
+ | if (!myRec.resultValue) { | ||
+ | myRec.start(); | ||
+ | return; | ||
+ | } | ||
+ | |||
+ | // 認識文字列になんか入ってれば | ||
+ | if (myRec.resultString.length > 0) { | ||
+ | console.log(" | ||
+ | document.getElementById(" | ||
+ | document.getElementById(" | ||
+ | myRec.resultString + " | ||
+ | document.getElementById(" | ||
+ | console.log(myRec.resultString); | ||
+ | myRec.resultString = ""; | ||
+ | } | ||
+ | myRec.start(); | ||
+ | console.log(" | ||
+ | } | ||
+ | } | ||
+ | |||
+ | </ | ||
+ | <WRAP half column> | ||
+ | |||
+ | </ | ||
+ | </ | ||
+ | |||
+ | まずはこのプログラムをしっかりと理解してください.これを理解できれば自分の利用したいアプリケーションでも簡単に音声認識を実装することができると思います.音声認識の言語設定は以下を参照してください. | ||
+ | |||
+ | * 言語指定 | ||
+ | * BCP-47: | ||
+ | * https:// | ||
+ | * ISO-639-2: | ||
+ | * https:// | ||
+ | |||
+ | |||
+ | ===== 例 ===== | ||
+ | |||
音声認識(日本語もできる)のサンプルがすでにあります。下記のgithubのページをご覧ください。 | 音声認識(日本語もできる)のサンプルがすでにあります。下記のgithubのページをご覧ください。 | ||
* [[https:// | * [[https:// |