--- title: Node.js、Web Speech APIを使って音声認識を出力 tags: Node.js JavaScript WebSpeechAPI Heroku author: harach19k slide: false --- #概要 WebSpeechAPIを使用して聞き取った音声の文字おこしをブラウザ上に表示させます。 #作成方法 1.WebSpeechAPIを含むhtmlフォルダの作成 新規フォルダを作成し、その中にindex.htmlを作成。 ```html:index.html 音声認識サンプル

音声認識サンプル

``` 音声認識をするための処理をscriptタグ内に書いていきます。 ```html:index.html ``` 音声認識を実行する準備はこの2行で完了です。 webkitSpeechRecognition()を定義し、langをja-JPにすることで日本語に対応したWeb Speech APIが使えるようになります。 そしてこれをイベントで実行出来るようにしていきます。 ```html:index.html ``` 2.サーバー立ち上げ node.js Expressを使ってローカルサーバーの立ち上げを行います。 Web speech Api-sampleというフォルダー作成します。 初期設定します。 ``` npm init -y ``` 必要なライブラリをインストールします。 ``` npm i body-parser express ``` index.jsを作成し、こちらのコードをコピペします。 ```js var express = require('express'); var app = express(); // public というフォルダに入れられた静的ファイルはそのまま表示 app.use(express.static(__dirname + '/public')); // bodyParser var bodyParser = require('body-parser'); app.use(bodyParser.json()); app.post('/post', function(req, res) { for (key in req.body) { console.log(key, '=', req.body[key]); } res.end(); }); app.listen(process.env.PORT || 8080); console.log("server start! (heroku)"); ``` こちらをindex.jsで保存します。 index.js と同じ階層に public フォルダを作りその中に 先ほど作成したindex.html を格納します。 ``` node index.js ``` 実行します。 http://localhost:8080/ でアクセス。 スタートボタンをおして話し、終わりにまたボタンを押すと。 ![音声認識.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/510426/3e366c0c-c1a0-0c66-b0ee-ae3115f613e3.png) これでひとまず完了です。次に使用してHerokuにデプロイしていきます。(続く) #考察 まずは音声認識APIをつかってアウトプットすることができました。音声の聞き取りの精度もパソコンを目の前にあるような状況、会議とかだったら問題なく拾える制度でした。 次は、Vue.jsでデザインを整えていきます。 また、いまのままではただの文字の羅列になるので、これをどう編集させていくか、プログラムで機能を追加できていければと思います。