何嘉仁電子書：圖片＋聲音是怎麼結合的（逆向筆記）

一、廠商（ebook.html）的做法

一句話：一張跨頁大圖當底圖，上面疊一堆「透明按鈕」，每個按鈕各自綁一個 mp3。

翻頁時載入的檔案（都在 CDOnlineApi/FileCollections/EBookFileUnzip/SF1_H5_student/）：

檔案	作用
`page.json`	單元目錄（Phonics Fun / Topic 1…→ 對應頁碼）
`directory.xml`	頁面清單（Cover、4/5、6/7…）
`book.xml`（3.1 MB）	核心：每一頁的底圖、每個可點物件的座標與音檔
`Resource/…`	所有素材（頁面圖、小圖、mp3）

book.xml 裡一頁長這樣：

<Page pageName="6/7">
  <background><![CDATA[SB1_OriginalPicture/page6.jpg]]></background>   <!-- 底圖 -->

  <Sound>                                                              <!-- 透明熱點 -->
    <position x="-291.5809" y="219.5256"/>
    <size width="444.7999" height="513.92"/>
    <musicPath><![CDATA[Voice_book/01/P06_02_single.mp3]]></musicPath>
  </Sound>

  <Read>                                                               <!-- 整段播放 -->
    <musicPath><![CDATA[Voice_book/01/P06_allplay.mp3]]></musicPath>
    <Link>                                                             <!-- 逐句 highlight 腳本 -->
      <TodoEvent stepName="1" triggerTime="0.6" type="1">…</TodoEvent>  <!-- 0.6 秒：顯示 -->
      <TodoEvent stepName="1" triggerTime="4.9" type="0">…</TodoEvent>  <!-- 4.9 秒：隱藏 -->
    </Link>
  </Read>
</Page>

物件類型：Sound（單句發音）、Read（整段播放＋時間軸 highlight）、GroupTrigger（一次播一整組）、JumpPage（跳頁）、loadImage（換圖）、WebLink／AFile（外部連結）。

座標系統（重要）

設計畫布是 2048 × 1280（就是跨頁原圖的尺寸，16:10）。
原點在畫面正中央，x、y 指的是物件的中心點（不是左上角）。
+y 是往上（數學座標），不是往下 —— 這點弄反，整頁熱點會上下顛倒。
換算成 CSS 百分比：

left% = (1024 + x − w/2) / 2048 × 100
top%  = (640  − y − h/2) / 1280 × 100      ← y 用減號
寬%   = w / 2048 × 100      高% = h / 1280 × 100

例：page 6/7 的 8 個 Sound 排成「每頁 2×2」，P06_01 Stand up 是 x=-744.4 y=+219.5 → left=2.79% top=12.77%（左上角那一格），P06_04 Line up 是 y=-310.2 → top=54.16%（下排），與圖片位置完全吻合。

二、本機播放器（自己做的版本）

廠商那支 ebook.html 要連他們的伺服器、要登入才會動，抓下來沒用，所以照同樣原理重做了一份：

何嘉仁SuperFun01_OK\
├ 播放器.html          ← 播放器本體
├ 播放器資料.js        ← 由 book.xml 轉出的資料（每頁熱點座標＋音檔路徑）
├ 開啟播放器.bat        ← 雙擊開啟
├ 課本_StudentBook\    46 張跨頁圖
├ 習作_Homework\       30 張
└ 語音\                738 個 mp3（Voice_book / Voice_WB / Voice）

熱點數：課本 607 個、習作 121 個，合計 728 個音檔對應點。
點頁面上的圖或句子就發音；「整頁播放」優先用 AllPlay 長音檔（例如 P06_allplay.mp3 全長 37 秒）。
「顯示熱點」會把所有可點區域用虛線框標出來；「音檔清單」可看這一頁有哪些 mp3。
跳頁：面板「上一頁／下一頁」下方的輸入框，直接打書本上印的頁碼（例：28）就會跳到那一頁所在的跨頁（28/29）；
課本與習作各自獨立計頁（習作輸入 4 會到 H4/H5），打錯或超出範圍會提示「這本沒有第 N 頁」。
鍵盤：← → 翻頁、空白鍵 整頁播放、Esc 關清單。

沒有重建的部分

廠商 Read 物件裡那段 TodoEvent 時間軸（播到第 0.6 秒把某個句子打亮、4.9 秒熄掉）已經做了，就是播放器裡的「逐句跟讀」：

