Chapter 637: Transitioning with audio

Core Idea

_working from v4. 0.

Key Concepts

• See also

Code Examples

export function addSound<T extends Record<string, unknown>>(transition: TransitionPresentation<T>, src: string): TransitionPresentation<T> {
  const {component: Component, ...other} = transition;

  const C = Component as React.FC<TransitionPresentationComponentProps<T>>;

  const NewComponent: React.FC<TransitionPresentationComponentProps<T>> = (p) => {
    return (
      <>
        {p.presentationDirection === 'entering' ? <Audio src={src} /> : null}
        <C {...p} />
      </>
    );
  };

  return {
    component: NewComponent,
    ...other,
  };
}

• What it demonstrates: Usage pattern for Transitioning with audio from the official docs.

Key Takeaways

1. Understand see also when working with Transitioning with audio.

Connects To

• Make Html in Canvas Presentation: related page in the Transitions (@remotion/transitions) section.
• Presentations: related page in the Transitions (@remotion/transitions) section.
• Book Flip: related page in the Transitions (@remotion/transitions) section.