Communitygithub.com

Sincronización de Sonido y Música

Ponle banda sonora a un vídeo como un editor: sincroniza cortes con la música, coloca efectos de sonido en las transiciones, dale ritmo a la voz en off para que respire, busca pistas libres de regalías de forma segura y baja la música para que la voz se escuche claramente por encima.

¿Qué es Sincronización de Sonido y Música?

Esta habilidad te permite actuar como el editor de audio de un proyecto de vídeo. Toma decisiones creativas sobre dónde colocar los cortes, qué efectos de sonido usar, cómo debe sonar la voz en off y cómo mezclar la música para que no opaque el diálogo. Luego, genera los números concretos (fotogramas de beats, marcas de tiempo de SFX, niveles de ducking) para que herramientas como 'remotion-compose' y 'remotion-render' los usen en la línea de tiempo. Es útil cuando se te pide sincronizar cortes con el ritmo, solucionar problemas de mezcla, añadir efectos de sonido o buscar música libre de regalías. No debes usarla para escribir directamente código JSX de audio o invocar renderizadores; esa es la parte de implementación técnica que queda fuera de su alcance. Tampoco es apropiada para decidir el orden de las escenas o el aspecto visual, que son competencia de otras habilidades. En resumen, es el 'cerebro' creativo del audio que alimenta a los 'músculos' técnicos de Remotion.

Compatible con~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/SkillMedev/tutorial-video-studio/tree/main/skills/sound-and-music-sync

Preguntar en tu IA favorita

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

Documentación

¿Qué hace Sincronización de Sonido y Música?

El sonido es la mitad del vídeo y la mitad que la gente olvida. Una animación mediocre cortada al ritmo con una voz en off limpia parece profesional; una animación preciosa con cortes que flotan y una voz enterrada bajo la música parece amateur. Esta es la capa de gusto auditivo. Tú decides dónde caen los cortes, dónde los efectos de sonido puntúan, cómo respira la voz en off y cómo se asienta la mezcla. Luego, entregas los números concretos (fotogramas de beats, marcas de tiempo de SFX, niveles de ducking) a remotion-compose para que los conecte en la línea de tiempo y a remotion-render para que exporte. No escribes el JSX de <Audio> ni ejecutas el renderizador; tomas las decisiones creativas que los alimentan.

Esto se combina con el resto del paquete motion-video-direction: una lista de escenas de video-storyboard y las decisiones de temporización de motion-design-principles son tu entrada: puntúas sobre beats que ya existen. Si el texto se anima con el audio, sincronízalo con kinetic-typography; si el ritmo de corte guía un recorrido de producto, coordina con product-demo-director; si estás montando una versión vertical/para redes sociales, vuelve a derivar los beats por plataforma con social-video-formatter. La mezcla de audio es su propia capa: deja el aspecto visual (etalonaje, iluminación, contraste) para motion-color-and-light y puntúa sobre lo que sea que etalone.

Flujo de trabajo