解析 book.xml 時，把每個 Read 的 TodoEvent（triggerTime＋type＋linkUID）轉成「時間 → 打亮／熄掉哪些熱點」，寫進 播放器資料.js 的 ev 欄位。
全書共 1492 個 TodoEvent，1476 個 已能對上畫面（其中一部分指向沒有音檔的圖片物件，播放器會用另一個透明圖層畫出同樣的高亮框，所以「只有圖片、沒有音檔」的句子也照樣會跟讀）。
播放器在播音時依 currentTime 打亮對應句子（黃框＋呼吸光），暫停、換頁、播完自動清除；拖動進度也會即時重算。
面板上有「🎯 逐句跟讀」開關，預設開啟；關掉就只做點擊播放。

遊戲模式（聽力找圖）

在播放器左側頁籤按「🎮 遊戲模式」，該頁會變成聽力遊戲：

題目 = 該頁所有單句音檔（Sound；allplay／follow／speaker 這類整段朗讀與旁白不算，2%×3% 的小喇叭圖示也不算），同一個音檔只考一次
隨機出題 → 播放問題音檔 → 孩子點畫面上對應的圖片區塊
答對：隨機播一句英文讚美（語音/遊戲語音/praise_1~6.mp3，美式女聲）
答錯：播「Oh, no! You clicked ＋（剛剛點到那個區塊的音檔）＋ Please try again.」，然後重播題目，點到對為止
全部題目都答對才過關；計分＝第一次就答對的題數，另外算連勝
計時：按下遊戲模式就開始計時（HUD 顯示 ⏱ 0:12.3），全部答完停止；完成卡顯示總時間、答錯次數、本頁最快紀錄（存在瀏覽器 localStorage，同一台裝置輪流玩會共用紀錄，破紀錄顯示「🎉 新紀錄！」，沒破顯示「慢 X 秒」）
音檔由 edge-tts（en-US-AriaNeural）產生，共 9 支、約 144 KB

頁面上的「句型練習／補充筆記／遊戲」按鈕

那些不是音檔，是 WebLink（外部連結）與 AFile＋jumpPage（電子書內部跳頁），所以在純圖片的頁面圖上不會出現（是前端另外畫上去的）。

22 個外部連結已抓出來，放在播放器左側隱藏頁籤 →「本頁連結」下拉清單裡（面板打開後點「🔗 外部連結 N」展開），點項目會開新分頁；該頁有連結時，左側頁籤上會出現一顆小橘點提示。

按鈕	去哪
單字練習 `word_p`	Quizlet 單字卡
句型練習 `Sentence_p`	Quizlet 句型卡
遊戲 `game`	Wordwall 小遊戲
線上測驗 `test`	etest.hess.com.tw
`cooleng`	Cool English

（補充筆記 與部分 遊戲 是內部跳頁，跳頁目標要靠他們前端的頁碼表，離線對不上，所以沒做。）

三、如果要換書／加書

book.xml 是每本書各自的，路徑規則：

https://bookonline.hess.com.tw/CDOnlineApi/FileCollections/EBookFileUnzip/<書號>/book.xml

把 <書號> 換掉（例如 SF1_H5_student），再用同樣的轉換就能生出新的 播放器資料.js。

挑戰（出題介面 + 分享連結）

老師用的頁面：出題介面.html（播放器左側頁籤也有「🏫 出題介面」按鈕）。

勾選要考的頁面（清單顯示每頁題數，0 題的頁面不能勾）
輸入關卡名稱 → 按「🔗 產生分享連結」
把連結傳給學生，例如 播放器.html?lv=17d2fca8

學生打開連結後是挑戰者模式：

左側頁籤、翻頁箭頭、全螢幕按鈕全部隱藏，不能自己翻頁
先看到準備卡（關卡名稱、幾關、幾題、目前排行榜）→ 按「🏁 開始比賽」
每張跨頁是一個小關，答完出現「第 N 關完成！請到下一關」
全部關卡完成 → 公佈總時間與排行榜 → 按「關閉」顯示結束卡
中途按「✕ 結束」或關掉頁面，伺服器記為「未完成」（9999），不會擠掉別人的成績

排行榜資料在 ~/edu/runs.json，關卡定義在 ~/edu/levels.json（Pi 上），每個人只留最快的一次。

這頁由 說明_聲音與圖片怎麼結合.md 自動產生（原始 Markdown 仍在同資料夾）。