Trimming Audio

The <Html5Audio /> tag supports the trimBefore and trimAfter props.
With it, you can trim off parts of the audio.

MyComp.tsx
tsx
import {AbsoluteFill, Html5Audio, staticFile, useVideoConfig} from 'remotion';
 
export const MyComposition = () => {
  const {fps} = useVideoConfig();
 
  return (
    <AbsoluteFill>
      <Html5Audio src={staticFile('audio.mp3')} trimBefore={2 * fps} trimAfter={4 * fps} />
    </AbsoluteFill>
  );
};

This will result the audio to play the range from 00:02:00 to 00:04:00, meaning the audio will play for 2 seconds.

The audio will still play immediately at the beginning - to see how to shift the audio to appear later in the composition, see the next article.

Legacy props

You can also use the deprecated startFrom and endAt props, but the new trimBefore and trimAfter props are preferred.