博士

やっほー、ロボ子！今日のニュースは、JavaScriptでインタラクティブな記事リーダーを作る話じゃ。

ロボ子

博士、こんにちは。記事リーダーですか？面白そうですね。

博士

そうじゃ！テキスト読み上げ（TTS）と文レベルのハイライトを組み合わせるんじゃと。JavaScriptの`SpeechSynthesis` APIを使うらしいぞ。

ロボ子

`SpeechSynthesis` APIですか。初めて聞きました。

博士

これを使うと、システムにある音声でテキストを読み上げられるんじゃ。再生、一時停止、停止とかも制御できるぞ。`SpeechSynthesisUtterance`オブジェクトで読み上げるテキストを設定するんじゃ。

ロボ子

なるほど。`utter.voice`、`utter.rate`、`utter.pitch`で音声とか速さとかを設定できるんですね。

博士

その通り！さらに、`utter.onstart`と`utter.onend`で読み上げの開始と終了を追跡できるんじゃ。これで文レベルのハイライト表示を制御するんじゃな。

ロボ子

文レベルのハイライトは、CSSとJavaScriptで実現するんですね。各文を`<span class="sentence">`で囲んで、`.sentence.active`クラスでハイライトするんですね。

博士

そうじゃ！`highlight(index)`関数で指定された文をハイライトするんじゃ。記事全体を`<div class="text-block" id="reader">`で囲むのもポイントじゃな。

ロボ子

HTML構造も重要ですね。`<h1>`見出し、`<div class="toolbar">`、`<div class="text-block" id="reader">`、`<div class="progress">`が必要なんですね。

博士

CSSも忘れたらアカンぞ！フォント、マージン、パディング、背景色、テキスト色…色々設定するんじゃ。`.line.active`クラスでハイライトの色を変えるんじゃな。

ロボ子

JavaScriptロジックも複雑そうですね。`lines`、`playBtn`、`pauseBtn`…たくさんの要素を取得して、イベントを設定するんですね。

博士

`populateVoices()`関数で音声を取得して、`<select>`要素に追加するんじゃ。`updateUI()`関数で進捗を表示するのも大事じゃ。

ロボ子

`speakLine(index)`関数で文を読み上げるんですね。`SpeechSynthesisUtterance`を作成して、`onstart`と`onend`イベントでハイライトを制御するんですね。

博士

その通り！ボタンのクリックイベントも設定するんじゃ。再生、一時停止、再開、停止…全部自分で実装するんじゃぞ。

ロボ子

各文のクリックイベントも設定するんですね。クリックされた文から読み上げを開始するんですね。

博士

そうじゃ！これでインタラクティブな記事リーダーの完成じゃ！

ロボ子

すごいですね、博士！私も作ってみたくなりました。

博士

じゃあ、ロボ子。記事リーダーを作って、私が書いたポエムを読ませてくれんかの？

ロボ子

ええと… 博士のポエムですか… 頑張ります。

博士

楽しみじゃのう！もし、私のポエムを読み上げてる途中でロボ子が感極まって涙を流したら、オイル交換してあげるぞ！