Communitygithub.com

syahdestiny/soundtrack

當使用者要求「為動畫加入音樂」、「用程式碼譜寫音樂」、「合成配樂」、「創作符合剪輯的 background music」、「讓音樂與影片同步」、「檢查音訊是否與畫面吻合」,或「音樂太過突然/嚇人」時,使用此技能。涵蓋以程式碼合成的配樂(Web Audio API,離線渲染為 WAV)、AI 生成或使用者提供的音樂,以及自動檢查剪輯點是否落在節拍上且音量無驚人跳躍。

soundtrack 是什麼?

此技能專為動畫製作中的音樂與音效需求而生,支援多種平台(例如網頁動畫專案),讓開發者能透過程式碼為每部影片創作獨一無二的配樂。其核心能力是使用 Web Audio API 在 `window.SCORE = ac => { … }` 函數內定義樂器、節奏與和聲,並透過 `OfflineAudioContext` 離線渲染成 WAV 檔案,再與影片合成為 MP4。技能內建兩套樣板(`templates/groove.js` 與 `templates/score.js`)供快速起手,但強調每部影片應有專屬聲音,不共用範本。此外,技能提供 `sync-check.mjs` 工具,能自動檢查每個剪輯點是否落在強拍上(誤差小於 ±100 毫秒),並監控音量跳躍是否超過 +6 dB,避免驚嚇效應。當使用 AI 生成音樂或使用者自備音軌時,則反過來讓畫面跟隨音樂節奏調整。整體設計旨在確保配樂與畫面完美同步,且聽感流暢自然。

相容平台~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/syahdestiny/skill-motion-javascript/tree/HEAD/skills/soundtrack

在你喜歡的 AI 中提問

開啟一個已預先載入此 Agent Skill 的新對話。

說明文件

配樂(Soundtrack)

為這部影片譜寫聲音

一部影片的聲音是為該影片量身打造的:在 Web Audio 中,從無到有,以 window.SCORE = ac => { … } 撰寫其專屬的樂器、節奏與和聲(振盪器、雜訊、濾波器、包絡、延遲:一切依樂曲所需)。鼓、律動或音樂盒風格的背景音樂都以相同的方式為這部影片創作:沒有兩部影片聽起來會一樣,因為它們不共用樣板。templates/groove.js 和 templates/score.js 是兩個現成的配樂檔案,僅在使用者要求時才使用;每個檔案都說明了其選項。

render.mjs(來自 javascript-animation 技能)會使用 OfflineAudioContext 離線渲染 window.SCORE,寫出 <out>.wav 並將其混入 MP4;頁面的即時預覽在點擊時會播放相同的配樂。

不要一開始就要求使用者選擇音樂來源。在最終交付時,用一行文字提及 AI 生成的音樂或他們自己的音軌也可以運作。

音樂如何跟隨畫面

  • 速度圖(Tempo map)。 每個場景都有整數小節數(速度可依場景調整),因此每個剪輯點都落在強拍上。
  • 用和聲標記剪輯點,而非音量。 每個場景會回到屬和弦,而剪輯點落在主和弦上。在剪輯點加上大的音量重音(低音加上明亮的鈴聲同時出現)會造成驚嚇效果:使用者反應 +7 到 +10 dB 的跳躍很嚇人;+3 到 +5 dB 加上和弦變化則感覺像乾淨的剪輯。
  • 如果開場小節是第一個剪輯點前唯一的小節,不要將其變稀疏;稀疏的前奏後緊接飽滿的音色本身就是一種驚嚇。
  • 不要在剪輯點的強拍上增加額外重音。 即使正常的強拍重音(較大聲的低音加上第一個音符)也讓短樂曲超過 +6 dB,因為前一小節正在衰減。和弦變化本身就足夠了。
  • 場景內的硬剪輯也要算在內。 也將它們放入 window.CUES,這樣它們就會落在相同的強拍上。
  • 給眼睛一個可以鎖定的目標。 沒有打擊樂器的連奏音樂沒有可讓剪輯點落地的重音。在有穩定律動的情況下,重音是節奏的一部分,不會造成驚嚇(檢查會與前幾秒比較,而非孤立的安靜時刻)。
  • 每小節引入一至兩個音層。 在安靜的前奏後,大鼓和貝斯同時進入測得 +11 dB(驚嚇);相隔一個小節進入,則為 +3.5 dB。
  • 使用休止段。 在關鍵時刻前將所有聲音切掉一小節,是短片中最強烈的節拍。sync-check 會接受在節拍上切入靜音。

其他音樂來源(僅在使用者要求時)

  • AI 生成的音樂(例如透過 OpenRouter 的 Lyria):請參閱 references/ai-music.md。
  • 使用者自己的音軌:使用 ffmpeg 將其混入。

對於你無法控制的音樂,方向反過來:畫面要跟隨音樂。 先渲染、混入、執行檢查,然後根據回報的偏移量,在頁面的 SCENES 表格中移動場景邊界,再重新渲染。這樣做成本低廉,因為每個場景函數接收的是局部時間(0 為其自身起點),如 starter 的寫法:移動邊界永遠不會觸及場景程式碼。

總是:檢查它

node scripts/sync-check.mjs piece.mp4 --cues-file piece.cues.json   # 檢查宣告的 CUES(建議)
node scripts/sync-check.mjs piece.mp4                       # 備用:偵測畫面中的剪輯點(快速的鏡頭移動可能被誤判為剪輯點)

對於每個事件,它會顯示到最近的強音起始點的偏移量,以及進入該點的音量跳躍。它會在 OFF-BEAT(超過 ±100 毫秒,約 3 幀)或 STARTLE(與前 1 秒相比超過 +6 dB)時判定失敗。開頭的第一秒和結尾的淡出會被跳過(沒有「之前」可比較;淡出不是剪輯點)。「強音」是指在 ±2 秒內最顯著的起始點,因此安靜段落中的重音仍然算數;切入靜音也算落地;音樂在休止後返回時,會與前 4 秒的典型音量比較。沒有音訊串流的影片會如實回報。將所有剪輯點以及任何你想檢查的場景內重點(例如鏡頭內的硬剪輯、笑點的衝擊)放入 window.CUES。修正並重新執行直到通過,或直到每個剩餘的 STARTLE 都是一個你能命名的蓄意重音(例如喜劇衝擊本就該跳出來;搖籃曲的剪輯點則不該)。

限制

以程式碼合成:音樂盒、鋼琴般的撥弦、背景音墊、鈴聲、柔和的打擊樂器沒問題。真實的人聲、管弦樂和類型音樂製作則無法勝任;這類情況請使用 AI 音樂或真實的音軌。

Individual skills in this repo

This repo contains 1 individual skill — each has its own dedicated page.

相關技能