Audiogram Generator

Knowledge Base

How This Tool Works

Once you upload audio, the tool decodes it and pre-computes a full waveform from the actual sample data, not a placeholder animation. When you click Render, it plays the audio while drawing a live playhead over that waveform onto a canvas, captures the canvas as a video stream, combines it with the real audio track, and records the result to a downloadable WebM file using your browser's built-in MediaRecorder, no upload to a server at any point.

Why WebM, Not MP4

Browsers can only encode video locally using formats they have a native encoder for, which for in-browser recording is WebM (VP8/VP9 video + Opus audio) rather than MP4. Most platforms (YouTube, Twitter/X, LinkedIn) accept WebM directly. For platforms that specifically require MP4, run the download through a free converter or your video editor's import/export once.

Getting a Good Result

• Use a background image with enough contrast that the waveform colour stays visible against it.
• Keep clips under a few minutes, long recordings take proportionally longer to render since the tool plays the full audio in real time while capturing.
• Don't switch browser tabs while rendering. Some browsers throttle canvas updates in background tabs, which can affect capture smoothness.

FAQ

Q: Why does rendering take as long as the audio's actual duration?
A: The tool captures the canvas in real time as the audio plays, the same way a screen recorder works. There's no faster-than-realtime rendering path available through browser APIs for this technique.

Q: Can I use a video file as the background instead of a static image?
A: Not currently. This tool is built around a static image background with an animated waveform overlay.

Making an audiogram people actually watch

An audiogram exists to solve one problem: audio does not autoplay usefully in a social feed, and a still image gives a scrolling viewer no reason to stop. A moving waveform gives the post something to do while it waits to be noticed. The movement is the entire mechanism, so anything that makes the motion clearer helps and anything that competes with it does not.

Length decides whether it works. Between 30 and 60 seconds suits most feeds. Under 30 rarely carries a complete thought, and past 90 the completion rate falls sharply regardless of how good the clip is. Choose a passage that stands alone, with a clear beginning, rather than an excerpt that starts mid sentence and assumes context the viewer does not have.

Captions are not optional. Most social video is watched without sound, so an audiogram with no text on screen is a silent animation of a waveform, which communicates nothing. Burned-in captions mean the words are visible whatever the platform decides to do with its own caption settings. This is also the accessibility baseline, and the two requirements happen to point the same way.

Square at 1080 by 1080 is the safest single choice, since it fills more of a phone screen than a wide 16:9 frame and is accepted everywhere. Vertical at 1080 by 1920 performs better on feeds built around full screen playback and wastes space elsewhere. Keep text well inside the edges, because different platforms crop differently and overlay their own interface on top of the corners.

Vocabulary

Audiogram. A short video built from an audio clip, usually showing an animated waveform over a static background with captions. Made to give audio a form that works in a social feed.

Waveform. A visual representation of a sound's level over time. The shape most people recognise from audio software. In an audiogram it provides the motion that stops a scroll.

Burned-in captions. Text rendered permanently into the video image rather than supplied as a separate track. Guarantees the words appear on every platform, at the cost of being unable to switch off or translate them.

Safe area. The central region of a frame surviving whatever cropping and interface overlay a platform applies. Keeping text inside it prevents words being cut off or hidden behind a like button.