How to generate an audio waveform image — free, no upload
- Step 1Drop your audio file onto the tool — Add a single audio file (MP3, WAV, FLAC, M4A/AAC, OGG, or Opus). Decoding uses the browser's native
decodeAudioData, so the formats your browser supports will load. The file stays on your device. - Step 2Set the width and height — Width accepts 320–3840 px (step 80); height accepts 80–1080 px (step 20). The width sets how many sample-columns are drawn — roughly one peak column per pixel — so a wider canvas shows more detail on long audio. Default is 1600×320.
- Step 3Choose a style — Bars and filled both draw a vertical line per column from the column's minimum to maximum sample (a solid amplitude envelope). Line draws a single peak line through the vertical centre for a thinner, oscilloscope-like look.
- Step 4Pick wave and background colours — Use the Color picker for the wave and the Background picker for the canvas fill. For a transparent-looking design asset, set the background to your page colour; the export itself is an opaque PNG/JPG (the background is filled before drawing).
- Step 5Choose PNG or JPG — PNG is lossless and ignores the quality slider. JPG exposes a quality slider (0.1–1, default 0.9) and produces a smaller file — useful for wide social images where PNG would be large.
- Step 6Generate and download — The image renders on the canvas and downloads as
<yourfile>-waveform.png(or.jpg). No audio file is produced — this tool outputs an image only.
Every real waveform control
The complete option surface as built in the tool's client and processor. There are no other controls — no SVG, no radial mode, no per-channel split.
| Control | Accepted values | Default | What it does |
|---|---|---|---|
| Width | 320–3840 px (step 80) | 1600 | Number of horizontal peak columns. One column ≈ one pixel of decoded-sample peaks; wider = more detail on long tracks |
| Height | 80–1080 px (step 20) | 320 | Canvas height. Amplitude is scaled to half the height around the vertical centre line |
| Style | bars, line, filled | bars | bars / filled = min-to-max vertical fill per column; line = single peak line through the centre |
| Color | Any hex colour | #00e5ff (cyan) | Stroke (line) and fill (bars/filled) colour of the wave |
| Background | Any hex colour | #0a0a14 (near-black) | Filled across the whole canvas before the wave is drawn |
| Image format | png, jpg | png | PNG = lossless; JPG = smaller, lossy |
| JPG quality | 0.1–1 (step 0.05) | 0.9 | Only shown / honoured for JPG; PNG ignores it |
Style rendering, decoded
How each style is actually drawn from the decoded mono samples. Bars and filled share the same fill code path.
| Style | Drawing method | Best for |
|---|---|---|
bars | Per column, finds min and max sample; fills a 1-px-wide rectangle from max down to min (clamped to at least 1 px tall) | Classic podcast/audiogram amplitude envelope |
filled | Identical min/max fill to bars in the current build — produces the same solid envelope | When you want the solid-block look (same result as bars) |
line | Per column, takes the largest-magnitude sample and plots one point; connects points into a single stroked path through the centre | Thin, oscilloscope-style wave; lighter visual weight |
Tier limits (audio family)
From lib/tier-limits.ts. Limits are per file; the waveform generator processes one file at a time. Duration is the practical ceiling for very long tracks.
| Tier | Max file size | Max duration / file | Files at once |
|---|---|---|---|
| Free | 50 MB | 30 min | 1 |
| Pro | 200 MB | 120 min | 10 |
| Pro-media | 100 GB | Unlimited | 100 |
| Developer | 100 GB | Unlimited | 100 |
Cookbook
Concrete recipes for common waveform sizes and looks. Each shows the settings to enter; the output is always an image file named <source>-waveform.png or .jpg.
Wide audiogram strip for social
A short clip rendered wide and short so the peaks read clearly in a social feed. Use JPG to keep the file small for upload.
Input: clip.mp3 (45 s) Width: 1600 Height: 400 Style: bars Color: #00e5ff Background: #0a0a14 Format: jpg (quality 0.9) Output: clip-waveform.jpg (1600x400, ~one peak column per pixel)
Thin line wave for a doc header
The line style gives a lighter, oscilloscope-like wave that sits well above body text in developer docs or a README.
Input: sample.wav (12 s) Width: 1200 Height: 160 Style: line Color: #111827 (dark ink) Background: #ffffff (white) Format: png Output: sample-waveform.png (1200x160, single peak line)
Max-width render for a long track
On a long track, a narrow canvas crushes thousands of samples into each column and the wave becomes a solid block. Render at the maximum width so detail survives.
Input: episode.mp3 (52 min) Width: 3840 (maximum) Height: 320 Style: bars Format: png Why: samples-per-column = floor(totalSamples / width). At width 3840 each column still averages many samples, but peaks stay visible; at width 320 they would not.
Brand-coloured waveform
Match your brand by setting the wave and background colours directly. Any hex value works in the colour pickers.
Input: jingle.flac (8 s) Width: 2000 Height: 500 Style: filled Color: #ff5a36 (brand orange) Background: #fff7ed (cream) Format: png Output: jingle-waveform.png (brand orange on cream)
Smaller export with JPG quality
When a wide PNG is too heavy, switch to JPG and lower the quality slider. PNG ignores quality entirely, so the only lever for size is the format itself.
Same render at width 3000, height 600: PNG -> larger, lossless JPG quality 0.9 -> noticeably smaller, near-identical look JPG quality 0.5 -> smallest, soft edges on thin lines Pick JPG 0.8-0.9 for social; PNG for print/design.
Edge cases and what actually happens
Browser can't decode the audio codec
Decode errorDecoding uses the browser's native decodeAudioData. If the browser lacks a codec for the file (some exotic or DRM-protected formats), decoding throws and no image is produced. Convert to a widely supported format first — e.g. with mp3-to-wav or m4a-to-mp3 — then generate the waveform.
Stereo file rendered as one wave
By designThe generator down-mixes all channels to mono before drawing, so a stereo file produces a single combined waveform, not left/right lanes. There is no per-channel waveform option. To work with channels separately, split first with channel-splitter.
Long track at a narrow width looks like a solid block
ExpectedColumns = width, and each column folds floor(samples / width) samples into a single min/max. A 50-minute track at width 320 packs millions of samples per column, so peaks fill the canvas. Increase width (up to 3840) for visible detail on long audio.
Asked for SVG output
Not supportedThe tool exports raster images only — PNG (lossless) or JPG (lossy). There is no SVG export despite what some older copy implies; the wave is rasterised to a canvas. For a scalable look, render PNG at a large width and downscale in your design tool.
Asked for a circular / radial waveform
Not supportedOnly three linear styles exist — bars, line, and filled. There is no radial or circular mode and no inner/outer radius control. Plan your design around a horizontal waveform.
Quality slider doesn't change the PNG
By designThe JPG-quality slider only affects JPG output. PNG is lossless and ignores quality — the in-app hint says exactly this. To make a file smaller, switch the format to JPG and lower quality, or reduce width/height.
Background looks opaque, not transparent
ExpectedThe canvas is filled with the background colour before the wave is drawn, so exports are opaque. There is no transparent-PNG (alpha) option. Set the background to match where you'll place the image, or knock it out later in an editor.
File over the tier size or duration limit
RejectedFree is capped at 50 MB and 30 minutes per file; Pro at 200 MB and 120 minutes. Files past your tier's size or duration limit are rejected before decoding. Trim a long file with audio-trimmer or upgrade for the higher ceilings.
Multiple files dropped at once on Free
RejectedFree processes 1 file at a time; this tool does not batch on Free. Pro allows up to 10 files in the audio family. On Free, generate waveforms one file at a time.
Frequently asked questions
Is it really free with no watermark?
Yes. The waveform is generated locally in your browser and exported straight from the canvas — there is no watermark and no account required. Tier limits apply to file size and duration, not to the image itself.
Does my audio get uploaded?
No. The file is decoded with the Web Audio API and drawn on an HTML canvas entirely on your device. No audio is sent to a server and no audio file is created — the only output is the image you download.
What styles can I choose?
Three: bars, line, and filled. Bars and filled both draw a min-to-max vertical fill per column (a solid amplitude envelope); line draws a single peak line through the centre. There are no other modes.
Can I export an SVG?
No. Output is PNG (lossless) or JPG (lossy). The wave is rasterised on a canvas, so there is no vector/SVG export. For a crisp result, render a large PNG and scale down.
Can I make a circular or radial waveform?
No. Only the three linear styles exist and there is no radius control. The waveform is always horizontal.
What's the maximum image size?
Width up to 3840 px and height up to 1080 px. Minimums are 320×80. Width controls horizontal detail, so use a wide canvas for long tracks.
Why does the quality slider do nothing?
PNG is lossless and ignores quality. The slider (0.1–1, default 0.9) only applies when the format is JPG. Switch to JPG to use it.
Will it render left and right channels separately?
No. All channels are down-mixed to mono before drawing, so you get one combined waveform. Use channel-splitter first if you need per-channel images.
What audio formats can I load?
Whatever your browser can decode natively — typically MP3, WAV, FLAC, M4A/AAC, OGG, and Opus in modern browsers. If a file won't decode, convert it first with a tool like wav-to-mp3 or m4a-to-mp3.
Does generating a waveform change my audio file?
No. The tool only reads samples to draw an image; it never re-encodes or writes a new audio file. Your source file is untouched.
How long an audio file can I use?
Free allows up to 30 minutes (and 50 MB); Pro allows up to 120 minutes (and 200 MB). Pro-media and Developer remove the duration cap. Trim longer files with audio-trimmer if needed.
What's the difference between this and the spectrum analyzer?
This tool shows amplitude over time (loudness shape). The spectrum analyzer shows frequency content as a spectrogram. Use the waveform for visuals and the spectrogram for analysing pitch/harmonics.
Privacy first
Every JAD Audio tool runs entirely in your browser via FFmpeg (WebAssembly) and RNNoise. Your audio files never leave your device — verified by zero outbound network requests during processing.