К основному содержанию
скилл CX Codex

soundtrack — скилл для Claude Code: музыка для анимации

Пишет партитуру к анимации прямо в коде на Web Audio, рендерит её в WAV и проверяет, что монтажные склейки попадают в долю без резкого скачка громкости.

Установить в Claude Code · Через Skills CLI (Vercel) Все способы и платформы ↓
npx skills add iart-ai/javascript-animation-skills --skill soundtrack -a claude-code
Открыть на GitHub

Что делает soundtrack

Скилл сочиняет звук под конкретный фильм: осцилляторы, шум, фильтры, огибающие и задержки в window.SCORE = ac => { … }. Никаких общих шаблонов — барабаны, грув или музыкальная шкатулка пишутся заново под каждый ролик. Готовые партитуры templates/groove.js и templates/score.js берутся только по прямой просьбе.

Рендер делает render.mjs из скилла javascript-animation: он прогоняет window.SCORE через OfflineAudioContext, пишет <out>.wav и подмешивает дорожку в MP4. Живой предпросмотр на странице играет ту же партитуру по клику. Музыка следует за картинкой через темповую карту: у каждой сцены целое число тактов, поэтому склейка попадает на сильную долю. Громкостью склейки не подчёркивают — акцент на монтаже читается как испуг, и хватает смены аккорда.

Проверка обязательна: node scripts/sync-check.mjs piece.mp4 --cues-file piece.cues.json сверяет объявленные window.CUES, а без файла ищет склейки по картинке. Скилл падает на OFF-BEAT (больше ±100 мс) и STARTLE (больше +6 дБ к предыдущей секунде). Если музыка чужая, направление обратное: сначала рендер и проверка, потом границы сцен в таблице SCENES сдвигаются на показанные смещения. Это дёшево, потому что функция сцены получает локальное время. Синтезом в коде не сделать реалистичный вокал, оркестр и жанровую продакшн-обработку — для них берите ИИ-музыку или готовый трек.

Какие задачи решает

  • написать партитуру к анимации с нуля в коде
  • свести склейки с сильной долей без скачка громкости
  • отрендерить window.SCORE в WAV и подмешать в MP4
  • проверить, совпадает ли звук с картинкой, и получить смещения
  • подогнать границы сцен под уже готовый трек

Примеры запросов агенту

  • добавь музыку к анимации, партитуру напиши в коде
  • проверь, попадают ли склейки в долю: node scripts/sync-check.mjs piece.mp4 --cues-file piece.cues.json
  • музыка на склейке слишком резкая, переделай переход

Как установить soundtrack

1Через Skills CLI (Vercel)

npx skills add iart-ai/javascript-animation-skills --skill soundtrack -a claude-code

2Вручную: положить файлы

~/.claude/skills/soundtrack/SKILL.md

Папка скилла целиком; для одного проекта — .claude/skills/soundtrack/

По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов

Вопросы о soundtrack

Как установить soundtrack в Claude?

Выполните npx skills add iart-ai/javascript-animation-skills --skill soundtrack -a claude-code. Скилл встанет в ~/.claude/skills/soundtrack/SKILL.md.

Что делает soundtrack?

Сочиняет музыку к анимации кодом на Web Audio, рендерит её офлайн в WAV и подмешивает в MP4. Отдельно проверяет, что склейки ложатся на сильную долю и не пугают скачком громкости.

Какая музыка не получится при синтезе в коде?

Реалистичный вокал, оркестр и жанровая продакшн-обработка. Для них скилл предлагает ИИ-музыку или ваш собственный трек.

Исходный текст

SKILL.md · MIT
---
name: soundtrack
description: This skill should be used when the user asks to "add music to the animation", "make the music in code", "synthesize a soundtrack", "compose background music that fits the cuts", "sync the music to the video", "check if the audio lines up with the picture", or "the music is too sudden / startling". Covers a code-synthesized score that lives inside the animation page (Web Audio API, rendered offline to WAV), AI-generated or user-supplied music, and an automatic check that cuts land on the beat without a startling jump in loudness.
version: 0.4.1
---

# Soundtrack

## Write the sound for this film

A film's sound is written for that film: its own instruments, rhythm and harmony in Web Audio, from nothing, in `window.SCORE = ac => { … }` (oscillators, noise, filters, envelopes, delays: whatever the piece calls for). Drums, a groove or a music-box bed are written the same way, for this film: no two films should sound alike because they share a template. `templates/groove.js` and `templates/score.js` are two ready-made scores, used only when the user asks for them; each file documents its options.

