Free Audiogram Generator

How to create an audiogram video

1. Click “Choose audio file” → pick MP3/WAV/OGG ≤ 50MB
2. Wait for waveform to appear (usually < 2 seconds)
3. Choose aspect ratio (1:1 square, 9:16 portrait, 16:9 landscape)
4. Customize: waveform color, background color, text color, animation style
5. Add optional cover image (JPG/PNG)
6. Enter title and author name → adjust font size/weight
7. Click “Generate video” → wait for recording to finish
8. Click “Download” to get your WebM/MP4 file

Why it matters

Podcasters and audio creators need a fast way to turn audio clips into shareable social video ads. Most services require uploading audio to a third-party server. This tool processes everything locally in your browser — your audio never leaves your device, and you get instant results without waiting in a queue.

How it works — principles and formulas

The waveform visualization is generated by extracting peak amplitude values from decoded audio samples (AudioBuffer.getChannelData()), then sampling at a configurable window size (default 512 samples per frame). The waveform data is rendered on Canvas 2D and captured via Canvas.captureStream() for MediaRecorder composition.

Peak calculation: peaks[i] = max(abs(samples[window_start : window_start + window_size]))
Audio stream: AudioBufferSourceNode → AudioContext.createMediaStreamDestination() → MediaStream (single audio clock source)
Video composition: MediaStream([...canvas.captureStream().getVideoTracks(), ...audioDest.stream.getAudioTracks()]) → MediaRecorder.start()
Master Clock: audioElapsed = audioContext.currentTime - recordingStartTime (frame progress must not use requestAnimationFrame timestamps)

The waveform is re-rendered at 60 fps via requestAnimationFrame; every frame first fills the background color, then draws the cover image, the waveform and the text — this guarantees MediaRecorder never captures transparent pixels.

Limits and compatibility

Supports MP3/WAV/OGG formats up to 50MB and 5 minutes duration. Safari 14.1+ exports MP4 only (check MediaRecorder.isTypeSupported('video/mp4')); Chrome/Firefox/Edge export WebM + MP4. iOS Safari has memory limits (~1-2GB per tab) and does not support MediaRecorder pause/resume — recording will interrupt on background tab switch.

• Supported formats: MP3 (≤ 320kbps), WAV (16-bit/44.1kHz), OGG
• Duration: ≤ 5 minutes recommended; longer audio may exhaust memory on mobile devices
• Browsers: Chrome 80+, Firefox 75+, Safari 14.1+, Edge 80+
• Known limitations: iOS Safari exports MP4 only; iOS Safari does not support MediaRecorder pause/resume (switching tabs interrupts recording); low-end Android devices render slower
• Export: Chrome/Firefox/Edge → WebM + MP4; Safari → MP4 only; if Safari runs out of memory, a static waveform poster (PNG) is generated instead

Data provenance

Rendering runs entirely in the browser, so audio files never leave your device. Waveform data is built on the official Web Audio API · AudioContext.decodeAudioData specification.

• Web Audio API — MDN Web Docs: developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API
• Canvas.captureStream — MDN Web Docs: developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/captureStream
• MediaRecorder API — MDN Web Docs: developer.mozilla.org/en-US/docs/Web/API/MediaRecorder_API
• Safari MediaRecorder limitations — WebKit Bug Tracker: bugs.webkit.org/show_bug.cgi?id=210480