Slackの英会話プロンプトがきっかけで、リアルタイム字幕ブラウザを自作した話

英会話の練習をAI相手にして、「音声だけでは聞き取れない」と感じることがありました。そこで、英会話中にリアルタイムで字幕を表示できるブラウザツールを自作しました。きっかけは、社内 Slack で共有されていた、初学者向けの英会話用カスタム GPT です。

下記にプロンプトを引用します。

You are a very simple English conversation trainer for beginners.

Rules:
- Ask only short and easy questions.
- Use basic English (A1–A2 level). // ご自身のレベルに合わせてください
- Speak slowly and clearly.
- Ask only one question at a time.
- Wait for the user to answer.

User behavior:
- The user may answer with only 1–3 words.
- The user may make grammar mistakes.
- The user may hesitate or be silent.

Your response:
- Always accept the answer positively.
- Do NOT correct grammar strictly.
- If needed, gently rephrase the correct sentence.
- Immediately ask the next simple question.

Conversation style:
- Keep it friendly and encouraging.
- Keep sentences short.
- Avoid long explanations.

Example flow:
Q: What did you eat today?
User: rice
You: Nice! You ate rice. What time did you eat?

Goal:
- Help the user speak quickly without thinking too much.
- Build confidence, not accuracy.

※ ブログ執筆時の ChatGPT の音声会話は、終了後のみに会話履歴が表示されることを前提としています。

GitHub に公開しています。
https://github.com/risarisato/English-Script-real-time

試してみたら、思った以上に聞き取れない

やってみて感じたのは、英語が思った以上に聞き取れないことでした。

• そもそも何を言ったのか理解できない
• 聞き返しているうちに会話がズレる
• 相手の質問内容をすぐ忘れる

そのときに感じたことは、音声だけだと初学者には難しい。なので、リアルタイムで字幕が表示すれば、学習が継続しやすいと思いました。

自分用ツールをAIと一緒に作ってみた

私自身に音声認識や字幕表示の開発経験はありません。なので、自力で全部作るというより、AI に段階的に相談しながら進める形にしました。試作品は、最小限で字幕表示できる構成にしているつもりです。

• Chrome の音声認識機能で、マイク音声を文字に変換する
• 認識できた文字を、ブラウザ画面に履歴として表示する

今回は、Chrome の SpeechRecognition 機能を使い、その結果を JavaScript で画面表示する構成だと理解しています。ブラウザが持っている機能を、AI を使って自分向けの学習しやすい形に組み立てたイメージです。

全体処理フロー

開始ボタン
↓
SpeechRecognition で音声認識を開始する
↓
Chrome ブラウザがマイク利用確認を求める
↓
話し終わって確定した音声結果を受け取る
↓
字幕履歴として画面に1行追加する
↓
スクロールする
↓
終了ボタンで音声認識を停止する

コードの流れについて
全体の流れを見たうえで、下記にコードがどのようにつながっているかを簡単に整理します。

Chrome の音声認識機能を使うために、SpeechRecognition を用意します。

const SpeechRecognition = window.SpeechRecognition;
const recognition = new SpeechRecognition();

開始ボタンを押すと、音声認識を始めます。

startButton.addEventListener("click", () => {
recognition.start();
});

この recognition.start() で、マイク利用確認を表示します。

音声認識結果は result で受け取ります。

recognition.addEventListener("result", (event) => {
  for (let i = event.resultIndex; i < event.results.length; i += 1) {
　　 // ブラウザが「この発話は確定した」と判断した結果だけ使う　
    if (event.results[i].isFinal) {
      // 文字列(会話中)の前後の空白をtrimで削除
      const transcript = event.results[i][0].transcript.trim();

      if (transcript) {
        createMessageRow(transcript);
      }
    }
  }
});

ブラウザ画面への文字表示は appendChild で追加してします。その後にスクロール処理を行うことで、履歴が下に積み上がるようにしています。

function createMessageRow(text) {
  const row = document.createElement("div");
  row.className = "message-row";

  const bubble = document.createElement("div");
  bubble.className = "bubble";
  bubble.textContent = text;

  row.appendChild(bubble);
  messageList.appendChild(row);
  scrollToBottom();
}

Chrome が音声認識機能を担当して、JavaScript 側は、開始・音声結果の受け取り・画面表示・停止を担当しています。

試作品を作ってみたら便利だった

実際に使ってみると、これが想像以上に便利でした。

• 英語が聞き取れなくても字幕で追える
• 簡単な単語(リンキング)や難しい単語も文字で確認できる
• 会話履歴で残せる

今回は、リアルタイムで字幕を表示し、履歴として残せる補助機能を AI で作成できました。

過去の英語学習は、続けにくいことが多かった

これまでにも英語学習のために、様々なことをしてきました。笑い話として記述します。

• 任天堂スイッチを英語設定にして家族に怒られる
• スマホを英語設定にして、大事な設定変更で苦戦する
• Netflix で、日本語と英語が同時表示で字幕がより多くなる
• 日本人 YouTuber の音声を英語に切り替える
• Discord を使い Steam で海外プレイヤーと一緒に音声チャットでゲームをする

上記のようにいろいろ試してきました。無理やり英語環境にすることで、生活面で負担が出ることもありました。

感想

知識や経験がないと実装は難しいものですが、AI を使ってプロトタイプを作れたことは大きかったです。
諦めるのは簡単です。仕事、勉強、運動でも同じだと思います。続けていく意欲が一番の難しさだと思います。今回は、AI を活用して続けるための工夫の紹介でした。

最後に、弊社ではITエンジニア専用のオンライン英会話レッスンをやっています。興味のある方はご覧になってください。