Ejecuta en orden. No empieces a colocar SFX antes de que los cortes estén bloqueados al beat, y no finalices la mezcla antes de que la temporización de la VO sea correcta: cada paso depende del anterior.

  1. Elige la pista y fija el tempo. Escoge música que coincida con la energía y duración del vídeo, confirma su licencia (consulta referencias/búsqueda-libre-regalias), y obtén su BPM. La mayoría de las bibliotecas libres de regalías listan el BPM; si no, tantea el ritmo o usa un detector. El BPM es la columna vertebral de todo lo que sigue: un beat dura 60 / BPM segundos, y a los fps del proyecto son fps * 60 / BPM fotogramas.

  2. Construye la rejilla de beats y ajusta los cortes a ella. Convierte los beats a números de fotograma y coloca cada corte duro y cada cambio de escena importante en un beat (ejecuta beat_grid.js más abajo). Corta en el downbeat - beats 1, 5, 9 en compás de 4/4 - para dar énfasis; corta en cualquier beat para transiciones rutinarias. Un corte que cae dos o tres fotogramas fuera del beat se percibe como "incorrecto" incluso para espectadores que no pueden nombrar por qué. Entrega la lista de fotogramas ajustados a remotion-compose como los límites de <Sequence from={...}>.

  3. Coloca los efectos de sonido en las transiciones, no sobre ellas. Los SFX existen para hacer que el movimiento se sienta físico. La regla: el sonido alcanza su pico en el instante en que el movimiento alcanza su pico. Un whoosh conduce a un barrido (empieza ~3-5 fotogramas antes del corte para que su cola caiga en el corte); un impacto/golpe cae en el fotograma en que una tarjeta entra con fuerza; un clic/pop cae en el fotograma en que aparece un elemento de la interfaz; un riser se construye a través de los 10-20 fotogramas antes de una revelación y se resuelve en ella. Un SFX por transición: apilarlos convierte la puntuación en ruido. Consulta referencias/colocacion-sfx.

  4. Dale ritmo a la voz en off para que respire. La VO marca el ritmo real del vídeo; los visuales la sirven a ella, no al revés. Apunta a unas ~150 palabras por minuto conversacionales (≈2.5 palabras/segundo): más rápido suena apresurado, más lento suena como un vídeo de rehén. Deja un beat de silencio (8-15 fotogramas) antes de una línea clave y después del CTA. Escribe para el oído: frases cortas, una idea cada una, contracciones. Nunca dejes que un corte de escena ocurra a mitad de palabra: alinea los límites de la escena con los espacios entre oraciones. Temporiza la VO primero, luego estira o comprime las duraciones de las escenas para que encajen (esto se convierte en el durationInFrames que usa remotion-compose).

  5. Mezcla: baja la música para que la VO se asiente encima. Este es el fallo de audio más común. La música y la VO a todo volumen compiten en el mismo rango de frecuencias y las palabras se pierden. Baja la música a aproximadamente el 25-35% de su nivel cada vez que la VO esté hablando, luego súbela de nuevo en los espacios. Ejecuta mix_levels.js para obtener niveles concretos y números de temporización. Apunta a la VO alrededor de -3 a -6 dB (clara, nunca recortando), y la música bajada alrededor de -18 a -22 dB. Entrega la envolvente de ducking (qué fotogramas bajar, el nivel mínimo) a remotion-compose, que la aplica mediante callbacks de volume por cada <Audio>.

  6. Verifica la exportación. Después de que remotion-render produzca el MP4, escúchalo en altavoces de portátil y en altavoces de teléfono, no solo en buenos auriculares: la mayoría de los espectadores usan altavoces malos. Confirma: cada palabra de la VO es inteligible sobre la música, ningún SFX recorta o sobresalta, los cortes se sienten bloqueados al beat, y el momento más fuerte no distorsiona. Si se pierde una palabra, baja más en ese tramo; si un SFX sobresalta, bájalo 6 dB.

Nivel de calidad

El audio es A+ solo cuando se cumplen todos estos requisitos:

  • Cada corte duro cae en un fotograma de beat de la rejilla: ninguno flota entre beats.
  • Cada SFX de transición alcanza su pico en el fotograma exacto en que su movimiento alcanza el pico; los risers se resuelven en la revelación, no antes ni después.
  • La VO se ejecuta a ~140-160 ppm con silencio deliberado antes de las líneas clave y después del CTA; ningún corte de escena ocurre a mitad de palabra.
  • La VO es completamente inteligible sobre la música en altavoces de teléfono, verificado, no asumido, porque la música baja a ~30% durante el habla.
  • Exactamente un SFX por transición; la pista se repite o termina limpiamente sin un corte abrupto en el fotograma final.
  • La licencia de cada activo de audio permite el uso previsto (comercial / anuncios pagados / trabajo de cliente) y se registran los requisitos de atribución.

