Remotion Audiogram Template

This template is for creating "audiograms". In other words, video clips from podcast episodes, or any other audio. It's a popular way of sharing audio snippets on social media.

Example video

Start changing things like this:

• Adjust size and length in src/Root.tsx
• Replacing audio, cover and subtitles in the public folder
• Tweak src/Audioframe.tsx

How do I render my video?

Run this:

npx remotion render

Or check out the Remotion docs. There are lots of ways to render.

Where to get a transcript?

You can supply a .srt file or a .json file that follows the @remotion/captions format. Examples for both are included.

Generate them:

• Use @remotion/install-whisper-cpp to use Whisper locally
• Use @remotion/openai-whisper to get captions from OpenAI Whisper into the right shape.

Get it from a provider:

• Your podcasting host might provide them for you.
• Descript makes transcription really easy.
• There are tons of other, paid solutions, like Otter.ai, Scriptme.io and ListenRobo.com.

If you supply a .srt, make sure to export subtitles that are segmented by word rather than by sentence.

Optimizing for long audio files

If your audio is long, pass a .wav file instead of another format. The template will use useWindowedAudioData() to only fetch the data around the current time.
Otherwise, the audio visualization may become a heavy duty for the browser or during rendering.

Commands

Install Dependencies

npm install

Start Preview

npm run dev

Render video

npx remotion render

Upgrade Remotion

npx remotion upgrade

Docs

Get started with Remotion by reading the fundamentals page.

Help

We provide help on our Discord server.

Issues

Found an issue with Remotion? File an issue here.

License

Note that for some entities a company license is needed. Read the terms here.