差分
このページの2つのバージョン間の差分を表示します。
両方とも前のリビジョン 前のリビジョン 次のリビジョン | 前のリビジョン | ||
p5js:11.speech-recognition [2021/06/30 01:47] – [シンプルなテンプレート] baba | p5js:11.speech-recognition [2021/06/30 10:22] (現在) – [音声認識で操作する] baba | ||
---|---|---|---|
行 1: | 行 1: | ||
- | ====== 音声認識で操作する ====== | + | ====== 音声認識を利用する ====== |
音声認識を利用して様々な機器を操作することはスマートスピーカーの登場によってすでに一般化したと言えます。一方で音声認識を利用してなにかアプリケーションを開発したいと思った時、どのようなやり方があるでしょうか?昔は音声認識といえば京大のJuliusだったのですが、Web Speech APIを利用することで簡単に音声認識機能を自分のプログラム内に組み込むことが可能になりました。jsとかにこだわりはなく、とにかく高精度に音声認識をしたい、という場合は以下のJuliusを触ってみてください。githubでも公開されています。 | 音声認識を利用して様々な機器を操作することはスマートスピーカーの登場によってすでに一般化したと言えます。一方で音声認識を利用してなにかアプリケーションを開発したいと思った時、どのようなやり方があるでしょうか?昔は音声認識といえば京大のJuliusだったのですが、Web Speech APIを利用することで簡単に音声認識機能を自分のプログラム内に組み込むことが可能になりました。jsとかにこだわりはなく、とにかく高精度に音声認識をしたい、という場合は以下のJuliusを触ってみてください。githubでも公開されています。 | ||
* https:// | * https:// | ||
- | さて、このページではjsを利用してブラウザ上で手軽に音声認識を利用してみたいと思います。なにか簡単な実装目標があると良いかなと思うので、Canvasの背景色を音声認識を利用して操作可能なプログラムを開発してみたいと思います。兎にも角にも音声認識をまずどうやるかですが、MDN Web Docs(モジラによるウェブブラウザ規格マニュアル)にはすでにWeb Speech APIなるものが公開されています。 | + | さて、このページではjsを利用してブラウザ上で手軽に音声認識を利用してみたいと思います。なにか簡単な実装目標があると良いかなと思うので、の背景色を音声認識を利用して操作可能なプログラムを開発してみたいと思います。兎にも角にも音声認識をまずどうやるかですが、MDN Web Docs(モジラによるウェブブラウザ規格マニュアル)にはすでにWeb Speech APIなるものが公開されています。 |
* https:// | * https:// | ||
行 149: | 行 149: | ||
* https:// | * https:// | ||
+ | ====== 音声入力で背景色を変更する ====== | ||
+ | それでは上記サンプルを理解したところで喋った色で背景色が変わるプログラムを作成してみます.まず全体背景色を変更するには,bodyタグのcssで背景色を設定すればよいです.javascriptでcssを操作する場合は,対象となるidのDOMに対して,.style.background=" | ||
- | ===== 例 ===== | + | では実際のコードです.W3C(html等のウェブ系の規格をつくってるところ)では色指定にはカラー名と呼ばれる色名指定もできるようになっています.例えば |
+ | - black | ||
+ | - white | ||
+ | - red | ||
+ | - blue | ||
+ | - green | ||
+ | 等です.今回は音声認識を英語(en)に切り替えて,読み上げた単語をそのままbodyのスタイルに適応させてみます. | ||
+ | <file js sketch.js> | ||
+ | var myRec = new p5.SpeechRec(); | ||
+ | var is_recognition_activated = false; | ||
- | 音声認識(日本語もできる)のサンプルがすでにあります。下記のgithubのページをご覧ください。 | + | var words = []; |
- | * [[https:// | + | |
+ | 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 = " | ||
+ | select("# | ||
+ | } | ||
+ | |||
+ | function parseResult() { | ||
+ | document.getElementById(" | ||
+ | document.getElementById(" | ||
+ | } | ||
+ | |||
+ | function toggleSpeechRecognition() { | ||
+ | is_recognition_activated = !is_recognition_activated; | ||
+ | |||
+ | if (is_recognition_activated == true) { | ||
+ | myRec.rec.lang = " | ||
+ | myRec.start(); | ||
+ | this.html(" | ||
+ | } | ||
+ | else { | ||
+ | myRec.stop(); | ||
+ | this.html(" | ||
+ | } | ||
+ | } | ||
+ | |||
+ | function endSpeech() { | ||
+ | if (is_recognition_activated == true) { | ||
+ | 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); | ||
+ | document.getElementById(" | ||
+ | myRec.resultString = ""; | ||
+ | } | ||
+ | myRec.start(); | ||
+ | console.log(" | ||
+ | } | ||
+ | } | ||
+ | |||
+ | </ | ||
+ | |||
+ | ===== 例 ===== | ||
音声認識機能を利用した応用例として、challengeableを制作しました。 | 音声認識機能を利用した応用例として、challengeableを制作しました。 | ||
< | < |