NO hacer

  • No dejes cortes flotando fuera del beat para preservar la duración "natural" de una escena: estira o recorta la escena al beat más cercano.
  • No pongas música a todo volumen debajo de la voz en off; la música sin ducking es la razón por la que la VO suena embarrada. Bájala cada vez que alguien hable.
  • No apiles múltiples SFX en una sola transición, ni reutilices el mismo whoosh en cada corte: varíalos o el oído dejará de oírlos.
  • No escribas el JSX de <Audio>, establezcas callbacks de startFrom/volume, ni invoques el renderizador aquí: produce los números y entrégalos a remotion-compose / remotion-render.
  • No extraigas pistas de descargas de YouTube, sitios "gratuitos" sin licencia declarada o de Spotify de un cliente: el uso comercial necesita una fuente real libre de regalías o con licencia.
  • No normalices toda la mezcla para que sea lo más fuerte posible: deja margen para que el impacto más fuerte no recorte.
  • No dejes que la VO se acelere para ajustarse a una duración fija: vuelve a montar los visuales para la VO, no la VO para los visuales.

Calculadora: rejilla de beats

Script de Node autocontenido. Guárdalo como beat_grid.js y ejecuta con node beat_grid.js. Convierte un BPM y unos fps en los números de fotograma exactos donde deben caer tus cortes, y marca los downbeats. Sin dependencias. Entrega los fotogramas impresos a remotion-compose como límites de <Sequence from={...}>.

// Rejilla de beats. Edita las entradas, luego: node beat_grid.js
const input = {
  bpm: 120,            // tempo de la pista elegida
  fps: 30,             // frecuencia de fotogramas del proyecto
  durationSeconds: 12, // duración del vídeo
  beatsPerBar: 4,      // compás de 4/4; el downbeat es cada 4º beat
}

const framesPerBeat = (input.fps * 60) / input.bpm
const totalFrames = Math.round(input.durationSeconds * input.fps)
const beats = []
for (let b = 0; ; b++) {
  const frame = Math.round(b * framesPerBeat)
  if (frame > totalFrames) break
  beats.push({ beat: b + 1, frame, downbeat: b % input.beatsPerBar === 0 })
}

console.log('Fotogramas por beat:', framesPerBeat.toFixed(2), '(' + (60 / input.bpm).toFixed(3) + 's cada uno)')
console.log('Cortar en estos fotogramas (* = downbeat, mejor para cortes duros):')
for (const b of beats) {
  console.log('  beat ' + String(b.beat).padStart(2), '-> fotograma', String(b.frame).padStart(4), b.downbeat ? '*' : '')
}
console.log('Solo fotogramas downbeat:', beats.filter((b) => b.downbeat).map((b) => b.frame).join(', '))

Ejemplo de salida

Con las entradas anteriores el script imprime:

Fotogramas por beat: 15.00 (0.500s cada uno)
Cortar en estos fotogramas (* = downbeat, mejor para cortes duros):
  beat  1 -> fotograma    0 *
  beat  2 -> fotograma   15 
  beat  3 -> fotograma   30 
  beat  4 -> fotograma   45 
  beat  5 -> fotograma   60 *
  beat  6 -> fotograma   75 
  beat  7 -> fotograma   90 
  beat  8 -> fotograma  105 
  beat  9 -> fotograma  120 *
  ...
Solo fotogramas downbeat: 0, 60, 120, 180, 240, 300, 360

Léelo: a 120 BPM y 30 fps un beat son exactamente 15 fotogramas. Pon las transiciones rutinarias en cualquier fotograma listado y tus cortes más duros (el corte de introducción al contenido, la revelación del CTA) en un downbeat (0, 60, 120…). Si una escena quiere durar 70 fotogramas, ajústala a 75 (beat 6) en lugar de dejar el corte flotando en 70. Esos números ajustados son exactamente lo que remotion-compose coloca en <Sequence from={...}>.

Calculadora: niveles de mezcla y temporización de ducking

Script de Node autocontenido. Guárdalo como mix_levels.js y ejecuta con node mix_levels.js. Calcula el nivel de música bajada y los tramos de fotogramas por línea de VO para bajar, de modo que entregues a remotion-compose una envolvente concreta en lugar de una sensación. Sin dependencias.

