Transitioning with audio

working from v4.0.58

To add sound to a transition, you may use this function to wrap any presentation:

add-sound.tsx
tsx
import {
  TransitionPresentation,
  TransitionPresentationComponentProps,
} from "@remotion/transitions";
import { Audio } from "remotion";
 
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,
  };
}

add-sound.tsx
tsx
import {
  TransitionPresentation,
  TransitionPresentationComponentProps,
} from "@remotion/transitions";
import { Audio } from "remotion";
 
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,
  };
}

Customize the volume, offset, playback rate, and other properties of the <Audio> component as you wish.

You may use it like this:

example.tsx
tsx
import { slide } from "@remotion/transitions/slide";
import { staticFile } from "remotion";
 
const presentation = slide();
const withSound = addSound(presentation, staticFile("whoosh.mp3"));

example.tsx
tsx
import { slide } from "@remotion/transitions/slide";
import { staticFile } from "remotion";
 
const presentation = slide();
const withSound = addSound(presentation, staticFile("whoosh.mp3"));

Now you can use withSound in place of presentation.

See also​

See also