使用音频过渡

适用于 v4.0.58

要为过渡添加声音，您可以使用此函数来包装任何演示：

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,
  };
}

根据需要自定义<Audio>组件的音量、偏移、播放速率和其他属性。

您可以像这样使用它：

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"));

现在您可以在 presentation 的位置使用 withSound。

另请参阅​

另请参阅