qiita.comインターン先で、ブラウザで音声入力からの音声解析してチャットボットぽいものを作る機会がありました。その際、ブラウザでの音声入力で詰まった点があったので適当に書く予定です。一応言っておきますが、全てPC版のChromeで試しています。Firefox等他のブラウザでは一切試していないのであしからず。MediaRecorderを使ってサクッと音声録音してみようまず、ブラウザで音声入力をするにはどうすればいいだろうか?調べてみたところWebRTCという技術があり、getUserMediaとMediaRecorderというものを使えば楽に音声入力が実現できそうでした。いうことでサクッとJSから音声録音を実現するために書いたコードが以下のものとなっています。github.comデモページも用意しました。下記リンクに飛べば実際に録音して、再生、ダウンロードを試すことができます。mnao305.github.io録音ボタンを押すと録音が開始されますが、その際ブラウザからマイクの許可が求められます。ソースコード内のコメントでも書いてあるが、MediaRecorderではwebmしか使えないらしい。webmとはGoogleが開発しているフリーのメディアフォーマット。今回はwavを使いたかったのでそれも後ほど解決します。動画長さが存在しないさて、上記のデモを試してみたらわかるが、この録音した音声データには再生時間が存在していません。N/A色々と調べてみたところ、これはChromeのバグとして報告されていました。bugs.chromium.orgですが、WontFixとなっています。上記Issueにも書いてある通り、W3Cの方のIssueにも上がっていました。github.comということでこれはバグと言うより仕様みたいです。webmではなくwavで保存し、動画長さを追加する。試してみた結果、解決するために実際にやったのはファイルヘッダを書き換えてwavにするという方法です。コードを見てもらったほうがわかりやすいと思うので、下記にGitHubへのリンクを張っておきます。github.comデモページmnao305.github.iowavで保存され再生時間も取れているのがわかる。kb/sこの方法の何が嬉しいかというと、wavにできること、追加でライブラリがいらないことなどですかね。いうことでコードの説明を軽くします。合格した話Windowsでnodistを使ってプロジェクトごとにnode.jsのバージョンを固定したり等使い方メモTravisCIを使ってGitでタグ付けしたら自動でストアとGitHubReleaseにアップロードするVRChatのフレンドがオンラインになった際に通知するようにアップデートした[VRCFriendCheck]月別アーカイブ注目記事はてなブログをはじめよう!mnao_305さんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。