Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/remotion-dev/template-audiogram
A template for making podcast video clips with Remotion.
https://github.com/remotion-dev/template-audiogram
Last synced: 23 days ago
JSON representation
A template for making podcast video clips with Remotion.
- Host: GitHub
- URL: https://github.com/remotion-dev/template-audiogram
- Owner: remotion-dev
- Created: 2021-11-16T15:14:48.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2025-01-19T10:02:59.000Z (23 days ago)
- Last Synced: 2025-01-19T11:18:23.325Z (23 days ago)
- Language: TypeScript
- Homepage: https://template-audiogram.vercel.app
- Size: 75.5 MB
- Stars: 181
- Watchers: 3
- Forks: 40
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- my-awesome-list - template-audiogram - dev | 185 | (TypeScript)
README
# 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](https://twitter.com/marcusstenbeck/status/1460641903326732300)
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:
```console
npx remotion render
```
Or check out the [Remotion docs](/docs/render/). 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`](https://remotion.dev/docs/captions/caption) format. Examples for both are included.
**Generate them:**
- Use [`@remotion/install-whisper-cpp`](https://www.remotion.dev/docs/install-whisper-cpp/) to use Whisper locally
- Use [`@remotion/openai-whisper`](https://www.remotion.dev/docs/openai-whisper/openai-whisper-api-to-captions) 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](https://otter.ai), [Scriptme.io](https://scriptme.io) and [ListenRobo.com](https://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()`](/docs/use-windowed-audio-data) 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**
```console
npm install
```
**Start Preview**
```console
npm run dev
```
**Render video**
```console
npx remotion render
```
**Upgrade Remotion**
```console
npx remotion upgrade
```
## Docs
Get started with Remotion by reading the [fundamentals page](https://www.remotion.dev/docs/the-fundamentals).
## Help
We provide help [on our Discord server](https://discord.gg/6VzzNDwUwV).
## Issues
Found an issue with Remotion? [File an issue here](https://github.com/remotion-dev/remotion/issues/new).
## License
Note that for some entities a company license is needed. Read [the terms here](https://github.com/remotion-dev/remotion/blob/main/LICENSE.md).