Udemyのコンテンツの字幕を翻訳し合成音声で読み上げるChrome拡張を作りました

モチベーション

• 最近、プログラミングの勉強にUdemyという動画サービスを使っています。
• プログラミングに関するコンテンツは圧倒的に英語が多く、英語の字幕を見ながら動画を見ることが必要です。
• しかし、字幕を読みながらプログラミングの動画を見るのは大変で、動画を見るスピードが遅くなったり、集中力が切れたりします。
• そこで、英語の字幕をGoogle翻訳で日本語に翻訳して合成音声で読み上げるChrome拡張を作りました。

Chrome Web Store URL

• Udemy translate & speech
  

実装面

字幕の取得

• 字幕はclass属性が同じdiv要素に書かれているので、そのdiv要素を取得して、その中身のテキストを取得します。

翻訳

• 翻訳はGoogle翻訳のAPIキー不要のエンドポイントがあったのでそれを使用しました。
• Found a Google Translate endpoint that doesn't require an API key.
  • https://github.com/ssut/py-googletrans/issues/268

合成読み上げ

• 読み上げには、Web Speech APIのSpeechSynthesisを使用しています。以下のコードだけで読み上げができます。

const synth = window.speechSynthesis
const utterThis = new SpeechSynthesisUtterance()
utterThis.text = 'こんにちは'
utterThis.pitch = 1
utterThis.volume = 1
utterThis.rate = 1
utterThis.lang = 'ja-JP'
synth.speak(utterThis)

Web Speech APIは簡単に実装できるので、他のアプリでも使ってみたいと思います。

今後の機能更新

• 翻訳した文字列を動画内に表示する機能を追加する予定です。
  • 実装しました。(2023/05/04)
• O’Reilly online learningの動画にも適用してみたいです。