`render.mjs` (from the `javascript-animation` skill) renders `window.SCORE` offline with `OfflineAudioContext`, writes `<out>.wav` and muxes it into the MP4; the page's live preview plays the same score when clicked.

Don't ask the user to choose a music source up front. At delivery, mention in one line that AI-generated music or their own track also work.

## How the music follows the picture

- **Tempo map.** Each scene gets a whole number of bars (the tempo may flex per scene), so every cut lands on a downbeat.
- **Mark cuts with harmony, not volume.** Each scene walks home to the dominant and the cut arrives on the tonic. 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.
- **Don't thin the opening bar if it's the only bar before the first cut**; a sparse intro followed by the full texture is itself a startle.
- **No extra accent on the cut's downbeat.** Even the normal downbeat accent (louder bass + first note) tipped short pieces over +6 dB, because the bar before is decaying. The chord change is enough.
- **Hard cuts inside a scene count.** Put them in `window.CUES` too, so they get the same downbeat.
- **Give the eye something to lock onto.** Legato music with no percussion has no accents for cuts to land on. With a steady groove, accents are part of the rhythm and don't startle (the check compares against the last few seconds, not an isolated quiet moment).
- **Bring layers in one or two per bar.** Kick and bass entering together after a quiet intro measured +11 dB (startle); staggered by a bar, +3.5 dB.
- **Use a break.** Cutting everything to silence for a bar before the payoff is the strongest beat in a short. `sync-check` accepts a cut into silence as on the beat.

## Other sources (only when asked)

- **AI-generated music** (e.g. Lyria via OpenRouter): see `references/ai-music.md`.
- **The user's own track**: mux it with ffmpeg.

With music you don't control, reverse the direction: **the picture follows the music.** Render, mux, run the check, then move the scene boundaries in the page's `SCENES` table by the reported offsets and re-render. This is cheap because each scene function receives local time (0 at its own start), as the starter is written: moving a boundary never touches scene code.

## Always: check it

```bash
node scripts/sync-check.mjs piece.mp4 --cues-file piece.cues.json   # check the declared CUES (preferred)
node scripts/sync-check.mjs piece.mp4                       # fallback: detect cuts in the picture (fast camera moves can read as cuts)
```

For each event it prints the offset to the nearest strong audio onset and the loudness jump into it. 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). "Strong" means prominent among the onsets within ±2 s, so accents in quiet passages still count; a cut into silence counts as landing; music returning after a break is compared with the typical level of the last 4 s. A video with no audio stream is reported as such. Put in `window.CUES` every cut plus any in-scene hit you want checked (a hard cut inside a shot, a gag's impact). Fix and re-run until it passes, or until every remaining STARTLE is a deliberate stinger you can name (a comedy impact is meant to jump out; a lullaby cut is not).

## Limits

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.

© iart-ai · MIT · iart-ai/javascript-animation-skills

Похожие скиллы

Всё по теме «Фронтенд и UI» →
motion-graphics Liamrjohnston Проверяет подлинность ассетов и блокирует генерацию моушн-графики до прохождения проверок через promptible-gate.mjs. Помогает собирать ролики для соцсетей. CX Codex +1 1 000установок ffmpeg digitalsamba Готовые команды FFmpeg для конвертации, сжатия, обрезки видео и подготовки ассетов к проектам на Remotion. CX Codex +1 11 700установок manim-video affaan-m Собирает технические объясняющие ролики в Manim: графики, схемы систем и продуктовые walkthrough. Подходит, когда нужна точная анимация вместо talking-head сценария. CX Codex +1 4 700установок cinetic Leonxlnx Скилл для съёмки коротких промо-роликов кодом: раскадровка, тайминг, звук и рендер в Remotion или HyperFrames. CX Codex +1 1 000установок Video Processor disler Скилл для обработки видео прямо из агента: вытащить аудио, сменить формат на mp4 или webm, расшифровать речь через Whisper. Пригодится, когда в проекте появляются видеофайлы. CX Codex +1 ★ 1 554звёзд репо threejs-audio-generator majidmanzarpour Скилл генерирует через ElevenLabs звуки, музыку и озвучку для игр на Three.js и встраивает их в проект через Web Audio. CX Codex +1 2 900установок

Из того же набора2

Спонсоры проекта

Компании, которые помогают держать аналитику открытой