Communitygithub.com

syahdestiny/soundtrack

Esta habilidad se utiliza cuando el usuario solicita 'añadir música a la animación', 'hacer la música en código', 'sintetizar una banda sonora', 'componer música de fondo que se ajuste a los cortes', 'sincronizar la música con el vídeo', 'comprobar si el audio está alineado con la imagen' o 'la música es demasiado repentina / alarmante'. Cubre una partitura sintetizada en código que reside dentro de la página de animación (Web Audio API, renderizada offline a WAV), música generada por IA o proporcionada por el usuario, y una verificación automática de que los cortes caen en el tiempo fuerte sin un salto brusco de volumen.

¿Qué es soundtrack?

Esta skill permite componer una banda sonora personalizada para animaciones web, generada completamente desde código mediante la Web Audio API, renderizada offline a WAV y multiplexada al MP4. Incluye plantillas listas para usar (groove y score) y un sistema de verificación automática (sync-check) que garantiza que cada corte de escena caiga en un tiempo fuerte y que no haya saltos de volumen bruscos (más de +6 dB). Soporta también música generada por IA (vía OpenRouter) o pistas propias del usuario, adaptando la edición de escenas a la música en esos casos. Útil para desarrolladores que quieran integrar música dinámica y ajustada a la animación sin depender de DAWs ni librerías preexistentes, manteniendo un control fino sobre la sincronización y la mezcla.

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

Preguntar en tu IA favorita

Abre un nuevo chat con esta habilidad de agente ya precargada.

Documentación

Banda Sonora

Escribe el sonido para esta película

El sonido de una película se escribe para esa película: sus propios instrumentos, ritmo y armonía en Web Audio, desde cero, en window.SCORE = ac => { … } (osciladores, ruido, filtros, envolventes, retardos: lo que la pieza requiera). La batería, un groove o una base de caja de música se escriben de la misma manera, para esta película: no hay dos películas que suenen igual porque comparten una plantilla. templates/groove.js y templates/score.js son dos partituras listas para usar, utilizadas solo cuando el usuario las solicita; cada archivo documenta sus opciones.

render.mjs (de la skill javascript-animation) renderiza window.SCORE offline con OfflineAudioContext, escribe <out>.wav y lo multiplexa en el MP4; la vista previa en vivo de la página reproduce la misma partitura al hacer clic.

No le pidas al usuario que elija una fuente de música de antemano. Al entregar, menciona en una línea que la música generada por IA o su propia pista también funcionan.

Cómo la música sigue la imagen

  • Mapa de tempo. Cada escena obtiene un número entero de compases (el tempo puede flexibilizarse por escena), de modo que cada corte caiga en un tiempo fuerte.
  • Marca los cortes con armonía, no con volumen. Cada escena camina hacia la dominante y el corte llega en la tónica. Un acento fuerte en un corte (bajo + campana brillante a la vez) se lee como un sobresalto: los usuarios marcaron un salto de +7 a +10 dB como alarmante; +3 a +5 dB con un cambio de acorde se lee como un corte limpio.
  • No reduzcas el compás de apertura si es el único compás antes del primer corte; una intro dispersa seguida de la textura completa es en sí misma un sobresalto.
  • Sin acento adicional en el tiempo fuerte del corte. Incluso el acento normal del tiempo fuerte (bajo más fuerte + primera nota) hizo que piezas cortas superaran +6 dB, porque el compás anterior está decayendo. El cambio de acorde es suficiente.
  • Los cortes duros dentro de una escena cuentan. Ponlos también en window.CUES, para que reciban el mismo tiempo fuerte.
  • Dale al ojo algo a lo que aferrarse. La música legato sin percusión no tiene acentos para que los cortes aterricen. Con un groove constante, los acentos son parte del ritmo y no sobresaltan (la comprobación compara con los últimos segundos, no con un momento aislado de silencio).
  • Introduce las capas una o dos por compás. El bombo y el bajo entrando juntos después de una intro tranquila midieron +11 dB (sobresalto); escalonados por un compás, +3.5 dB.
  • Usa un descanso. Cortar todo al silencio durante un compás antes del clímax es el tiempo más fuerte en un corto. sync-check acepta un corte en silencio como dentro del tiempo.

Otras fuentes (solo cuando se pidan)

  • Música generada por IA (ej. Lyria vía OpenRouter): consulta references/ai-music.md.
  • La propia pista del usuario: multiplexarla con ffmpeg.

Con música que no controlas, invierte la dirección: la imagen sigue a la música. Renderiza, multiplexa, ejecuta la comprobación, luego mueve los límites de las escenas en la tabla SCENES de la página según los desplazamientos informados y renderiza de nuevo. Esto es económico porque cada función de escena recibe tiempo local (0 en su propio inicio), como está escrito el iniciador: mover un límite nunca toca el código de la escena.

Siempre: compruébalo

node scripts/sync-check.mjs piece.mp4 --cues-file piece.cues.json   # comprueba las CUES declaradas (preferido)
node scripts/sync-check.mjs piece.mp4                       # fallback: detecta cortes en la imagen (movimientos rápidos de cámara pueden leerse como cortes)

Para cada evento imprime el desplazamiento al inicio de audio fuerte más cercano y el salto de volumen al entrar. Falla en FUERA DE TIEMPO (más de ±100 ms, ~3 fotogramas) o SOBRESALTO (más de +6 dB frente al segundo anterior). El primer segundo y el fundido final se omiten (no hay un 'antes' con el que comparar; un fundido de salida no es un corte). 'Fuerte' significa prominente entre los inicios dentro de ±2 s, por lo que los acentos en pasajes silenciosos aún cuentan; un corte en silencio cuenta como aterrizaje; la música que regresa tras un descanso se compara con el nivel típico de los últimos 4 s. Un vídeo sin flujo de audio se informa como tal. Pon en window.CUES cada corte más cualquier golpe dentro de la escena que quieras comprobar (un corte duro dentro de un plano, el impacto de un gag). Corrige y vuelve a ejecutar hasta que pase, o hasta que cada SOBRESALTO restante sea un stinger deliberado que puedas nombrar (un impacto de comedia está destinado a sobresalir; un corte de canción de cuna no).

Límites

Sintetizado en código: caja de música, pulsos parecidos a piano, pads, campanas, percusión suave están bien. Voces realistas, orquestas y producción de género no; usa música IA o una pista real para esos casos.

Individual skills in this repo

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

Skills relacionados