まずはこちらの動画をご覧ください。

音がなくてもAI字幕だけで面白いwww pic.twitter.com/7p3T9PcsjU

— じん@とかい育ち (@jintokai) May 30, 2020

画面の下部に、マイクに喋っている言葉がリアルタイムでテキスト化されて表示されています。

最近だと、AbemaTVのニュース番組でもリアルタイム字幕「AIポン」などがありますが、
いい具合に誤認識してくれるので、見ていて飽きません。

そもそもこの技術は、某大手放送で音声認識放送をやっているのを見て、
ぼくも導入してみたくなり、似たものを自作してみました。

仕組み

実はこれ、ブラウザに備わっているWeb Speech APIを使用して音声認識させています。
登録も認証も専門知識も一切必要なく、簡単なjavascriptが書ければ誰でも使うことができます。
シンプルに動かそうとするなら、これで動きます。

SpeechRecognition = webkitSpeechRecognition || SpeechRecognition;
const recognition = new SpeechRecognition();

recognition.onresult = (event) => {
console.log(event.results[0][0].transcript);
}

recognition.start();

細かい仕様などは詳しいサイトを参照頂ければと思います。

このAPI、本当に神APIだと思うんですが、
1点だけ、、謎だったのが、マイク入力を受付中か（タイムアウトしているか）どうかの判定ができない。。
つまり、常に喋り続けないと、マイク入力が無効になってしまうのです、、

なので、会話終了（onspeechend）や無音エラー（onerror）のイベントが発火したら、
自動で受付を再開させないといけない。（しかも受付中に再開をしようとするとエラーで落ちる）

なので、、こんな悪魔みたいなコードで無理やりマイク受付を継続させようとしました。

recognition.onerror = (e) => {
try { recognition.stop(); } catch (e) {}
try { recognition.start(); } catch (e) {}
}

recognition.onspeechend = (e) => {
setTimeout(() => {
try { recognition.start(); } catch (e) {}
}, 500);
}

念のため、stopしてからstartを両方tryで実行します。
onspeechendは正常に音声認識ができている時にも発火するのですが、
即stopしてしまうと結果を画面に出す前に止まってしまうので500ms時差を与えています。
かなり悪魔的な仕様だとは思うのですが…

これでもたまに受付が止まってしまいました。

（　＾ω＾）・・・

setInterval(() => {
try { recognition.start(); } catch (e) {}
}, 2000)

かなりヤケクソですが、これで一応動きましたw

使い方

長々と書きましたが、
このページを開いてマイクの許可をすれば自動でテキストが表示されます。
これをOBS等のウィンドウキャプチャでブラウザを読み込ませます。
（ブラウザビューとして追加させたかったけど、マイクの許可ができず無理だった）
あとはクロマキーを抜いて完成です。

カスタムして使いたい場合は、cloneしてGitHub Pageにアップすると便利です。
※SSL環境じゃないとマイクの許可を2秒毎に聞かれて使い物にならないので

今回作成したコードはGitHubからダウンロードできます。
是非有効活用して面白い放送をして下さい♪

もし良ければTwitter / YouTubeの登録お願いします！！