Bars: symmetric columns where height represents amplitude — the most recognizable style used in audio players. Line: continuous trace connecting peaks — a smoother, more organic look. Mirror: the waveform is reflected above and below the center axis — a symmetric visual effect popular in podcast and video visualizations.
Audio Waveform Generator
Visualize and export your audio waveform as PNG with full control over style, colors and dimensions.
How waveforms are generated and where they are used
A waveform is the visual representation of an audio signal's amplitude over time. Each vertical point represents the maximum (peak) or average (RMS) value of the samples in a time window. This tool decodes the audio with the Web Audio API, extracts amplitude data at N equally spaced points across the duration, and renders the image with Canvas 2D. The result can be exported as PNG for use in album art, video thumbnails, social posts, or any visual context. Raw data can also be exported as JSON for programmatic use.
Load, configure, and export
- Upload your audio file. The waveform is rendered with default settings.
- Adjust style (bars, line, mirror), colors, dimensions, and number of points.
- Click Export PNG to download the image — or Export JSON for raw data.
Sources and references for this tool
These references help contextualize formulas, standards, APIs and limitations used on this page. They do not replace professional validation when a result has legal, financial, medical or operational impact.
- Canvas API — 2D ContextMDN Web Docs — Complete Canvas 2D context reference — used to render the waveform image.
- AudioBuffer.getChannelData() — Web APIsMDN Web Docs — Method returning raw PCM data for a channel — foundation for waveform data extraction.
- HTMLCanvasElement.toBlob() — Web APIsMDN Web Docs — API used to export the canvas as PNG.