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.
Start changing things like this:
- Adjust size and length in
src/Root.tsx - Replacing audio, cover and subtitles in the
publicfolder - Tweak
src/Audioframe.tsx
Run this:
npx remotion renderOr check out the Remotion docs. There are lots of ways to render.
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-cppto use Whisper locally - Use
@remotion/openai-whisperto 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.
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.
Install Dependencies
npm installStart Preview
npm run devRender video
npx remotion renderUpgrade Remotion
npx remotion upgradeGet started with Remotion by reading the fundamentals page.
We provide help on our Discord server.
Found an issue with Remotion? File an issue here.
Note that for some entities a company license is needed. Read the terms here.