Audio Waveform Image Exporter

Export publication-quality waveform images from audio files in PNG or SVG with custom styling.

Tested tool guide Tested browser tools Checked August 15, 2026

What Audio Waveform Image Exporter does and how it behaves

Load an audio file locally and this tool decodes it with the browser's Web Audio API, extracts the peak amplitude envelope, and renders it as a still image you can style before exporting to PNG or SVG. You control bar width, gap, color, background, and whether it draws as bars, a filled area, or a line. The thing people get wrong: the waveform is a downsampled peak summary fitted to your chosen image width, not a literal render of every sample, so a longer track just means each column summarizes a wider range of samples by keeping their min/max extrema, not more visible detail.

How the result is produced

Decode and extract peaks

The browser reads the audio file into memory and decodes it into raw PCM samples via decodeAudioData. Multi-channel audio is downmixed, then the sample array is divided into one segment per output pixel column; each segment's minimum and maximum amplitude become that column's peak pair, which is what actually gets drawn.

Style and export

The chosen style (bars, filled area, or line), color, background, and spacing are applied to draw either a canvas bitmap or an SVG document built from the same peak-pair data. PNG export reads the canvas back as a blob at its rendered pixel size; SVG export serializes vector shapes, so it can be rescaled afterward without blurring.

Good uses

Turning a podcast episode into a waveform teaser image for social posts
Producing a static waveform graphic to overlay on album or single artwork
Exporting a scalable SVG waveform for print materials like liner notes or merch

Limits and checks

The image shows only the peak amplitude envelope, not frequency or pitch content, so a quiet passage and true silence can look nearly identical.
Resolution is fixed at export time by the width, height, and bar settings you chose; stretching the PNG afterward blurs it, and re-exporting is the only way to change resolution.
Very long files rendered at high point density in SVG mode can produce large files with thousands of path or rect nodes, which may be slow to open in a vector editor.

Common questions

Will this work with any audio file I have?

Only with formats the browser's Web Audio API can decode - typically MP3, WAV, AAC/M4A, and OGG/Opus. Less common codecs or DRM-protected files will fail to decode, and there is no server-side fallback since everything runs locally in the browser.

Can I edit the exported SVG waveform in Illustrator or Figma?

Yes, the SVG export is real vector paths or rects, not an embedded raster, so it opens and scales cleanly in vector editors. Very dense waveforms produce one shape per pixel column though, which can mean a large number of individual nodes to manage.

References and verification

The behavioral notes were checked against the browser implementation. Standards and primary references below define the relevant format, formula, or platform behavior.