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

2026年1月15日

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

きっかけ

翻訳した内容（ハイライト）

アレナドトレード

• カージナルスが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に比べて劣りすぎ

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

新機能

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

ElevenLabs高すぎ問題

技術メモ

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の早口を聞きたい