Skip to main content

Audio waveform generator

Generate waveform and spectrogram images with zoom, markers, and PNG or SVG export.

No watermarkFree & unlimited
All processing happens in your browser. No data is sent to any server.

Turn an audio file into a waveform image you can publish. The file is decoded in your browser, the amplitude is sampled down to the width of the canvas, and the result is drawn in one of five shapes: bars, mirrored bars, a continuous line, rounded bars or a gradient fill. Twelve colour themes set the bar and background colours together, from classic blue on navy to a minimal grey on white. You can export at 800, 1200, 1920 or 3840 pixels wide, as PNG or as SVG — the SVG being vector, so it scales to any size a print layout needs. A second view renders a spectrogram instead, showing frequency content over time rather than amplitude, and exports as PNG.

Key facts about Audio waveform generator

Key facts about Audio waveform generator
Drawing methodThe decoded audio is peak-sampled to the canvas width and drawn with the Canvas 2D API; SVG export re-emits the same sampled data as vector paths
StylesBars, mirrored, line, rounded and gradient
Colour themesTwelve, including classic blue, neon green, sunset, purple, minimal, red hot, ocean, lava, aurora, midnight, warm gold and cotton candy
Export widths800 px, 1200 px, 1920 px (Full HD) and 3840 px (4K)
Export formatsPNG for the waveform and the spectrogram; SVG for the waveform only
SpectrogramA separate view drawn on its own canvas, exported as PNG with a -spectrogram suffix
ZoomThe waveform view zooms so you can render a detailed section rather than the whole file
MarkersMarkers can be placed on the timeline and appear in the rendered image
Output namingThe source filename plus -waveform.png, -waveform.svg or -spectrogram.png
Accepted inputMP3, WAV, OGG, FLAC, AAC and M4A, up to 500 MB

What happens to your file

The audio never leaves your browser and no audio file is produced at all — only an image. Your file is read into an ArrayBuffer in this tab, decoded with the browser's own decodeAudioData, and drawn onto a canvas element on this page. The PNG comes from that canvas's own toBlob call and the SVG is assembled as text from the same sampled data. No processing engine is downloaded, so once the page has loaded nothing touches the network. The exported image is a blob: URL in your own tab's memory.

About this tool

  1. 1

    Load the audio

    Drop an MP3, WAV, OGG, FLAC, AAC or M4A up to 500 MB. The waveform is drawn as soon as the file decodes.

  2. 2

    Choose a style

    Bars for a classic podcast look, mirrored for symmetry around the centre line, line for a thin oscilloscope trace, rounded for soft edges, gradient for a filled shape.

  3. 3

    Pick a theme

    Each of the twelve themes sets a bar colour and a background together. Minimal is the one with a white background if you need the image to sit on a light page.

  4. 4

    Zoom or mark if you need to

    Zoom in to render a specific section instead of the whole file, and place markers on the timeline where you want them to appear in the image.

  5. 5

    Set the resolution

    800 px for a blog inline, 1920 px for a full-width header, 3840 px for print or for an image that will be downscaled. Or export SVG and skip the decision.

  6. 6

    Export

    Download PNG or SVG. Switch to the spectrogram view first if you want frequency content over time instead of amplitude.

Specs & compatibility
Input formatsMP3, WAV, OGG, FLAC, AAC, M4A
Maximum file size500 MB
Image widths800, 1200, 1920 or 3840 pixels
Image formatsPNG (raster, waveform and spectrogram) and SVG (vector, waveform only)
TransparencyEach theme paints a solid background colour, so exports are not transparent
BrowsersChrome, Edge, Firefox and Safari 14.1+ — Web Audio and Canvas 2D only
SpeedRendering is instant once the file is decoded; decode time dominates on long files
Detail limitA waveform is peak-sampled to the pixel width, so a one-hour file at 800 px averages roughly 4.5 seconds per pixel
  • Export SVG whenever the image might be resized later. It is vector, so it stays sharp at any size and is usually far smaller than a 4K PNG.
  • The minimal theme is the only one with a white background — the other eleven are dark, which is the right choice for most audio branding but wrong on a white page.
  • A waveform of a whole podcast episode is a featureless block, because an hour squeezed into 1200 pixels averages away all the detail. Zoom into a section for anything visually interesting.
  • Mirrored and gradient styles read best at large sizes; the line style is the one that survives being made small.
  • The spectrogram view is the one that shows what is actually in the audio — hum appears as a horizontal band, a click as a vertical stripe.
  • Exports carry a solid background colour, so if you need transparency you will have to remove the background afterwards in an image editor.
  • For a waveform you can cut on rather than publish, the audio trimmer draws one with draggable edit handles.
  • Five waveform styles including mirrored and gradient
  • Twelve colour themes with matched bar and background colours
  • Export at 800, 1200, 1920 or 3840 pixels wide
  • PNG and SVG export for the waveform
  • Spectrogram view with PNG export
  • Zoom into a section before rendering
  • Timeline markers rendered into the image
  • Making a waveform header image for a podcast episode page
  • Creating cover art for a track upload that shows the shape of the music
  • Exporting an SVG waveform to place in a print layout or a poster
  • Producing a spectrogram to show where hum or hiss sits in a recording
  • Illustrating a blog post about an audio recording with the real waveform
  • Generating a visual for a social post announcing a new release
SVG if the image might ever be resized, printed or placed in a layout at an unknown size — it is vector, so it stays sharp at any scale, and for a waveform it is typically much smaller than a high-resolution PNG. PNG when you need a fixed-size raster for a platform that will not accept SVG, which covers most social networks and many podcast hosts. The spectrogram view exports PNG only, because it is a per-pixel image of frequency energy and has no meaningful vector representation.
Because the whole file is being squeezed into a few hundred or a couple of thousand pixels. A waveform image peak-samples the audio to the canvas width, so an hour-long podcast at 1200 pixels averages about three seconds of audio into each pixel — and since most speech reaches a similar peak within any three-second window, every pixel comes out roughly the same height. Zoom into a shorter section before exporting, or use a taller, wider canvas, if you want visible structure.
Not directly. Every one of the twelve themes paints a solid background colour onto the canvas before drawing the waveform, and the export captures that canvas as it is. If you need transparency, the practical routes are to pick the minimal theme, which is a grey waveform on white, and knock the white out in an image editor, or to export SVG and delete the background rectangle by hand — SVG being text, that is a one-line edit in any editor.
Frequency content over time, rather than amplitude over time. Horizontal position is still time, but vertical position is frequency and brightness is energy at that frequency. It is the view that makes problems visible: mains hum shows up as a steady horizontal line, a click as a vertical stripe across all frequencies, tape hiss as a haze across the top, and the abrupt ceiling of a low-bitrate MP3 as a hard horizontal edge where everything above it has been discarded.
No. This tool produces an image and nothing else — there is no audio output at all. Your file is decoded to read its amplitude data, drawn onto a canvas, and exported as PNG or SVG. The source file on your disk is never modified, never re-encoded and never written back. That also means it is safe to run on a master you care about: the only thing it produces is a picture, and the audio itself is untouched from the moment it is read.
No. The audio is decoded in your browser tab with the built-in decodeAudioData and drawn on a canvas element on this page. The PNG comes straight from that canvas via toBlob and the SVG is built as text from the same sampled values. No processing engine is downloaded — unlike the converter tools here, there is no ffmpeg fetch — so once the page has loaded the tool makes no network requests at all. The image exists as a blob in your tab until you save it.

Related tools

View all

Part of Audio tools that run in your browser

Updated

We use anonymous analytics to improve ToolChamp. No personal data is stored or sold. Privacy Policy