フロントエンドの地獄
cover image

リアルタイム字幕生成アプリ teloppy

音声入力から、リアルタイムに字幕を生成して画面に表示します

制作  2020

Web会議などで聴覚障害がある方でも話している内容がわかるように、カメラに音声入力の字幕を表示したらいいんじゃないかという話を落合陽一さんがしていました。

https://twitter.com/ochyai/status/1260610691041357825?s=19

こちらに触発されて、作業中などで画面共有していても字幕が表示できるようなアプリケーションを制作しました。

利用イメージはこんな感じです。

https://twitter.com/nabettu/status/1264695618888298497?s=19

文字サイズや色、背景などの設定ができるため自分用にカスタマイズして利用ができます。

Web会議以外にも、ウェビナーなどのオンライン講演などでも利用できますし、YouTuberなどの活動で配信時に字幕を表示することにも利用できます。

※利用にはインターネットへの接続が必要です。


マニュアル

操作方法

  • アプリケーションを立ち上げ、マイクの許可を行うと自動で音声を読み取って字幕を生成します
  • 英語での字幕にご利用したい場合には、メニュー Langage から英語を選択してください
  • 字幕表示エリアはアプリケーションの端をマウスでドラッグして、リサイズしてください

マウスの動作を透過するように設定

  • teloppy にフォーカスがあたった状態で Esc キーを押下(もしくは Menu を開いて Untouchable をクリック)すると、固定モードになります
  • 固定モード中にはマウスのフォーカスが当たらず、画面下の操作が可能になります
  • 再度 Esc を押下すると、モードが解除され、リサイズ等が可能になります

文字サイズ等の設定

  • メニューから Settings をクリック(または Command+, Control+,)で設定画面が開けます
  • 文字サイズ等が調整できるようになっていますので、お使いの環境に合わせて設定してください
  • 文字縁は 0 にすると OFF になります

ダウンロード

  • Macの場合はdmgファイルをダウンロードし、右クリックして開いてインストールしてください。

https://drive.google.com/drive/folders/1rJ_a50rbr9McdCVErM48GhqOXu7-d8zV?usp=sharing

teloppy - Google Drive

https://drive.google.com/drive/folders/1rJ_a50rbr9McdCVErM48GhqOXu7-d8zV?usp=sharing

技術スタック

  • Electron
  • Chrome speech API
  • React.js