MLBオフシーズン配信を英語教材にしたら再生プレイヤーまで作り直すことになった

MLBオフシーズン配信を英語教材にしたら再生プレイヤーまで作り直すことになった

5分で読めます注目

日本人MLB配信者の1時間半の配信を日英バイリンガルコンテンツに変換。リスニングページのUIがゴミだったので、ConversationPlayerレベルに作り直した。ElevenLabsは高い。

English Conversation

Takumi
So I translated an MLB stream into English today.
1 / 241.0x
1
Takumi
So I translated an MLB stream into English today.
2
Anya
Wait, you translated FROM Japanese? Not into Japanese?
3
Takumi
Exactly. A Japanese streamer talking about the Arenado trade, Weathers to Yankees, Tucker's market. Now it's English learning material.
4
Anya
That's... backwards. But interesting.
5
Takumi
80 segments. Full bilingual. The problem was the listening page.
6
Anya
What was wrong with it?
7
Takumi
YouTube error because there's no video. No continuous playback. Speed control didn't actually work.
8
Anya
Ouch. So what did you do?
9
Takumi
Rebuilt the entire player. Like ConversationPlayer but for listening content.
10
Anya
Music player style?
11
Takumi
Yeah. Play, pause, skip, shuffle, repeat. Speed buttons that actually work. Progress bar. Auto-scroll.
12
Anya
Nice. What about the voice? Browser TTS sounds robotic.
13
Takumi
I looked into ElevenLabs. Expressive, emotional, sounds like real broadcasters.
14
Anya
And?
15
Takumi
It's expensive. $22 a month for 100k characters. The MLB content alone is like 30k.
16
Anya
That's wild. Audio should be cheaper than video generation.
17
Takumi
Exactly what I said. Anyway, the funniest part of the stream...
18
Anya
What?
19
Takumi
Padres tried to get Arenado. For FIRST BASE.
20
Anya
Wait, Arenado's bat is dead. First base is the most offense-heavy position.
21
Takumi
Exactly. Rosenthal reported it. Hilarious and sad at the same time.
22
Anya
The Padres are really broke, huh.
23
Takumi
So broke. But hey, at least I got 80 segments of English learning content out of it.
24
Anya
Silver lining.

Japanese Conversation

24 lines

今日、MLBの配信を英語に翻訳したんだ。

え、日本語から?日本語にじゃなくて?

そう。日本人配信者がアレナドトレードとか、ウェザースのヤンキース移籍とか、タッカーの市場について話してて。それを英語学習教材にした。

逆...でも面白いね。

#英語学習#MLB#コンテンツ制作#野球TTSWeb Speech APINext.jsTypeScript

2026年1月15日

今日やったこと:
  1. 日本人MLB配信者の1時間半のストリームを翻訳
  2. 80セグメントの日英バイリンガルコンテンツを作成
  3. リスニングページを完全に作り直した
  4. ElevenLabsの料金に驚愕した

きっかけ

MLBオフシーズンの配信を英語学習に使いたい。
アレナドのDバックストレード、ライアン・ウェザースのヤンキース移籍、タッカーの契約交渉...
日本語で解説されてる配信を、英語に翻訳して、リスニング教材にする。
逆転の発想だ。

翻訳した内容(ハイライト)

配信は約1時間半、以下のトピックをカバー:

アレナドトレード

  • カージナルスがDバックスに放出
  • 残り4200万ドルのうち、カージナルスが3100万ドル負担
  • アリゾナは2年で1100万ドルしか払わない
  • 見返りはドラフト8巡目のマイナーリーガー1人
"So basically, they gave him away for almost nothing plus $31 million in salary relief."

ライアン・ウェザース

  • 元パドレスの1巡目(全体7位)
  • 高校時代の防御率0.09
  • 球速が93-94から上位90後半〜100マイルに成長
  • ヤンキースがコールとロドン復帰までの穴埋めに獲得

タッカー市場

  • ブルージェイズが7年3億ドル(年平均4000万ドル以上)をオファー?
  • 配信者の予想:報道されてるファイナリスト3チームどこにも行かない。ミステリーチーム。

Team USA WBC

  • Judge、Harper、Skubal、Skenes
  • 「このロースターで優勝できなかったら言い訳できない」

パドレスの金欠

  • 驚愕の事実:パドレスがアレナドをファーストで獲得しようとしてた
  • 「打撃が終わってる選手をファーストで使う?一番打撃が重要なポジションで?」

問題発生:リスニングページがゴミ

コンテンツを追加して確認したら...
  • YouTubeエラー(そもそも動画がない)
  • 連続再生ができない
  • 速度変更が嘘
  • UIがMemoriaのConversationPlayerに比べて劣りすぎ
ユーザー:「まじめにやれよ これみたいに /memoria/journal-069」
完全に正論だった。

リスニングページを作り直した

Before:YouTube依存、機能不足 After:TTS連続再生、音楽プレイヤー風UI

新機能

  • 連続再生 - onendで自動的に次のセグメントへ
  • 速度変更 - 0.5x〜2.0xボタン(ちゃんと効く)
  • シャッフル/リピート - Spotifyみたいな操作感
  • プログレスバー
  • 日本語表示ON/OFF
  • 自動スクロール - 再生中のセグメントが常に画面中央

ElevenLabs高すぎ問題

ユーザー:「エンバトの流暢さがほしい。感情をこめた。じゃないと詰まんないじゃん?」
わかる。ブラウザTTSはロボット声。
ElevenLabsの料金:
| プラン | 文字数 | 月額 | |--------|--------|------| | 無料 | 10,000文字 | $0 | | Starter | 30,000文字 | $5 | | Creator | 100,000文字 | $22 |
今回のMLBコンテンツは約2-3万文字。
ユーザー:「エンバト高いねえwww 音声なんて動画生成よりはるかにコスト低そうなのにね(笑)」
正論すぎる。

技術メモ

ConversationPlayerから学んだこと

const playSegment = (index: number) => { const utterance = new SpeechSynthesisUtterance(segment.english); utterance.rate = speedRef.current; // リアルタイム速度参照 utterance.onend = () => { const nextIndex = getNextIndex(index); if (nextIndex >= 0) { playSegment(nextIndex); // 自動連続再生 } }; window.speechSynthesis.speak(utterance); };
ポイント:
  • Refで速度を保持 - useStateだとクロージャ問題で古い値を参照してしまう
  • onendで次を呼ぶ - setTimeoutで少し待ってから次のセグメントへ
  • getNextIndex() - リピートモード、シャッフルモードを考慮

結論

  1. 翻訳は簡単(AIに任せればいい)
  2. UI作り直しが本番だった
  3. 良いUIはすでにある(ConversationPlayer)
  4. ElevenLabsは高い
  5. 野球カスはMLB Networkの早口を聞きたい

80セグメント、日英バイリンガル、連続再生対応
パドレスがアレナドをファーストで獲ろうとしてた件、笑えるし悲しい

AI生成コンテンツについて

この記事は、AI(Claude、ChatGPT等)によって生成されたコンテンツです。 経営者とAIの実際の対話を元に作成していますが、技術的な内容には誤りが含まれる可能性があります。

重要な決定をされる際は、専門家にご相談されることをお勧めします。 また、記事の内容について疑問がある場合は、お気軽にお問い合わせください。