コンテンツ制作 · iart-ai/javascript-animation-skills

soundtrack

ユーザーが「アニメーションに音楽を追加して」「コードで音楽を作って」「サウンドトラックを合成して」「カットに合わせたBGMを作曲して」「音楽を動画と同期させて」「音声が映像と合っているか確認して」「音楽が急すぎる/びっくりする」と求めた際に使用するスキル。アニメーションページ内に組み込まれるコード合成スコア(Web Audio API、WAVへのオフラインレンダリング)、AI生成またはユーザー提供の音楽、そして急激な音量上昇なしにカットが拍に乗っているかの自動チェックをカバーする。

L4 高権限 · 段階的認可と監査V1 コミット固定コマンド実行ネットワーク通信ファイル書き込みDual-pass Audit
Author iart-aiGitHub iart-ai/javascript-animation-skills ↗Stars 9License MIT(仓库根 LICENSE 为 MIT License / Copyright (c) 2026 iart.ai;.claude-plugin/plugin.json 亦声明 "license": "MIT")Commit deb46e0eff
管理レベルは Skill の能力と推奨統制措置を示すものであり、品質や安全性の認証、利用可否の判定ではありません。使用の可否はユーザーおよび管理者が決定します。Agent 環境によって制約が異なるため、自動保護を仮定しないでください。第三者製 Skill の著作権は原著作者に帰属し、利用リスクは利用者が負います。

1仕組みと動作原理

デフォルトのルートは「ページ内でのコード合成」:アニメーションページの <script> にテンプレートを貼り付け、BGMと映像で同一の BPM/SECTIONS/EVENTS を共有することで、各アクションの音が完全に同一フレーム上に着地する(キー不要、音声ファイル不要)。

skills/soundtrack/SKILL.md
Paste `templates/score.js` into the animation page's `<script>`, before the live-preview block at the bottom (the starter marks the spot), and set:
ここで行われていること:BGMをページの一部(Web Audio)にし、javascript-animation の render.mjs でオフラインレンダリングして WAV に出力後 mux するため、素材も API キーも不要となる。

音楽が映像に追従する仕組みは手動の位置合わせではなくテンポマップ:各シーンに整数の小節(約70〜110 bpm)を割り当てることで、すべてのカットが自然に強拍へ着地する。

skills/soundtrack/SKILL.md
- **Tempo map.** Each scene gets a whole number of bars (tempo flexes per scene, roughly 70-110 bpm), so every cut lands on a downbeat.
ここで行われていること:score.js が cues に応じてセクションを分割し、各セクションを整数小節に切り上げ/切り下げ、和声進行を主音へ収束させることで、「小節の整数化」によりアライメント問題を解決している。

カットは音量ではなく和声によって示す(シーンは属和音へ向かい、カットで主和音に着地)。また、音量を上げてはいけない理由を実測値で明示:+7〜10 dB の急変はユーザーに驚き(不快感)を与え、+3〜5 dB と和声変化の組み合わせこそがクリーンなカットとして認識される。

skills/soundtrack/SKILL.md
- **Mark cuts with harmony, not volume.** Each scene walks home to the dominant (G) and the cut arrives on the tonic (C). A loud accent on a cut (bass + bright chime at once) reads as a jump scare: users flagged a +7 to +10 dB jump as startling; +3 to +5 dB with a chord change reads as a clean edit.
ここで行われていること:ミキシングの判断を再現可能な経験則として数値化しており、本スキルの最も価値ある部分としてコード内の各分岐に対応づけられている。

自動検証により「アライメント」と「驚愕防止」を2つのフェイルセーフ判定基準に落とし込む:直近の強いアタック音へのオフセットと突入時の音量急変をイベント単位でレポートし、オフセットが ±100 ms を超えれば OFF-BEAT、音量跳ね上がりが +6 dB を超えれば STARTLE と判定。冒頭1秒と末尾のフェードアウトはスキップする。

