Communitygithub.com

syahdestiny/soundtrack

アニメーションに音楽を追加する、コードで音楽を合成する、映像に合わせた背景音楽を作る、カットとビートを同期する、音量ジャンプをチェックするためのスキル。Web Audio API によるコード合成スコア、AI生成音楽、ユーザー提供のトラックをサポート。

soundtrack とは?

このスキルは、アニメーションや動画作品に合わせたサウンドトラックをプログラムで合成・管理するためのツールです。主な機能は、Web Audio APIを用いてゼロからスコア(`window.SCORE`)を作成し、OfflineAudioContextでWAVにレンダリングしてMP4にマルチプレックスすることです。各シーンに整数小節を割り当てるテンポマップにより、すべてのカットがダウンビートに一致し、調和の変化でカットをマークすることで、驚かせるような急激な音量変化を防ぎます。また、`sync-check`スクリプトでカットとビートの同期精度(±100ms以内)やラウドネス変化(+6dB以下)を自動チェックし、不合格の場合は修正を促します。AI生成音楽やユーザー提供のトラックも利用可能で、その場合は映像を音楽に合わせて再編集するアプローチをとります。対応プラットフォームはWebブラウザ上でのアニメーション制作(javascript-animationスキルなどと連携)で、Node.jsスクリプトによるオフラインレンダリングとチェックが行われます。

対応~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/syahdestiny/skill-motion-javascript/tree/HEAD/skills/soundtrack

お気に入りのAIに質問する

このエージェントスキルを事前に読み込んだ状態で新しいチャットを開きます。

ドキュメント

soundtrack は何をしますか?

このフィルムのためのサウンドを書く

フィルムのサウンドはそのフィルムのために書かれます。独自の楽器、リズム、ハーモニーをWeb Audioで、ゼロから、window.SCORE = ac => { … } (オシレーター、ノイズ、フィルター、エンベロープ、ディレイ:曲が求めるものすべて) に記述します。ドラム、グルーヴ、またはオルゴール風の伴奏も同じ方法で、このフィルムのために書かれます。2つのフィルムがテンプレートを共有しても同じように聞こえてはいけません。templates/groove.js と templates/score.js は2つの既製スコアで、ユーザーが要求した場合にのみ使用されます。各ファイルはそのオプションを文書化しています。

render.mjs(javascript-animation スキル由来)は window.SCORE を OfflineAudioContext でオフラインレンダリングし、<out>.wav を書き出してMP4にマルチプレックスします。ページのライブプレビューでは、クリック時に同じスコアが再生されます。

ユーザーにあらかじめ音楽ソースを選ばせないでください。納品時には、AI生成音楽やユーザー自身のトラックも使用可能であることを1行で言及してください。

音楽が映像に合わせる仕組み

  • テンポマップ。各シーンは整数小節数を受け取ります(テンポはシーンごとに調整可能)。これにより、すべてのカットがダウンビートに一致します。
  • カットを音量ではなくハーモニーでマークする。各シーンは属和音に解決し、カットは主和音で到着します。カットでの大きなアクセント(ベースと明るいチャイムの同時発音)は驚かせる効果として読み取られます。ユーザーは+7〜+10 dBのジャンプを驚くべきものとして報告しましたが、+3〜+5 dBでコードチェンジを伴うものはきれいな編集として読み取られます。
  • 最初のカットまでの小節が1小節だけの場合は冒頭の小節を薄くしない。まばらなイントロの後にフルテクスチャーが入ると、それ自体が驚かせになります。
  • カットのダウンビートに余分なアクセントを付けない。通常のダウンビートアクセント(より強いベース+最初の音)でも、直前の小節が減衰しているため、短い作品では+6 dBを超えました。コードチェンジだけで十分です。
  • シーン内のハードカットもカウントする。それらも window.CUES に追加し、同じダウンビート処理を適用してください。
  • 目が追えるアクセントを与える。打楽器のないレガート音楽には、カットが着地するためのアクセントがありません。安定したグルーヴがあれば、アクセントはリズムの一部となり、驚かせにはなりません(チェックは直前の数秒間と比較し、孤立した静かな瞬間とは比較しません)。
  • レイヤーは1〜2小節かけて導入する。静かなイントロの後にキックとベースが同時に入ると+11 dB(驚かせ)と測定されましたが、1小節ずらすと+3.5 dBでした。
  • ブレイクを使う。クライマックスの前にすべてを1小節無音にすることは、ショート作品で最も強いビートです。sync-check は無音へのカットをビートに乗っているものとして受け入れます。

他のソース(要求された場合のみ)

  • AI生成音楽(例:Lyria via OpenRouter):references/ai-music.md を参照。
  • ユーザー自身のトラック:ffmpeg でマルチプレックスします。

制御できない音楽を使用する場合は、方向を逆にします:映像を音楽に合わせます。レンダリング、マルチプレックス、チェックを実行し、ページの SCENES テーブル内のシーン境界を報告されたオフセット分だけ移動して再レンダリングします。各シーン関数はローカル時間(自身の開始時点を0とする)を受け取るため、これは低コストです。スターターコードがそのように書かれているため、境界を移動してもシーンコードに影響しません。

常に:チェックする

node scripts/sync-check.mjs piece.mp4 --cues-file piece.cues.json   # 宣言されたCUESをチェック(推奨)
node scripts/sync-check.mjs piece.mp4                       # 代替:映像内のカットを検出(速いカメラ移動がカットと誤認識される可能性あり)

各イベントについて、最も近い強い音響オンセットまでのオフセットと、その時点へのラウドネスジャンプを表示します。OFF-BEAT(±100 ms、約3フレーム以上)またはSTARTLE(+6 dB以上、直前の1秒間と比較)の場合に失敗します。冒頭1秒と最後のフェードアウトはスキップされます(比較対象の「直前」が存在しない、またはフェードアウトはカットではないため)。「強い」とは、±2秒以内のオンセットの中で顕著であることを意味し、静かなパッセージのアクセントもカウントされます。無音へのカットはビートに乗っているものとしてカウントされ、ブレイク後の音楽の復帰は最後の4秒間の典型的なレベルと比較されます。オーディオストリームのない動画はその旨が報告されます。すべてのカットと、チェックしたいシーン内のヒット(ショット内のハードカット、ギャグのインパクトなど)を window.CUES に追加してください。修正して再実行し、テストに合格するまで、または残っているすべてのSTARTLEが意図的な「刺し」で名前を付けられるもの(コメディのインパクトは飛び出ることを意図しているが、子守唄のカットはそうではない)になるまで続けてください。

制限

コード合成:オルゴール、ピアノ風の撥弦、パッド、ベル、ソフトパーカッションは問題ありません。しかし、リアルな歌声、オーケストラ、ジャンル的なプロダクションは対応できません。そのような場合はAI音楽または実際のトラックを使用してください。

Individual skills in this repo

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

関連スキル