AUD · Audio tools

Waveform Image Generator

Waveform1200 × 240

Shareable link

Settings are written to the URL as you change them. Nothing differs from the defaults yet.

A waveform image is the thing every podcast page, audio embed, and video caption card needs and no export dialog produces. This draws one at the size you are going to use it.

Bars, filled, or line

Bars are the familiar player look: discrete rectangles with a gap between them. Bar width and gap are both in output pixels, so the density you set is the density you get.

Filled draws a solid shape between the upper and lower envelope, which reads better at small sizes and in print. Line draws only the outline, which suits a light background and a thin stroke.

Mirroring puts the envelope above and below a centre line. Turning it off draws only the positive half, anchored to the bottom, which is the shape most video captions use.

PNG or SVG

Both come from the same geometry. The PNG is rasterised at the exact width and height set on the canvas controls; the SVG carries the same bars as vector shapes and scales to any size afterward.

Pick SVG when the drawing goes into a design tool or a page that might render it at a different width. Pick PNG when it goes into a video timeline or a CMS that does not accept SVG.

Peaks JSON

The envelope is exported as interleaved minimum and maximum pairs, normalised to -1 through +1, with the sample rate and samples-per-pixel alongside. That is the format wavesurfer.js and peaks.js read.

Serving that file next to the audio means a player draws its waveform on first paint instead of after downloading and decoding the whole track. On a one hour podcast episode that is the difference between an instant render and several seconds of blank space.

The envelope

Peaks are read progressively while the file streams, so the drawing appears before the whole file has been scanned and sharpens as it finishes. Each bar takes the lowest and highest sample in the slice it covers, which is what keeps a single transient visible instead of averaging it into the surrounding level.

Sizing

Very wide canvases with narrow bars produce a lot of shapes. A 4000px image with 1px bars and no gap is 4000 rectangles in the SVG, which most editors handle but some older ones do not. Widen the bars or add a gap if the file needs to stay small.

Frequently Asked Questions

A waveform drawing of the whole file as a PNG or an SVG, plus the peak envelope as JSON. It reads WAV, MP3, M4A, AAC, Ogg, Opus, FLAC, AIFF, and WebM audio.

Audio players such as wavesurfer.js and peaks.js can take a precomputed envelope instead of decoding the file to draw it. Handing them this file makes a player render immediately rather than after the download and decode.

So the drawing can sit on whatever colour the page or video already uses. Switch the background control to a solid colour if you need one baked in.

It scales the envelope for display only. A quiet recording draws as a flat line at true scale, and amplifying it fills the canvas without touching the audio. Peaks stay clamped to the edge of the image.

The canvas width divided by the bar width plus the gap. A 1200px canvas with 3px bars and a 1px gap gives 300 bars, and the envelope is measured at that resolution rather than resampled from a fixed one.

Explore Our Tools

Browse all tools