Recorder.jsを利用してブラウザ上で音声を録音する

ブラウザ上で音声を録音、音声ファイルのダウンロードする

GitHub Pagesで公開しているページで実施できます。
ライブラリとしてRecorder.jsを利用しています。

Recorder.jsとは

Recorder.jsとはWeb Audio APIというJavaScript APIをラップし、簡単に録音とその音声ファイルの出力を可能にするJavaScriptライブラリです。
このライブラリをHTML内で読み込むことによって、ブラウザ上からPCのマイクを使って録音して音声ファイルをダウンロードできるようになります。

GitHub上に公開されていた元のリポジトリを修正しています。
修正したリポジトリはこちらです。また、利用例としてGitHub Pagesを使って、ブラウザ上で録音、音声ファイルダウンロードできるようにしています。

本当はライブラリの修正がしたかったのではなく、ブラウザで録音してそのファイルをAmazon Transcribeに処理させてテキスト化するというWebサービスを作りたかったのですが、時間がとれませんでした...

フォーク元Recorder.jsの問題点

フォーク元のRecorder.jsは2019年12月時点では開発が停止しており、残念ながらそのままで使うことはできませんでした。

• AudioContext.resume()が呼び出されていない
• Navigator.getUserMedia()が利用されている

AudioContext.resume()が呼び出されていない

AudioContext.resume()は...あまりよくわかっていないです。
説明では途中停止した音声を再生するために使うらしいですが、AudioContextの初期化に必要らしい？
このメソッドを追加しないと録音ができなかったため、とりあえず追加しました。

Navigator.getUserMedia()が利用されている

Navigator.getUserMedia()は非推奨となっています。そのため、一部のブラウザ（Safariなど）ではこのAPIによる操作をおこなうことができないようです。
代替としてMediaDevices.getUserMedia()を利用することが推奨されています。

今回はMediaDevices.getUserMedia()に実装を変更したことで、Safariでも録音をおこなうことができるようになっています。

ブラウザ上での利用例

GitHub Pagesで公開しているページで実施できます。

マイクの利用を許可し、recordボタンで録音を開始します。
stopを押すことで録音を停止し、音声ファイルが表示されるため、ブラウザ上で再生したり、ファイルダウンロードしたりできるようになります。
再度record、stopをすることで、音声ファイルがさらに追加されていきます。
（ボタンの見た目などはかなりダサいので改善余地あり）

おわりに

最初にも書きましたが、Amazon Transcribeが日本語対応して音声からテキストを書き起こすことができるようになったので、
簡単に録音してテキスト化するというサービスにするつもりでした。
AWSではJavaScript SDKが公開されていて、多くの実装例が存在するため難しくないはずです。
時間がとれたときに挑戦してみようと思います。