勉強不足で至らんブログ

勉強不足ですが色々と書いていきます。

リアルタイムに声をテキストとして表示する「Zimack」というサイトを作った

OBSで配信するときに字幕に特化したサイトがあればいいのに

という気持ちでちょっとだけ作った

mizotake.github.io

https://mizotake.github.io/zimack/resources/demo.gif

1日くらいで作ってるのでまだまだ機能が足りないし作っててUIミスったなと思っているのですが、、、いずれ…いずれな…

とりあえず、マイクの許可与えればテキストに起こしてくれるし、画面クリックすればオプションで少しだけカスタマイズできるやつ

https://mizotake.github.io/zimack/resources/img1.jpg

思いついたのはTwitterのおかげ

別の記事で

Youtubeでライブ配信する際にボイチェンと自動字幕を入れてみた - 勉強不足で至らんブログ

紹介した上記のTweetを観て字幕特化のサイトあればいいのにと思いました。

まだまだ理想はOBSのブラウザで動くことなのでできてないのですが、ウィンドウキャプチャでは表示できるのはひとまずいいかなと

あとは背景に画像貼れたりとかテキストのフォント変えれたり、UIが字幕の表示場所と被らないようにするとかしたいですがいずれ…

まとめ

github.com

GitHubPages使っているのでバリバリソースコード公開してるのですがすげー無駄な書き方をしている気しかしてない リファクタも兼ねていずれな…って感じですね

あとは今まであまりサービス名を考えたりしてなかったので「Zimack」とつけてみました付けてみたかった。

追記

実際に使って配信してみました

www.youtube.com

f:id:MakeTake:20200525003107j:plain

色の変更もちゃんとできて配信できたので満足 自分で足りない機能は随時追加してきたい所存