====== 180101 WebAPIアプリケーション「超」入門 FirebaseとAPIによるWeb会議システム制作を写経してみる（１）第2章 音声認識 ======
年末に以下の本を衝動買い！面白そう！
第2章の音声認識では、Web Speech APIなるものを用いるらしい。
https://qiita.com/GalapagosOf/items/b0df73a0a53a29b40388
{{:z_blog:2019:pasted:20190102-003334.png}}
===== 開発環境 =====
Windows 10 Pro
Chrome
VisualStudioCode
https://qiita.com/massie_g/items/2913066e596dae197539
{{:z_blog:2019:pasted:20190102-003016.png}}
===== 新規htmlファイル作成 =====
C:/js/webconf/ フォルダを作成し、その中に、index_voice.htmlを作成し、以下のように入力。
{{:z_blog:2019:pasted:20190102-004133.png}}
以下の2行だけで音声認識を実行できるとは、びっくりしました。
でもたしかに、いまどきスマホに「OK Google!」って話しかければ音声認識してくれますもんね。。。
const speech = new webkitSpeechRecognition();
speech.lang = 'ja-JP';
===== ボタンクリックで音声認識開始し、認識結果をconsole画面に表示 =====
{{:z_blog:2019:pasted:20190102-004743.png}}
===== VisualStudioCodeの拡張機能"Live Server"でローカルサーバーを立ち上げる =====
VisualStudioCodeの一番左の上から4番目の拡張機能タブをクリック
{{:z_blog:2019:pasted:20190102-005010.png}}
上の方にlive server と入力すると、図のようにLive Serverが出てくるので、Installをクリック
{{:z_blog:2019:pasted:20190102-005202.png}}
インストールには1分くらいかかる。
{{:z_blog:2019:pasted:20190102-005218.png}}
一回VisualStudioCodeを閉じて起動するか、Reloadをクリック。
Live Serverの起動方法
https://qiita.com/massie_g/items/2913066e596dae197539#%E8%B5%B7%E5%8B%95%E6%96%B9%E6%B3%95
{{:z_blog:2019:pasted:20190102-005725.png}}
画面右下の Live Serverをクリック
{{:z_blog:2019:pasted:20190102-005810.png|}}
アクセスを許可（初回のみ）
{{:z_blog:2019:pasted:20190102-010000.png}}
{{:z_blog:2019:pasted:20190102-010135.png}}
Ctrl+Shift+Iでconsole画面を表示
{{:z_blog:2019:pasted:20190102-010249.png}}
あれ、うまくいかなかった。。。続きは明日。。。
Live Serverの停止
=>もともとGo Liveであったところが、Port 5500 になっているので、それをクリックするとサーバが停止する。
{{:z_blog:2019:pasted:20190102-010451.png}}
{{:z_blog:2019:pasted:20190102-010549.png}}
Live Serverの簡単さにもびっくりした。
https://teratail.com/questions/93512
===== ローカルサーバー無しで、もう一度index_voice.htmlを開く =====
普通にChromeで開き、Ctrl+Shift+Iでconsole画面を出します。startボタンをクリックしたあとに、
あいうえお かきくけこ
とパソコンにしゃべったら、ちゃんと以下のように認識されました。
{{:z_blog:2019:pasted:20190102-070907.png}}
===== Web Speech APIに関するリンク =====
[[https://paiza.hatenablog.com/entry/2016/07/05/音声認識入門！Web_Speech_APIを使いChromeブラウザを音声操作す]]
2016-07-05
音声認識入門！Web Speech APIを使いChromeブラウザを音声操作するWebアプリ開発術を公開！
https://qiita.com/hmmrjn/items/4b77a86030ed0071f548
@hmmrjn
2018年12月26日に更新
Webページでブラウザの音声認識機能を使おう - Web Speech API Speech Recognition
https://techblog.asahi-net.co.jp/entry/2018/06/22/173617
2018-06-22
オリジナルの音声アシスタントを作ろう (1) - Web Speech API
https://stackoverflow.com/questions/42260858/vue-js-webkitspeechrecognition-integration?noredirect=1&lq=1
Vue.js webkitSpeechRecognition integration
===== 2019 blog リンク =====
[[z_blog:2019:190115_php_api|z_blog:2019:190115_php_api]]
[[z_blog:2019:190117_wordpress引越し|z_blog:2019:190117_wordpress引越し]]
[[z_blog:2019:190122_MITライセンス|z_blog:2019:190122_MITライセンス]]
[[z_blog:2019:190130_Fusion360|z_blog:2019:190130_Fusion360]]
[[z_blog:2019:190205_ChemSketch|z_blog:2019:190205_ChemSketch]]
[[z_blog:2019:190415_Win10_install2|z_blog:2019:190415_Win10_install2]]
[[z_blog:2019:190424_ggplot2棒グラフ|z_blog:2019:190424_ggplot2棒グラフ]]
[[z_blog:2019:190502_initialization|z_blog:2019:190502_initialization]]
[[z_blog:2019:190503_pwa|z_blog:2019:190503_pwa]]
[[z_blog:2019:190508_webpack|z_blog:2019:190508_webpack]]
[[z_blog:2019:190622_svg|z_blog:2019:190622_svg]]
[[z_blog:2019:190716_map|z_blog:2019:190716_map]]
[[z_blog:2019:190929_nodejs_deploy|z_blog:2019:190929_nodejs_deploy]]
[[z_blog:2019:191010_onewayanova|z_blog:2019:191010_onewayanova]]
[[z_blog:2019:191017_遺伝子変異の記載方法|z_blog:2019:191017_遺伝子変異の記載方法]]
[[z_blog:2019:191023_面白かったブログ|z_blog:2019:191023_面白かったブログ]]
[[z_blog:2019:191109_脳科学|z_blog:2019:191109_脳科学]]
[[z_blog:2019:191204_スマホアプリ作成glide|z_blog:2019:191204_スマホアプリ作成glide]]
[[z_blog:2019:191210_英語多読|z_blog:2019:191210_英語多読]]
===== 今回写経した本 =====
少ないページ数で実用的です。