This helps create a short video clip by pulling the album art, title and series metadata from an MP3 podcast file.
This is like Marco's podcast clip sharing feature in Overcast. I don't have an iOS device but I do record podcasts, and wanted to share clips in a similar style.
Try It Live via Now
- Canvas
- MediaRecorder
- AudioContext
- React 16.8 / React Router
- Styled Components / Rebass
- music-metadata-browser
As an experiment, some of the library components of this codebase were written with TypeScript.
- Select an MP3 podcast file
- App extracts album art, title and series metadata
- Set start time and duration of recording
- Records duration from start time
- Outputs a
.webmvideo
At the end of all of this, you get a .webm file which is good, but not great since it does not have compatibility with iOS devices. The app will give you a nice ffmpeg command to run on the downloaded copy of the .webm file to convert it to a more cross platform .mp4 version.
Future goals may include:
- timeline vs input form time selection
.mp4generation inline in browser
For my own uses, the next version of this kind of tool is:
- a CLI version; possibly in Rust
- that may not be JavaScript based
- that could draw frames programmatically
- that could interop with
ffmpegdirectly for increased flexibility and encoding performance