Communitygithub.com

syahdestiny/soundtrack

Esta habilidade deve ser usada quando o usuário pedir para "adicionar música à animação", "fazer a música em código", "sintetizar uma trilha sonora", "compor música de fundo que se encaixe nos cortes", "sincronizar a música com o vídeo", "verificar se o áudio está alinhado com a imagem" ou "a música é muito repentina / abrupta". Abrange uma trilha sonora sintetizada em código que vive dentro da página de animação (Web Audio API, renderizada offline para WAV), música gerada por IA ou fornecida pelo usuário, e uma verificação automática de que os cortes caem na batida sem um salto repentino no volume.

O que é soundtrack?

O skill `soundtrack` permite que agentes de IA componham trilhas sonoras originais para animações diretamente em código usando a Web Audio API, sem depender de bibliotecas de música pré-existentes. Ele é executado dentro de uma página de animação (por exemplo, do skill `javascript-animation`) e fornece um sistema completo: desde a escrita de partituras em JavaScript (no objeto `window.SCORE`) até a renderização offline em WAV e a multiplexação no vídeo MP4 final. O ponto central é a sincronização automática entre música e cortes visuais: cada cena recebe um número inteiro de compassos, garantindo que as transições ocorram nas batidas fortes. O skill também inclui um verificador (`sync-check`) que detecta cortes fora do ritmo ou saltos repentinos de volume (startles), ajudando a evitar sustos ou edições bruscas. Além da síntese em código, o skill suporta música gerada por IA ou faixas fornecidas pelo usuário, ajustando o vídeo para seguir a batida da música nesses casos. Seu design é modular, com templates prontos (`groove.js` e `score.js`) e um sistema de cues que permite marcar pontos específicos para verificação. O skill é ideal para animações curtas onde a música precisa estar perfeitamente alinhada com a imagem, evitando problemas comuns como picos de volume ou cortes em momentos inadequados.

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

Perguntar na sua IA favorita

Abre um novo chat com esta habilidade de agente já pré-carregada.

Documentação

Trilha Sonora

Escreva o som para este filme

O som de um filme é escrito para aquele filme: seus próprios instrumentos, ritmo e harmonia em Web Audio, a partir do nada, em window.SCORE = ac => { … } (osciladores, ruídos, filtros, envelopes, delays: o que a peça pedir). Bateria, um groove ou uma base de caixinha de música são escritos da mesma forma, para este filme: nenhum filme deve soar igual porque compartilha um modelo. templates/groove.js e templates/score.js são duas partituras prontas, usadas apenas quando o usuário as solicita; cada arquivo documenta suas opções.

render.mjs (do skill javascript-animation) renderiza window.SCORE offline com OfflineAudioContext, escreve <out>.wav e o multiplexa no MP4; a pré-visualização ao vivo da página reproduz a mesma partitura quando clicada.

Não peça ao usuário para escolher uma fonte de música antecipadamente. Na entrega, mencione em uma linha que música gerada por IA ou uma faixa própria também funcionam.

Como a música segue a imagem

  • Mapa de tempo. Cada cena recebe um número inteiro de compassos (o tempo pode variar por cena), para que cada corte caia num tempo forte.
  • Marque os cortes com harmonia, não com volume. Cada cena caminha para casa na dominante e o corte chega na tônica. Um acento alto num corte (grave + sineta brilhante ao mesmo tempo) é lido como um susto: usuários sinalizaram um salto de +7 a +10 dB como assustador; +3 a +5 dB com uma mudança de acorde é lido como uma edição limpa.
  • Não afine o compasso de abertura se ele for o único compasso antes do primeiro corte; uma introdução esparsa seguida pela textura completa é em si um susto.
  • Sem acento extra no tempo forte do corte. Mesmo o acento normal do tempo forte (grave mais forte + primeira nota) elevou peças curtas acima de +6 dB, porque o compasso anterior está em decaimento. A mudança de acorde é suficiente.
  • Cortes bruscos dentro de uma cena contam. Coloque-os em window.CUES também, para que recebam o mesmo tempo forte.
  • Dê ao olho algo para se agarrar. Música legato sem percussão não tem acentos para os cortes se fixarem. Com um groove constante, os acentos fazem parte do ritmo e não assustam (a verificação compara com os últimos segundos, não com um momento isolado de silêncio).
  • Traga as camadas uma ou duas por compasso. Bumbo e baixo entrando juntos após uma introdução silenciosa marcaram +11 dB (susto); escalonados por um compasso, +3,5 dB.
  • Use uma pausa. Cortar tudo para silêncio por um compasso antes da recompensa é a batida mais forte num curta. sync-check aceita um corte para o silêncio como na batida.

Outras fontes (apenas quando solicitado)

  • Música gerada por IA (ex.: Lyria via OpenRouter): veja references/ai-music.md.
  • Faixa própria do usuário: multiplexe-a com ffmpeg.

Com música que você não controla, inverta a direção: a imagem segue a música. Renderize, multiplexe, execute a verificação, depois mova os limites da cena na tabela SCENES da página pelos deslocamentos reportados e re-renderize. Isso é barato porque cada função de cena recebe o tempo local (0 no seu próprio início), conforme a partitura é escrita: mover um limite nunca toca no código da cena.

Sempre: verifique

node scripts/sync-check.mjs piece.mp4 --cues-file piece.cues.json   # verifique os CUES declarados (preferido)
node scripts/sync-check.mjs piece.mp4                       # fallback: detecta cortes na imagem (movimentos rápidos de câmera podem ser lidos como cortes)

Para cada evento, ele imprime o deslocamento para o início de áudio forte mais próximo e o salto de volume ao entrar. Ele falha em OFF-BEAT (mais de ±100 ms, ~3 quadros) ou STARTLE (mais de +6 dB em relação ao segundo anterior). O primeiro segundo e o fade final são ignorados (não há "antes" para comparar; um fade-out não é um corte). "Forte" significa proeminente entre os inícios dentro de ±2 s, para que acentos em passagens silenciosas ainda contem; um corte para o silêncio conta como acerto; música retornando após uma pausa é comparada com o nível típico dos últimos 4 s. Um vídeo sem faixa de áudio é reportado como tal. Coloque em window.CUES cada corte mais qualquer batida dentro da cena que você queira verificar (um corte brusco dentro de um plano, o impacto de uma piada). Corrija e execute novamente até passar, ou até que todo STARTLE restante seja um stinger deliberado que você possa nomear (um impacto de comédia deve saltar; um corte de canção de ninar não).

Limitações

Sintetizado em código: caixinha de música, plucks parecidos com piano, pads, sinos, percussão suave são adequados. Vozes realistas, orquestras e produção de gênero não são; use música de IA ou uma faixa real para esses casos.

Individual skills in this repo

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

Habilidades Relacionadas