Transitioning with audio

working from v4.0.58

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

tsx

import {TransitionPresentation, TransitionPresentationComponentProps} from '@remotion/transitions';
import {Html5Audio} 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' ? <Html5Audio src={src} /> : null}
        <C {...p} />
      </>
    );
  };

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

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

You may use it like this:

tsx

import {TransitionPresentation, TransitionPresentationComponentProps} from '@remotion/transitions';
import {Html5Audio} 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' ? <Html5Audio src={src} /> : null}
        <C {...p} />
      </>
    );
  };

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

// ---cut---

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