带音频过渡

正在从 v4.0.58 工作

🌐 working from v4.0.58

要为过渡添加声音，你可以使用此函数来封装任何演示文稿：

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

add-sound.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,
  };
}

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

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

你可以这样使用它：

🌐 You may use it like this:

example.tsx

import {slide} from '@remotion/transitions/slide';
import {staticFile} from 'remotion';

const presentation = slide();
const withSound = addSound(presentation, staticFile('whoosh.mp3'));

现在你可以用 withSound 替代 presentation。

🌐 Now you can use withSound in place of presentation.

另请参阅

🌐 See also

• <Html5Audio>
• 使用音频