はじめに
最近英語の勉強がてらCNN（ニュース）をYouTubeで見るのですが，字幕がついておらず，ニュースキャスターも早口なので，中身を追うのがなかなか大変です．
そんな中，WebSpeechAPIなるものの存在を知って，Google Chromeだと音声入力でテキストを生成できるサイトをいくつか見かけました．
このWebSpeechAPIを上手く使ったら，YouTubeとかで，海外の番組だけど字幕が付いてないような動画でも字幕が生成できるのではないかと思ったので，簡易的に音声から字幕を，リアルタイムでかつ直前の区間のみ生成してくれるアプリを作りました．
実物
公式のspeech.htmlを少し弄って作ったものが以下となります。
ページ
GitHub
使い方
ページを開いたら，右上に緑色の矢印があるので，これをクリックしてください．
そうしたら録音モードになって赤い丸が出てきて字幕生成モードに入るので，字幕を生成させたい音声を再生してください．
字幕は，最大で10 word分表示されます
（Google公式デモだと際限なく字幕が表示されるのが嫌だったので，今回改造するモチベーションになりました）
英語以外でも，単語が区切られているものだったら上手くいくので，フランス語やドイツ語などでもいけると思います
（中国語はAPIが切れ目のある文字を出力してくれなかったので，際限なく文字が流れます）
動作イメージ
今回はすごく簡易的なものなので，Chromeを2つ起動して，片方をYouTube，もう片方を今回作ったページを表示しています．
下のほうに写ってる"that I know that that was a cartoon but do"という文字列が実際に音声から生成されたものです．
YouTubeを上に重ねてあげると見やすいです．
(必須)PCで再生した音声をマイク入力にする
今回使用するWebSpeechAPIは，マイクの入力をGoogleの文字起こしに投げるので，PCで再生される音声をマイク入力に直接繋いであげないといけません．
Windows環境においては，ステレオミキサーという機能があり，これを使うことでPCで再生した音声を直接マイク入力に繋げることが出来ます．
(参考) ステレオミキサーの基礎 – VIPで初心者がゲーム実況するには
基本的にはこのサイトに従えばステレオミキサーの設定は上手くいくはずですが，一部のPCではステレオミキサーが存在しないということがありえます．（ノートPCに多い？）
その場合はステレオミキサーの存在するサウンドカードに対応したPCを手に入れるか，オーディオインターフェイス等の周辺機器でPCの出力をマイク入力に繋げる等の解決策が一応あります．
Linuxを使ってる人だったらsoxとか適当に弄ればなんとかなりそうです．
やってみた感想
遅延とか大丈夫かなぁと思ったのですが，割と遅延なく正確に字幕を出してくれるので，結構字幕が参考に出来る感じです．流石Google様や...
ただ同時に二人が話すときとか（CNNでは頻繁にある），BGMが激しい時とかはなかなか厳しいです．
終わりに
見た目がショボイのは許してください...(JavaScriptほとんど弄ったことが無いので)
Chromeを二つ起動しなきゃいけないのはダサいですが，動画の上に字幕を付けるとかだとまたさらにextensionみたいなものを作らないといけないとかありそうなので，今回はここまでということで...