Remotion Rule: Audio

What it is

The Remotion Rule: Audio is a skill rule from the official Remotion Agent Skill set. It provides structured guidance for AI coding agents working with audio in Remotion projects. Remotion is a framework for creating programmatic video using React components, and this rule covers the audio layer: importing sound files, trimming clips, adjusting volume over time, changing playback speed, and modifying pitch.

This rule is for developers using AI coding assistants (like Claude Code) to build Remotion video projects. When activated, it teaches the AI how to correctly use Remotion's audio APIs.

How it saves time or tokens

Without this rule, an AI coding agent would need to discover Remotion's audio API conventions through trial and error or by reading documentation. The rule provides the correct patterns upfront, reducing failed attempts and token waste on incorrect code generation.

The rule is approximately 500 tokens and activates automatically when audio work is detected in a Remotion project context.

How to use

1. Install the Remotion skills:

npx skills add remotion-dev/skills

1. The audio rule activates automatically when working with audio in a Remotion project.

1. Use the Audio component in your Remotion composition:

import { Audio } from 'remotion';

export const MyVideo: React.FC = () => {
  return (
    <Audio
      src='https://example.com/music.mp3'
      volume={0.5}
      startFrom={30}  // skip first 30 frames
      endAt={150}      // stop at frame 150
    />
  );
};

Example

Dynamic volume adjustment with a fade-in effect:

import { Audio, interpolate, useCurrentFrame } from 'remotion';

export const FadeInAudio: React.FC = () => {
  const frame = useCurrentFrame();

  const volume = interpolate(
    frame,
    [0, 30],   // frames 0 to 30
    [0, 1],    // volume 0 to 1
    { extrapolateRight: 'clamp' }
  );

  return (
    <Audio
      src='https://example.com/bgm.mp3'
      volume={volume}
    />
  );
};

The interpolate function creates smooth transitions for volume, making fade-in and fade-out effects straightforward.

Related on TokRepo

• AI tools for video -- AI-powered video production tools
• AI tools for coding -- AI coding assistants and development tools

Common pitfalls

• Using unsupported audio formats. Remotion supports MP3, WAV, and AAC. Some browsers have limited codec support for formats like OGG or FLAC during preview.
• Forgetting that Audio components must be inside a Remotion Composition. Placing them outside the composition tree causes silent failures.
• Not pre-loading audio assets. For remote URLs, add the audio to your public folder or use the staticFile() helper to avoid loading delays during rendering.