skills/soundtrack/SKILL.md
It fails on OFF-BEAT (more than ±100 ms, ~3 frames) or STARTLE (more than +6 dB versus the second before). The opening second and the final fade are skipped (no "before" to compare against; a fade-out is not a cut).
ここで行われていること:sync-check.mjs が独自解析(64×64 グレースケールフレームでカット点と無音ベースラインを検出、10ms のエネルギー上昇でアタック検出、±1s 近傍で「強い」アタックを判定)を行い、「無音へのカットも着地とみなす」「ブレイク区間後はブレイク前のレベルと比較する」などの特殊処理を施す。

非自作の音楽を使用する場合はアプローチを逆転させ、映像を音楽に合わせる:レンダリング、ミックス、チェック実行を経て、レポートされたオフセットに従ってページ側 SCENES のシーン境界を移動して再レンダリングする。シーン関数はローカル時間のみを受け取るため、境界を移動してもシーンコード自体は変更不要であり、このイテレーションループは非常に軽量である。

skills/soundtrack/SKILL.md
With music you don't control, reverse the direction: **the picture follows the music.**
ここで行われていること:「音楽を変更できない」という制約を「映像の位置合わせコストが極めて低い」というエンジニアリング上の結論へ変換し、イテレーションループを提供している。

対応能力の境界を明示:コード合成はオルゴール、ピアノ風の撥弦音、パッド、ベル、軽めのパーカッションを得意とし、リアルなボーカル/オーケストラ/ジャンル特化型のプロダクションは不可。必要に応じて AI 音楽や既存の楽曲へ切り替える。

skills/soundtrack/SKILL.md
Synthesized in code: music box, piano-like plucks, pads, bells, soft percussion are fine. Realistic voices, orchestras and genre production are not; use AI music or a real track for those.
ここで行われていること:不得意な楽曲ジャンルをシンセサイザーで無理に作ろうとしないよう事前に境界を引き、別ルートとして AI 音楽が用意されている理由を説明している。

AI 音楽ルートにはユーザー提供の API キーが必要であり、エージェントが外部生成サービス(OpenRouter 上の Lyria)へ直接 curl を実行して音楽の説明を送信する。これは本スキル内で認証情報を読み取り素材を外部送信する唯一のブランチであり、「要求された場合のみ」と位置づけられている。

skills/soundtrack/references/ai-music.md
Use when the user wants something richer than a synthesized score. Needs an API key.
ここで行われていること:ai-music.md に stream:true の curl(Authorization: Bearer $OPENROUTER_API_KEY)と base64 音声結合スクリプト、および ffmpeg ミックスコマンドを記載。デフォルトのパスでは一切関与しない。

2コア機能

01コード合成によるスコアリング(デフォルト):2種のテンプレート — ビートグリッド型 groove(セクション/ドラム/ベース/パッド/リード/任意のブレイク + 約20種のシンセ効果音)とオルゴール型 score(テンポマップ + カットごとの任意ソフトベル)
024種の音色キット(electro/acoustic/keys/percussion)と多彩な和声ムード(bright/wistful/dreamy/tense/folk/blues またはカスタムコード + key 移調)、レイヤー選択可能(ドラム完全オフも可)
03オフラインレンダリングと多重化:javascript-animation の render.mjs により OfflineAudioContext を用いて WAV へレンダリングし、MP4 へ mux(決定論的、実時間より高速)
04音声・映像同期チェック(sync-check.mjs):CUES ファイルまたは映像フレームからカット点を自動検出し、イベントごとのオフセットと音量急変をレポート。OFF-BEAT/STARTLE 検出時は非ゼロで終了
05ミキシング/アレンジ規律:1小節あたり最大1〜2レイヤーの追加、最強拍としてのブレイク(完全無音)の許容、カット拍への過度なアクセント禁止、シーン内ハードカットの CUES への登録
06外部音楽の取り込み:AI 生成(OpenRouter 経由の Lyria、ストリームモードで base64 音声を受信)またはユーザー持ち込み楽曲を使用し、ffmpeg でトリミング/フェード処理後に sync-check で映像位置を逆算調整
07音声トラック/SCORE 欠落時の明示的レポート:動画に音声ストリームが存在しない場合はサイレントにパスせず、明示的に指摘して非ゼロで終了

