====== Vue.jsとWebSpeechAPIとFirestoreで音声認識アプリ(ボイスレコーダー) ====== 以下の本を衝動買いしたところ、Web Speech APIというWEBブラウザChromeで動作する簡単音声認識システムがあることを知りました。 ===== Web Speech APIを使ったアプリはChromeでのみ動作します ===== Internet ExplorerやSafariでは動作しません。このアプリの音声認識機能を利用するためには、パソコンでも、スマホでも、Chromeをインストールする必要があります。手元のZenfone 4 Maxでは、Chromeにて音声認識することはできました。PWA(Progressive Web Apps)なので、スマホにアプリとして登録し、オフラインで使用可能です。なお、iPhone8のChromeでtryしましたが、STARTボタンの"START"が表示されず、クリックしても音声認識が開始されませんでした。（残念、、、） {{:12.vue.jsとwebspeechapiで音声認識アプリ:pasted:20190103-101233.png}} ===== 方針をたてる ===== -マイクのついた端末で、Chromeでアプリを開いてもらうことが前提 -スタートボタンを押して、マイクに話しかけると、話しかけた内容が文字で表示される -ストップボタンで文字おこし中止 -文字におこしたテキストを、Firebase Firestoreに保存し、メモ一覧を表示し、検索、削除できる今回は、以下のコードを参考にさせていただきました。 *https://qiita.com/Sa2Knight/items/a7deb5b5d07820f6f19e *https://qiita.com/hmmrjn/items/4b77a86030ed0071f548 ソースコード https://codesandbox.io/s/71yznl2zwq できたもの {{:12.vue.jsとwebspeechapiで音声認識アプリ:pasted:20190106-010227.png}} デモサイト1 https://csb-71yznl2zwq.netlify.com/ デモサイト2 ===== 0.用意するもの（開発環境） =====


パソコン
Chrome（くろーむ、WEBブラウザの一つ）
GitHubアカウント作成済み（無料）
Googleアカウント作成済み（無料）

パソコンは、Windowsパソコンでも、Macでも、かまいませんが、私の場合はWindows 10 Proとなります。今回は、Web Speech APIを利用するため、アプリを利用する人にもChromeは必須です。Internet Exploler、Safari、Firefox、Edgeなどではうまく動かないそうです。今回利用するもの


CodeSandbox
Firebase Firestore

Vue 2.5.2
Vuetify
firebase
moment

===== Codesandboxで新規Vue.jsアプリの作成 ===== *[[https://codesandbox.io/|CodeSandbox]]でVueアプリを新規作成 *Dependencyで、Vuetifyを追加 *index.htmlとsrc/main.jsの編集し、Vuetifyを利用できるようにします。 {{:12.vue.jsとwebspeechapiで音声認識アプリ:pasted:20190102-175625.png}} ===== src/App.vueにVuetifyのテンプレートを適用 ===== src/App.vueにヘッダーとフッター、カードを追加します。 {{:00.vue用デザインフレームワークvuetify:pasted:20190102-181708.png}} ===== text-areaとbuttonを設定 ===== Card内のimgを消して、textareaで置き換えます。button名もStartとStopに変更します。 src/App.vue

参考：https://vuetifyjs.com/ja/components/textarea {{:12.vue.jsとwebspeechapiで音声認識アプリ:pasted:20190102-183941.png}} ===== 初期データの設定 ===== 以下、src/App.vueの内にコードを編集していきます。 data: function() {} 内に、初期データを記載します。


  data: function() {
    return {
      text: "",
      recognition: new webkitSpeechRecognition(),
      recognitionText: "音声入力開始"
    };
  }

Web Speech APIを利用するためには、以下の2行を記載します。


const speech = new webkitSpeechRecognition();
speech.lang = 'ja-JP';

{{:12.vue.jsとwebspeechapiで音声認識アプリ:pasted:20190103-043821.png}} ===== methods()関数とcreated()関数を定義 ===== 音声認識開始buttonをクリックすると、recognition.onstartで音声認識開始し、認識された時点(recognition.onresult)で認識結果をtextに代入します。以下のコードをsrc/App.vueの {{:12.vue.jsとwebspeechapiで音声認識アプリ:pasted:20190103-084812.png}} ==== テキストの内容をFirestoreに保存(src/App.vue) ==== src/App.vue