有聲單檔HTML動畫怎麼交付？從SKatalyst短片檢查音畫與素材依賴

有聲單檔HTML動畫能在一個網頁檔裡播放，代表它方便攜帶，不代表故事、節奏和聲音已經做好。SKatalyst 的分享有趣之處，是把模型批評自己作品的過程也放進來。

作者表示使用 Claude Code 與 Opus 5.5 製作短片，並安排多輪批評。練習時可要求每個意見都指出時間點、可見問題與預期修改。

本文整理的是公開案例與本站審片需求範本。原貼是成片展示，未提供完整 HTML 原始檔；本文提供可套用到自己作品的音畫與檔案檢查表。

單檔HTML動畫原作者實際公開了什麼？

SKatalyst 的 X 貼文展示了成片，並描述單檔、製作時間與批評輪次。85 KB、47 分鐘與 Claude 對成片的 6／10 自評，都是作者對該案例的陳述。

這些數字不能推成每支片的成本或品質承諾。更值得學的是把「我覺得不順」變成下一輪可以確認的修改。

若網頁需要聲音，可以透過 Web Audio 等瀏覽器功能產生或處理音訊；實際能否順利播放，仍受載入與使用者操作情境影響。

把聲音、畫面和外部依賴分開驗收

先離線開啟一次，確認圖片、字體與聲音是否都隨檔案帶走。再分別測試第一次開啟、按下播放及重新播放，因為瀏覽器對聲音啟動的限制，可能讓無聲預覽看起來像正常播放。

建議把意見寫成這樣的結構：

這張表讓單檔作品的交付條件可以被重測。若離線不是本次要求，也要在交付說明列出仍需要連線的素材，避免接收者誤以為所有內容都在檔案裡。

可複製的動畫審片需求

把現有 HTML 與影片輸出交給同一個能開檔檢查的程式代理。若它無法實際播放，就只能檢查程式，應把音畫驗收留給可播放的環境。

以下是本站依案例另寫的範本，非作者使用的逐字 prompt，尚未以此流程完成成片實測。

請實際開啟 HTML 與輸出影片，分開檢查聲音、畫面和外部依賴。
先測試第一次開啟、點擊播放與從頭重播，記錄聲音是否正常。
確認重播後聲音和畫面都回到起點，沒有殘留上一輪音軌。
離線測試圖片、字體與音訊，列出仍依賴連線的素材。
對照 HTML 預覽與 MP4 的相同時間點，檢查節奏與音畫一致。
每個問題附上時間碼、畫面或聲音證據與可重測的修正方式。
保留修改前後版本，不能播放的項目就明確列出。

單一檔案也要在交付環境測試

把檔案交給另一台電腦或另一個瀏覽器開啟，才能發現是否依賴本機字體、外部連結或尚未帶走的素材。檔案很小，有時只是因為大部分內容仍在網路上。

如果最後需要社群影片，再確認 MP4 和網頁預覽是否一致。網頁能互動和影片能正確輸出，是兩個不同的驗收項目。

可以把模型評分當作完成標準嗎？

評分能協助排序問題，但仍需看具體證據。觀眾是否看懂、文字是否能讀完，不能只靠模型自己說幾分判定。

原貼是否提供完整 HTML 原始檔？

本次讀取的原貼提供的是示範與描述，沒有可直接作為完整專案交付的原始檔。想練習時，使用自己的短片套用審片表即可。

先在另一個環境確認檔案能播放，再核對網頁與影片的聲音、畫面一致，才能把有聲單檔作品完整交出去。

延伸閱讀：Claude 動畫做完怎麼交付？HTML、SVG 與 MP4 的用途和檢查重點

延伸閱讀：2026 Claude Code 做影片 Skills 推薦：HyperFrames、Remotion 到剪輯工具怎麼選？