ブラウザでマイク入力から字幕を作るツールを作った

Chrome でマイクからの音声を録音して、その音声認識で書き起こしも同時に行うツールをmizchi氏が作ったので、それにちょっと手を加えて、SRT形式の字幕データを作れるようにしました。

https://recording-studio-srt.netlify.com/

で使えます。

動機

私はいまドイツ語を勉強中なのですが、リスニングが弱いので、字幕のない動画に字幕をつけて見たいという気持ちがありました。

それでmizchi氏のツールを使おうとしたのですが、日本語にしか対応しておらず、ソースコードを直接いじろうにもいかにも別の何かから出力された感じだったので、mizchi氏にソースコードをもらって(mizchi氏のソース)、それを改造して言語を選べるようにして、それで動画に重ねて見れるようにSRT形式でダウンロードできるようにしたという流れです。

使い方

左上で言語を選びます。

左下で表示形式(テキスト、テキスト+時間、SRT形式)を選びます。

「recording start」ボタンを押すと録音・音声認識が始まります。

同じボタン(「recording end」というラベルになっている)を押すと終了します。

終了後は音声を再生したり、「Download」リンクからテキストをダウンロードしたりできます。

応用

音声出力をそのまま音声入力として受け取るようにすると、動画の音声認識がやりやすいかと思います。

MacではSoundFlowerというソフトでそれができます。

調べると、WindowsではVirtual Audio Cableというソフトでできるそうです。

以下の記事が参考になるようです。

Macで writer-app + Soundflower を使った完全自動文字起こしを行う方法 - ポップコーン

Windowsで writer-app + VB-Audio Virtual Cableを使った完全自動文字起こしの方法 - ポップコーン


SRT形式の字幕データを動画に重ねるには、動画ファイルが手元にある場合は、動画とSRTファイルの名前を揃えてVNC Playerで再生すれば自動的にやってくれます。

動画ファイルが手元にない場合、SRT形式の字幕データを画面に表示できるソフト(MacならSrtViewerなど)を使えば何とかなります。

解説

技術的に新しいことはやっていません。

mizchi氏の解説ページを参照してください。

ソースコード

修正後のソースコードここです。

React+TypeScriptです。

ライセンスはMITです(mizchi氏に許可をいただきました)。

もっといい感じにできる人がいたら改良してください。