// Planificador de mezcla y ducking. Edita las entradas, luego: node mix_levels.js
const input = {
  fps: 30,
  musicVolume: 0.8,       // nivel de música cuando nadie habla (0-1)
  duckToPercent: 0.30,    // bajar la música a esta proporción de su nivel bajo VO
  voVolume: 1.0,          // nivel de voz en off (mantén la VO como el elemento más fuerte)
  duckFadeFrames: 8,      // fundido de entrada/salida para que la bajada no sea un salto brusco
  // Líneas de VO como [startSeconds, endSeconds]; baja la música en cada una, con margen de fundido
  voLines: [
    [0.5, 3.2],
    [4.0, 7.5],
    [8.2, 11.0],
  ],
}

const duckedLevel = +(input.musicVolume * input.duckToPercent).toFixed(3)
const toFrame = (s) => Math.round(s * input.fps)
// dB aproximado para referencia: 20*log10(nivel)
const dB = (v) => (v <= 0 ? '-inf' : (20 * Math.log10(v)).toFixed(1) + ' dB')

console.log('Nivel VO:           ', input.voVolume, '(' + dB(input.voVolume) + ')  <- elemento más fuerte')
console.log('Música (sin habla):  ', input.musicVolume, '(' + dB(input.musicVolume) + ')')
console.log('Música bajada bajo VO:', duckedLevel, '(' + dB(duckedLevel) + ')')
console.log('Fundido ducking:    ', input.duckFadeFrames, 'fotogramas entrada/salida')
console.log('Bajar música en estos tramos de fotogramas (margen de ' + input.duckFadeFrames + 'f a cada lado para el fundido):')
for (const [start, end] of input.voLines) {
  const a = toFrame(start) - input.duckFadeFrames
  const b = toFrame(end) + input.duckFadeFrames
  console.log('  VO ' + start + 's-' + end + 's  -> fotogramas ducking', Math.max(0, a), 'a', b)
}

Ejemplo de salida

Nivel VO:            1 (0.0 dB)  <- elemento más fuerte
Música (sin habla):   0.8 (-1.9 dB)
Música bajada bajo VO: 0.24 (-12.4 dB)
Fundido ducking:      8 fotogramas entrada/salida
Bajar música en estos tramos de fotogramas (margen de 8f a cada lado para el fundido):
  VO 0.5s-3.2s  -> fotogramas ducking 7 a 104
  VO 4s-7.5s    -> fotogramas ducking 112 a 233
  VO 8.2s-11s   -> fotogramas ducking 238 a 338

Léelo: la VO se mantiene a nivel completo (el elemento más fuerte de la mezcla), la música se mantiene a 0.8 en los espacios y baja a 0.24, aproximadamente un tercio, dondequiera que alguien hable, fundiéndose en 8 fotogramas para que la bajada no sea un salto brusco. Los tramos de fotogramas son exactamente los rangos que remotion-compose utiliza en el callback de volume del <Audio> de la música: nivel completo fuera de los tramos, duckedLevel dentro, con rampa lineal a través del margen de fundido. Por eso las palabras se mantienen claras sin que la música desaparezca.

Plantilla: hoja de referencia de audio

Copia esto, completa los campos FILL con las salidas de tu rejilla de beats y niveles de mezcla, y entrega la hoja completada a remotion-compose. Es la única fuente de verdad para cada decisión de audio del vídeo.

HOJA DE REFERENCIA DE AUDIO. [FILL: nombre del vídeo]. fps [FILL] / [FILL] BPM / [FILL]s total

MÚSICA
  Pista:                 [FILL: título + fuente]
  Licencia:              [FILL: ej. Epidemic Sound comercial / CC0] - atribución: [FILL: sí/no, texto]
  Nivel (sin habla):     [FILL: 0-1]    Bajado bajo VO: [FILL: 0-1] (~30%)

REJILLA DE BEATS (de beat_grid.js) - los cortes caen aquí
  Fotogramas downbeat:       [FILL: 0, 60, 120, ...]
  Cortes duros en:          [FILL: qué downbeats llevan los cortes grandes]

SFX (uno por transición; pico EN el pico del movimiento)
  FOTOGRAMA    SFX            FUNCIÓN
  [FILL]   [FILL whoosh]   conduce a barrido (empieza ~4f antes, cola en el corte)
  [FILL]   [FILL impact]   tarjeta entra con fuerza, cae EN el fotograma de corte
  [FILL]   [FILL riser]    se construye a través de 10-20f, se resuelve en la revelación
  [FILL]   [FILL pop]      aparece elemento de interfaz

