Loop Audio

[MDrooker]

Hey All-
Loving Remotion!
Is there an easy way to loop an <Audio /> track to run the duration of the video?
I have a theme track that is much shorter than the output video that accompanies it.

Anyone run into a way to have it just loop until the video is done?

[JonnyBurger]

Hey @MDrooker! Currently we don't have an API for it, but you can achieve it quite easily:

import { getAudioDuration } from '@remotion/media-utils';
import React, {useEffect, useState} from 'react';
import {Audio, Sequence, useVideoConfig} from 'remotion';

export  const Video: React.FC = () => {
	const {fps} = useVideoConfig();
	const [durationOfAudio, setDurationOfAudio] = useState<number | null>(null);

  const src = "https://example.com/audio.mp3"
  const loopNTimes = 20

  useEffect(() => {
    getAudioDuration(src)
    .then((duration) => setDurationOfAudio(duration))
    .catch(err => console.log(err))
  }, [src])

	const durationOfAudioInFrames = (durationOfAudio ?? 0) * fps;

	return (
		<div>
			{new Array(loopNTimes).fill(true).map((_, index) => {
				return (
					<Sequence
						from={durationOfAudioInFrames * index}
						durationInFrames={durationOfAudioInFrames}
					>
						<Audio src={src} />
					</Sequence>
				);
			})}
		</div>
	);
};

Also look out for #254 (<Loop /> component) which we'll include in the Hacktoberfest event, so maybe it'll get implemented soon!