Communitygithub.com

syahdestiny/soundtrack

Cette compétence est utilisée lorsque l'utilisateur demande d'« ajouter de la musique à l'animation », de « faire la musique en code », de « synthétiser une bande-son », de « composer une musique de fond adaptée aux coupures », de « synchroniser la musique avec la vidéo », de « vérifier si l'audio correspond à l'image » ou si « la musique est trop soudaine / surprenante ». Elle couvre une partition synthétisée en code qui vit dans la page d'animation (Web Audio API, rendue hors ligne en WAV), de la musique générée par IA ou fournie par l'utilisateur, et une vérification automatique que les coupures tombent sur le temps sans un saut de volume surprenant.

Qu'est-ce que soundtrack ?

Cette compétence permet de composer numériquement la bande-son d'une animation directement depuis le navigateur via l'API Web Audio, en générant un fichier WAV rendu hors ligne qui est ensuite fusionné à la vidéo MP4. Elle assure une synchronisation parfaite entre la musique et le montage : chaque scène reçoit un nombre entier de mesures (le tempo pouvant s'adapter), les transitions harmoniques remplacent les sauts de volume brutaux, et l'introduction des couches instrumentales est progressive pour éviter les effets de surprise. Un script de vérification (`sync-check`) analyse les décalages temporels et les variations de volume, signalant les coupures décalées de plus de 100 ms ou les sauts de plus de 6 dB. La compétence supporte également l'import de musique générée par IA ou de pistes personnalisées, mais dans ces cas c'est l'image qui s'adapte à la musique en déplaçant les limites de scènes dans la table `SCENES`, sans toucher au code de chaque scène.

Compatible avec~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/syahdestiny/skill-motion-javascript/tree/HEAD/skills/soundtrack
Voir l'original→Voir toutes les compétences

Demander à votre IA préférée

Ouvre une nouvelle conversation avec cette compétence d'agent déjà préchargée.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Documentation

Bande-son

Écrire le son de ce film

Le son d'un film est écrit pour ce film : ses propres instruments, son propre rythme et sa propre harmonie en Web Audio, à partir de rien, dans window.SCORE = ac => { … } (oscillateurs, bruit, filtres, enveloppes, délais : tout ce que le morceau demande). Les batteries, un groove ou un lit de boîte à musique sont écrits de la même manière, pour ce film : aucun film ne devrait sonner pareil car ils partagent un modèle. templates/groove.js et templates/score.js sont deux partitions prêtes à l'emploi, utilisées uniquement lorsque l'utilisateur les demande ; chaque fichier documente ses options.

render.mjs (de la compétence javascript-animation) rend window.SCORE hors ligne avec OfflineAudioContext, écrit <out>.wav et le multiplexe dans le MP4 ; l'aperçu en direct de la page joue la même partition lorsqu'on clique.

Ne demandez pas à l'utilisateur de choisir une source musicale à l'avance. À la livraison, mentionnez en une ligne que la musique générée par IA ou leur propre piste fonctionne également.

Comment la musique suit l'image

  • Table des tempos. Chaque scène obtient un nombre entier de mesures (le tempo peut varier par scène), de sorte que chaque coupure tombe sur un temps fort.
  • Marquer les coupures avec l'harmonie, pas le volume. Chaque scène rejoint la dominante et la coupure arrive sur la tonique. Un accent fort sur une coupure (basse + carillon lumineux à la fois) est perçu comme un jump scare : les utilisateurs ont signalé qu'un saut de +7 à +10 dB était surprenant ; +3 à +5 dB avec un changement d'accord est perçu comme une coupe propre.
  • N'amincissez pas la mesure d'ouverture si c'est la seule mesure avant la première coupure ; une intro clairsemée suivie de la texture complète est elle-même une surprise.
  • Pas d'accent supplémentaire sur le temps fort de la coupure. Même l'accent normal du temps fort (basse plus forte + première note) a fait basculer les courts métrages au-dessus de +6 dB, car la mesure précédente décroît. Le changement d'accord suffit.
  • Les coupures dures à l'intérieur d'une scène comptent. Mettez-les aussi dans window.CUES, afin qu'elles obtiennent le même temps fort.
  • Donnez à l'œil quelque chose sur quoi s'accrocher. La musique legato sans percussion n'a pas d'accents sur lesquels les coupures peuvent atterrir. Avec un groove régulier, les accents font partie du rythme et ne surprennent pas (la vérification compare avec les dernières secondes, pas avec un moment isolé et silencieux).
  • Introduisez les couches une ou deux par mesure. Kick et basse entrant ensemble après une intro calme ont mesuré +11 dB (surprise) ; décalés d'une mesure, +3,5 dB.
  • Utilisez un break. Couper tout en silence pendant une mesure avant le payoff est le temps le plus fort d'un court métrage. sync-check accepte une coupure dans le silence comme étant sur le temps.

Autres sources (uniquement sur demande)

  • Musique générée par IA (par exemple Lyria via OpenRouter) : voir references/ai-music.md.
  • La propre piste de l'utilisateur : multiplexez-la avec ffmpeg.

Avec une musique que vous ne contrôlez pas, inversez la direction : l'image suit la musique. Rendu, multiplexage, exécution de la vérification, puis déplacement des limites de scène dans la table SCENES de la page selon les décalages rapportés, et nouveau rendu. C'est peu coûteux car chaque fonction de scène reçoit un temps local (0 à son propre début), comme le starter est écrit : déplacer une limite ne touche jamais le code de la scène.

Toujours : vérifier

node scripts/sync-check.mjs piece.mp4 --cues-file piece.cues.json   # vérifier les CUES déclarées (recommandé)
node scripts/sync-check.mjs piece.mp4                       # alternative : détecter les coupures dans l'image (les mouvements rapides de caméra peuvent être lus comme des coupures)

Pour chaque événement, il affiche le décalage par rapport à l'attaque audio forte la plus proche et le saut de volume dans celle-ci. Il échoue sur OFF-BEAT (plus de ±100 ms, ~3 images) ou STARTLE (plus de +6 dB par rapport à la seconde précédente). La seconde d'ouverture et le fondu final sont ignorés (pas de « avant » pour comparer ; un fondu de sortie n'est pas une coupure). « Fort » signifie proéminent parmi les attaques dans les ±2 s, de sorte que les accents dans les passages calmes comptent toujours ; une coupure dans le silence est considérée comme atterrissant ; la musique qui revient après un break est comparée au niveau typique des 4 dernières secondes. Une vidéo sans flux audio est signalée comme telle. Mettez dans window.CUES chaque coupure ainsi que tout impact dans la scène que vous souhaitez vérifier (une coupure dure à l'intérieur d'un plan, l'impact d'un gag). Corrigez et réexécutez jusqu'à ce que cela passe, ou jusqu'à ce que chaque STARTLE restant soit un sting délibéré que vous pouvez nommer (un impact comique est censé surprendre ; une coupure de berceuse ne l'est pas).

Limites

Synthétisé en code : boîte à musique, pincements de piano, nappes, cloches, percussions douces sont acceptables. Les voix réalistes, les orchestres et la production de genre ne le sont pas ; utilisez la musique IA ou une piste réelle pour ceux-ci.

Individual skills in this repo

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

syahdestiny/javascript-animation

This skill should be used when the user asks to "draw every frame in JavaScript", "make an animation with no image assets", "animate this in code / on a canvas", "make a hand-drawn style animated video", "turn this into a short animated film", "make an animated explainer drawn in code", "make an animated story / picture book of my photos", or "make a zero-asset animation like the Opus 5.5 ones". Produces a single self-contained HTML file whose frames are computed on an HTML canvas (seekable, deterministic), renders it to MP4, and self-checks the result. Pairs with the soundtrack skill for code-synthesized music. NOT for charts from data (use chart-animation) or 3D/WebGL (use threejs-anima...

Skills associés

steipete/video-frames

Extract frames or short clips from videos using ffmpeg.

community

steipete/summarize

Summarize or transcribe URLs, YouTube/videos, podcasts, articles, transcripts, PDFs, and local files.

community

openclaw/openclaw

Use when testing, fixing, or extending the OpenClaw Control UI GUI with Vitest + Playwright end-to-end checks, mocked Gateway WebSocket flows, mocked dashboard runs, screenshots/videos, or agent-verifiable browser proof.

community

obra/superpowers

Obra superpowers agent skills.

community

affaan-m/ECC

See, Understand, Act on video and audio. See- ingest from local files, URLs, RTSP/live feeds, or live record desktop; return realtime context and playable stream links. Understand- extract frames, build visual/semantic/temporal indexes, and search moments with timestamps and auto-clips. Act- transcode and normalize (codec, fps, resolution, aspect ratio), perform timeline edits (subtitles, text/image overlays, branding, audio overlays, dubbing, translation), generate media assets (image, audio...

community

affaan-m/everything-claude-code

End-to-end marketing campaign planning and execution. Covers audience research, positioning, campaign angle definition, landing page copy, email sequences, social posts, ad copy, short-form video scripts, and content calendars. Use as the orchestration layer for multi-channel product launches. Use when planning or executing a multi-channel product launch, or producing landing page, email, social, or ad copy.

community