VOZ EN OFF (~150 ppm; las escenas se ajustan a la VO, no al revés)
  LÍNEA                                  INICIO    FIN     ESCENA
  [FILL línea]                            [FILL]  [FILL] [FILL]
  (silencio 8-15f antes de línea clave / después de CTA)

ENVOLVENTE DUCKING (de mix_levels.js) - tramos de fotogramas para bajar la música
  [FILL: 7-104, 112-233, ...]  fundido [FILL]f entrada/salida

TRASPASO: remotion-compose conecta <Audio> + callbacks de volumen; remotion-render exporta.

referencias/busqueda-libre-regalias

El vídeo comercial necesita música para la que tengas licencia real: "lo encontré en YouTube" no es una licencia y Spotify de un cliente tampoco. Fuentes con licencia/libres de regalías, por caso de uso:

  • Bibliotecas de suscripción (más seguras para cliente/comercial/anuncios): Epidemic Sound, Artlist, Musicbed, Soundstripe. Tarifa plana, licencia comercial amplia, grandes bibliotecas de SFX, sin atribución por vídeo. La opción por defecto para trabajo remunerado.
  • Gratuitas con condiciones (verifica cada una): Free Music Archive, Incompetech, YouTube Audio Library. Pueden requerir atribución o restringir uso comercial. Lee la letra pequeña.
  • Únicas / artista directo: Music Vine, Marmoset. Por pista, a menudo más caras pero con derechos de sincronización más claros.

Qué hacer con la atribución: Si la licencia la exige, coloca el crédito en la descripción del vídeo y, si es posible, en los créditos finales. Registra el texto de atribución exacto en la hoja de referencia.

Qué NO usar: Descargas de YouTube, SoundCloud de "free beat" sin licencia por escrito, listas de reproducción de Spotify, o cualquier sitio del que no puedas citar el tipo de licencia. El riesgo de reclamación por derechos de autor o eliminación no vale el tiempo.

referencias/colocacion-sfx

Un efecto de sonido es bueno cuando el oyente siente el movimiento que lo causó, no cuando nota el sonido. La regla es: el pico del SFX se alinea con el pico del movimiento.

Tipo de SFXMomento del picoEjemplos de uso
WhooshPoco antes del corte (cola en el corte)Barridos, transiciones de paneo, deslizamiento de elementos
ImpactoExactamente en el fotograma del impactoTarjetas que entran con fuerza, choques de texto, golpes
RiserSe acumula antes, pico en la revelaciónTransiciones de revelación, entradas dramáticas
Clic / PopEn el fotograma de la apariciónElementos de interfaz, notificaciones, puntos
Toque / TimbreJusto después del gestoComentarios hápticos, toques suaves

Pautas de temporización:

  • Un whoosh empieza ~3-5 fotogramas antes del golpe visual. Su cola cae en el fotograma del barrido.
  • Un impacto es instantáneo: un solo fotograma en el pico. Si se usa en un fundido, el fotograma inicial del fundido.
  • Un riser empieza 10-20 fotogramas antes de una revelación y se funde en el fotograma de la revelación.
  • Clic/pop en el fotograma exacto del destello de la interfaz o la aparición del elemento.

Un SFX por transición. Dos SFX compitiendo en la misma transición suenan a ensalada de sonido. Si sientes la necesidad de apilar, probablemente tu one-shot elegido es demasiado débil — encuentra un solo SFX más rico.

Los niveles deben ser cómodos: alrededor de -10 a -6 dB para impactos, -15 a -10 dB para whooshes, -12 a -8 dB para pops. Sonido de referencia: el whoosh más fuerte no debería ser más fuerte que la voz en off media.

referencias/mezcla-voz

La voz en off es el elemento más importante de la mezcla. Todo lo demás la sirve. La meta: cada palabra es inteligible en monoaural desde un altavoz de teléfono.