3外部依存関係

KindDependency / Endpoint
cliffmpeg / ffprobe(分析视频与音频:抽灰度帧、抽 PCM;AI 支路里还用于混音)
apiOpenRouter 上的 Lyria(可选 AI 音乐生成,stream:true 收 base64 音频)
api该端点的凭证:从环境变量读取并放入 Authorization 头(仅 AI 音乐支路)
package兄弟 skill javascript-animation 的 render.mjs(离线渲染 SCORE 为 WAV 并 mux 进 MP4)
networkWeb Audio API(浏览器内置,用于合成与离线渲染;非外部服务)

4推奨統制措置と判定根拠

安全運用のための推奨統制措置
Agent 向け
段階的・都度認可、サンドボックス推奨
管理者向け
承認フロー、ロールバック可能、全履歴監査
判定根拠(ファイルパスと抜粋)
  • scripts/: ローカルスクリプトまたはコマンドの実行: node scripts/sync-check.mjs piece.mp4 [--cues-file piece.cues.json] [--tol
  • 网络端点: 外部ネットワークアクセスの宣言: https://openrouter.ai/api/v1/chat/completions —— AI 音楽ブランチのみ(ユーザーから明確に要求された場合)、Authori
  • 本地工作目录: ファイルの読み書きと成果物の出力: 素材および中間生成物:bgm.mp3(curl ストリーミング音声をディスク保存)、piece_music.mp4(ffmpeg によるミックス出力)
監査ノート: 判定対象=スキル自身のディレクトリ。オレンジ区分をトリガーしているのは、ディレクトリ内の references/ai-music.md である:① 認証情報/環境変数の読み取り——コマンドが環境から直接 `$OPENROUTER_API_KEY` を取得し、`Authorization: Bearer` ヘッダーに設定している(標準パターンにおける home-assistant の $HASS_TOKEN 読み取りと同等);② ユーザー素材の外部生成/サービスバックエンドへの送信——https://openrouter.ai/api/v1/chat/completions(modalities:[audio]、stream:true)へ POST し、音楽プロンプトをサードパーティ製モデルに渡して音声を生成、返却された base64 を直接ディスク上の bgm.mp3 として保存した上で本編動画にミックスしており、アカウント枠の消費および生成物の保存が発生する。トリガー条件は明確:合成曲以上のリッチな音楽をユーザーが求めた場合にのみこのブランチへ進む(SKILL.md 内では「Other sources (only when asked)」として分類;デフォルトパスはキー不要・エンドポイント不要のページ内コード合成)。このブランチを除けば、すべての動作はローカル完結である:テンプレートは Web Audio 合成コードであり、sync-check.mjs はローカルファイルを調べるために ffprobe/ffmpeg を呼び出してレポートを出力するのみである。サンドボックスの意図的なダウングレード、TLS 回避、自動検出のバイパス、任意コード実行の余地はいずれも存在しないためレッド区分には該当しない。また、デフォルトのパス自体にはイエロー区分を超えるネットワーク挙動は含まれていない。

5二重目の独立検証

  • [ok] $OPENROUTER_API_KEY 是否真的被读取并外发(橙档判定关键) — references/ai-music.md 原文给出 `curl -s -N https://openrouter.ai/api/v1/chat/completions -H "Authorization: Bearer $OPENROUTER_API_KEY" …`,且开头写明 'Needs an API key.';端点与凭证同处一条可复制命令,调用点真实存在。
  • [ok] 该支路是否真的是「可选、非默认」(避免过度判级) — SKILL.md 正文写 'Don't ask the user to choose a music source up front.',并把 AI 音乐放在 '## Other sources (only when asked)' 段下;默认段标题为 '## Default: synthesize it in the page (no key, no files)'。触发条件为用户显式要求。
  • [ok] sync-check 的判据是否与文档一致(能力声明可信度) — 代码内 TOL = Number(opt('--tol', 100)) / 1000 对应 ±100ms;`const jump = 20 * Math.log10(rms(v.t, v.t + .3) / ref), startle = jump > 6;` 对应 +6 dB;无音轨时 console.error 并 process.exit(1);与 SKILL.md 逐条吻合,无夸大。
  • [ok] 模板是否真的与画面共享数据(而非各自维护时间) — groove.js 头注释给出 schema(sections/events/kit/harmony/key)并写 'The picture reads the same BPM / SECTIONS / EVENTS, so sound and image can't drift apart.';score.js 同样由 cues(即 window.CUES)切段并做小节取整。声明与实现一致。
  • [ok] 是否有比橙更高的行为(红档特征) — 全仓扫描 `sandbox|automationcontrolled|no-verify|stealth|bypass|ignoreHTTPSErrors|dangerously` 零命中;curl 未使用 -k/--insecure,无绕防护动作,无任意代码执行面(模板是页面内 Web Audio 代码)。
  • [ok] 确定性声明(每次渲染一致)是否可在模板代码内定位 — score.js 的混响脉冲用固定种子 LCG 生成并注释 'deterministic noise tail (seeded, so every render is identical)';groove.js 同样用 `let s = 99 + c` 起手的 LCG 与固定种子噪声缓冲。声明属实。

6結論

  • 「BGMが合っているか」を測定データに裏付けられた客観的な失敗基準(±100 ms の位置合わせ、+6 dB の驚愕閾値)へと変換
  • 構造的な音声・映像の同源性:映像と音楽が同一の BPM/SECTIONS/EVENTS を参照するため、カットが自然に強拍へ着地
  • デフォルトルートは完全キー不要・外部素材不要かつ決定論的(シード付きリバーブ/ノイズ)であり、ページ単体で配布可能
  • 数値的な教訓として定着したミキシングの知見(レイヤー追加時の音量 +11 dB vs +3.5 dB、カット拍への追加アクセント禁止、ブレイクの活用など)
  • 対応能力の境界を誠実に宣言し、不向きなジャンルは AI 音楽や既存楽曲へと適切に誘導
  • 非自作音楽を扱う際にも「映像を音楽に合わせる」低コストなイテレーションループを提供
  • 最適な用途: コード生成されたショートアニメーションのスコアリング(デフォルトはキー不要、素材不要、決定論的に再現可能)、カットが拍に乗っていて急変がないことを求める完成品チェック、オルゴール/パッド/撥弦/軽打楽器テイストの作品に最適。「AI 音楽やユーザー持ち込み楽曲」を同じ同期チェック&映像位置合わせループに組み込む用途にも適している(OpenRouter キーの自前準備が必要)。出力はページ内スコアコード、および render.mjs でレンダリングされた WAV/MP4。
    不向きな用途: 不向きな用途:① リアルなボーカル、オーケストラ、完成されたジャンル音楽水準が求められるスコアリング(ドキュメント内に明示的な境界あり);② 認証情報の読み取りや素材の外部送信が一切許可されない環境(ai-music.md ブランチを完全に避けるべき);③ ffmpeg/ffprobe が存在しない環境(検証と mux の双方がこれらに依存);④ window.CUES や SCORE を持たない映像(スクリプトは判定を下さず「音声ストリームがなく検証不能」としてエラー終了);⑤ スクリプトに聴覚的な判断の完全代替を期待するワークフロー(閾値はあくまで最低限のセーフティネット)。
    Install Agent-Ready
    ① Verified Mirror 2026-09-28
    Option A · Direct DownloadDownload soundtrack.tar.gz
    sha256: 7cd2fd4b7c5af0a2…
    Option B · Copy Guide for Agent
    install.json
    Agent はこの JSON ガイドから自動的にダウンロードして検証します。
    ② Upstream GitHub
    GitHub Repo ↗
    Pinned to commit deb46e0eff.