Sourcerepo

Audiogram

Turn a Spaces or podcast recording into a captioned video clip for X, TikTok, Reels or Shorts, in the browser: pick the moment, time the captions, choose a look, export an MP4. No upload, no watermark, MIT, no dependencies.

Status
Open source
Language
TypeScript
License
MIT
Updated
Oct 2026
GitHub
A MacBook and an iPhone running the clip maker in Safari: on the MacBook, a sample Space plays with green bars moving to the voice and the caption lighting up word by word, then the visual changes to a wave, the colours to mint and the shape to tall, and the captions are timed by tapping the picture; on the iPhone, the clip plays in the tall shape, is shortened from its end, and changes to the pulse visual and dusk colours

A clip maker for the recordings of Spaces, podcasts and voice notes. Drag over the moment worth sharing, and it becomes a video for X, TikTok, Reels or Shorts with your picture and name, bars that move with the voice, and captions that light up word by word. Time the captions by tapping along, pick a shape and colours, and export an MP4, all in the browser with nothing uploaded. Apps like this charge a monthly plan for clips without a watermark; this one is MIT licensed, plain TypeScript, with no dependencies.

Install

Clone
git clone https://github.com/drkxbt/audiogram
Install
npm install github:drkxbt/audiogram
Use
audiogram(element, { audio, captions, handle })

Features

  • Drag over the moment on the waveform and play it back with the picture following the voice
  • Captions that light up word by word, timed by tapping along or from a pasted transcript, SRT or WebVTT
  • Square, 4:5 or 16:9, bars, wave or pulse, five colour themes, your picture, name and handle
  • An MP4 made faster than real time with WebCodecs and a muxer in the package
  • Nothing uploaded and no watermark; runs under a strict Content Security Policy

How it works

  • The recording is decoded at 48 kHz and mixed to one channel; the bars are an FFT of the 40 milliseconds around each frame, gathered into bands spaced the way ears hear pitch.
  • Without word timings, words share a line's time by how long each takes to say; a tap moves a line's start and the end of the one before, and stretches their words to fit.
  • Each frame is drawn to a canvas, encoded as H.264 through WebCodecs, and the sound as AAC, faster than the clip plays.
  • The MP4 writer is part of the package: the index goes before the media so the video starts playing early, with sound and picture interleaved by time.
  • Where WebCodecs can't make an MP4, the clip plays once into a MediaRecorder instead.

Where it shows here

Only in its own demo for now, on a made-up exchange read by two computer voices.

Screenshots

  • On the MacBook, the sample Space plays: green bars move to the voice and the caption lights up word by word, while the playhead moves along the waveform below
    PlayThe picture follows the voice
  • The visual changes from bars to a scrolling wave, the colours change to mint and the video becomes tall, while the iPhone shortens the clip from its end
    LookWave, mint, tall
  • Timing by tapping: the clip plays from the top, a note names the next caption, and each tap on the picture starts it there
    TapCaptions timed by tapping

Stack

  • TypeScript
  • Canvas 2D
  • WebCodecs
  • Web Audio
  • Node test runner

Run it locally

git clone https://github.com/drkxbt/audiogramcd audiogramnpm installnpm run demo