Back to Remotion

Importing Audio

packages/docs/docs/audio/importing.mdx

4.0.4871007 B
Original Source

import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem';

Put an audio file into the public/ folder and use staticFile() to reference it.
Add an <Audio/> tag to your component to add sound to it.

tsx
import {AbsoluteFill, staticFile} from 'remotion';
import {Audio} from '@remotion/media';

export const MyComposition = () => {
  return (
    <AbsoluteFill>
      <Audio src={staticFile('audio.mp3')} />
    </AbsoluteFill>
  );
};

You can also add remote audio by passing a URL:

tsx
import {AbsoluteFill} from 'remotion';
import {Audio} from '@remotion/media';

export const MyComposition = () => {
  return (
    <AbsoluteFill>
      <Audio src="https://example.com/audio.mp3" />
    </AbsoluteFill>
  );
};

By default, the audio will play from the start, at full volume and full length.
You can mix multiple tracks together by adding more audio tags.