Ritmo. 140-160 palabras por minuto. Por debajo de 130 suena lento; por encima de 170 suena apresurado. Los presentadores de noticias leen a ~170; el contenido conversacional es más lento. Escribe como habla la gente: frases cortas, contracciones, una idea por línea.

Silencio. Deja espacios. 8-15 fotogramas antes de la línea de apertura, 8-15 fotogramas antes de la línea clave, 10-20 fotogramas después del CTA. El silencio le dice al oyente "esto es importante".

Nivel. La VO en el rango de -3 a -6 dB (pico), nunca recortando. Si un clip de VO llega caliente, bájalo o normalízalo a -3 dB. Haz que la VO sea clara con un filtro de paso alto suave alrededor de 80-100 Hz si hay ruido de baja frecuencia.

Ducking. La música se mezcla bajo la VO, no al lado. La música bajada debe estar alrededor de -18 a -22 dB (aproximadamente 25-35% del nivel de la VO en términos de amplitud). El fundido de entrada/salida debe ser de ~5-10 fotogramas para que la bajada no sea audible como un cambio de volumen.

Referencia: si escuchas con los ojos cerrados y puedes transcribir cada palabra, la mezcla es correcta.

Individual skills in this repo

This repo contains 11 individual skills — each has its own dedicated page.

Captions From Transcript

Produce an accurate, properly timed caption track (SRT or WebVTT) from a video

Kinetic Typography

Put text in motion the right way - title cards, animated captions, lower-thirds, callouts, and word-by-word reveals - with a reading-time-per-word budget so copy holds long enough to read, plus enter/exit timing, weight and size transitions, and type hierarchy in motion. Use when someone asks to

Motion Design Principles

The craft layer for motion: pick the right easing (ease-in / ease-out / ease-in-out / spring), get timing and spacing right, build the anticipation→action→follow-through arc, and apply Disney

Narration Script

Write the spoken voiceover for a tutorial or demo - the actual words, phrased for the ear and synced one-instruction-per-action to what is on screen, with a pacing budget and a confident, jargon-checked tone. Use when someone says

Product Demo Director

Direct the craft of putting a real software UI on screen - cursor choreography, zoom/pan/callout language, screen-recording vs recreated-UI, and making state changes legible with highlights, focus pulls, and slow-downs. Use when filming or recreating an app for a product demo, feature walkthrough, onboarding clip, or release reel and asking

Remotion Compose

Turns a natural-language video brief into a complete, ready-to-preview Remotion composition - extracts duration, scenes, brand colors, aspect ratio, and real copy; plans the frame budget; and writes data-driven React/TypeScript using useCurrentFrame, interpolate, spring, AbsoluteFill, and Sequence, registered in Root.tsx. Use when someone says

Remotion Render

Renders a Remotion composition to MP4 and runs the edit-and-re-render loop - CLI render commands, 1080p/4K/9:16 presets, concurrency tuning, codec selection, batch variants from a JSON data file, and Lambda for cloud rendering. Use when someone says

Remotion Setup

Scaffolds a new Remotion video project wired for Claude Code Agent Skills - Node check, create-video scaffold, skills install, folder conventions, Google Fonts, and a smoke-test render. Use whenever someone wants to start making videos with Remotion and Claude, even just

Screencast Capture

Capture clean raw screen and camera footage for a tutorial or product demo - choosing the recorder (macOS Screenshot toolbar, QuickTime, OBS, Windows Game Bar), setting resolution / frame-rate / cursor / microphone, prepping a distraction-free stage, and recording in retakeable segments. Use when someone says

SkillMedev/tutorial-video-studio

Plan a product demo, feature announcement, or launch video as a beat sheet and shot list BEFORE animating - hook in the first 3s, problem, reveal, proof, CTA - with target duration and pacing per scene type, output as a JSON scene plan that remotion-compose consumes directly. Use when someone says

Social Video Formatter

Reframe and export a finished video for social platforms - 9:16 ↔ 16:9 cropping, burned-in captions, a platform-native first frame, loop design, and per-platform specs (aspect, length, safe areas) for TikTok, Reels, Shorts, X, and LinkedIn. Use when someone says

Skills relacionados