Skip to main content
L
Loopaloo
Buy Us a Coffee
All ToolsImage ProcessingAudio ProcessingVideo ProcessingDocument & TextPDF ToolsCSV & Data AnalysisConverters & EncodersWeb ToolsMath & ScienceGames
Guides & BlogAboutContact
Buy Us a Coffee
L
Loopaloo

Free online tools for developers, designers, and content creators. Your files are processed in your browser and are never uploaded - no accounts required. A few network utilities (like What's My IP and Currency Converter) call public APIs to do their job and say so on their pages.

support@loopaloo.com

Tool Categories

  • Image Tools
  • Audio Tools
  • Video Tools
  • Document & Text
  • PDF Tools
  • CSV & Data
  • Converters
  • Web Tools
  • Math & Science
  • Games

Company

  • About Us
  • Contact
  • Blog
  • FAQ

Legal

  • Privacy Policy
  • Terms of Service
  • Disclaimer

Support

Buy Us a Coffee

© 2026 Loopaloo. All rights reserved. Built with privacy in mind.

Privacy|Terms|Disclaimer
  1. Home
  2. Audio Processing
  3. Audio Waveform Generator
Add to favorites

Audio Waveform Generator

Turn audio into a waveform image in five styles, exported as PNG or real vector SVG. Reads every channel, shows true level in dBFS, and redraws correctly at any size.

Audio processed on your deviceMore audio processingJump to full guide

Initializing in your browser…

You might also like

Audio Trimmer & Cutter

Cut a region out of any audio file, exact to the sample and measured at zero milliseconds of error. Waveform handles, real keyboard shortcuts, click-free cut fades, and WAV or MP3 output that matches its extension.

Audio Merger & Joiner

Join clips end to end or stack them on one timeline, with an equal-power crossfade that holds the level through the join, BS.1770 loudness matching between files, and the merged result measured before you download it.

Audio Speed Changer

Change tempo from 0.25x to 4x with WSOLA, holding pitch to within half a cent, or let pitch move with it like tape. Measures the output and shows how far the pitch actually went.

Audio Waveform Generator: a worked example

You want a waveform graphic for a podcast episode page that stays sharp on any screen.

Input

episode.mp3 · mirror style · 1000x400 · transparent · export SVG
What Audio Waveform Generator produces

Output

waveform-episode.svg, one vector rect per bar, a few tens of KB

The SVG is generated from the same geometry as the on-screen canvas, so the vector file and the PNG are the same picture, and it can be resized or recoloured later without softening. The peaks come from the loudest channel in each slice, so a passage present in only one channel still appears rather than being drawn flat.

About the Audio Waveform Generator

Turn an audio file into a waveform image, as PNG or real vector SVG. Reads every channel so nothing is hidden, redraws at the right resolution whenever you change the size, and lets you choose between an honest picture of the level and a normalised one that fills the frame.

How to use

  1. 1Drop in an audio file
  2. 2Pick a style: bars, mirror, envelope, line or circular, or start from a preset
  3. 3Set the size, bar width and gradient colours
  4. 4Choose which channels to measure, and whether to normalise the level
  5. 5Export a PNG at up to 4x, or a vector SVG

Key features

  • Real vector SVG export, generated from the same geometry as the canvas
  • PNG export at one to four times the canvas size
  • Reads every channel, so content in only one channel is never drawn flat
  • Mono mix, loudest channel, left or right measurement modes
  • Optional normalisation, with the applied gain and true peak in dBFS reported
  • Peaks re-derived whenever the size changes, from an 8192 bucket cache
  • Five styles including a true minimum and maximum envelope
  • RMS overlay showing average level inside the peak outline
  • Two stop gradient, transparent background, separate played colour
  • Four presets for player bars, podcast artwork, editor envelopes and circular badges
  • Retina sharp preview, and playback with a progress overlay

Tips & best practices

  • Leave Normalise off when you want an honest picture. A normalised waveform of a quiet recording looks identical to a loud one, which is fine for artwork and misleading for anything else.
  • Use Envelope when you want to see the audio rather than decorate with it. It draws the real minimum and maximum, so DC offset and asymmetric waveforms show up instead of being folded away.
  • Turn on the RMS overlay to see dynamics. A wide gap between the RMS shape and the peak outline means a dynamic recording; the two nearly touching means it has been compressed hard.
  • Export SVG for anything that will be resized, printed, or recoloured later. It is a fraction of the size of a large PNG and stays sharp at any scale.
  • If a stereo file looks wrong, check the Channels setting. Mono mix cancels anti-phase content by design, which is correct but surprising; Loudest channel never hides anything.

Examples

  • Podcast episode artwork

    Load the episode, tap the Podcast artwork preset for a 1000 by 400 mirror style, set the gradient to your show colours and export a 2x PNG. Turn on transparency instead of a background colour if you are compositing it over a cover image.

  • A waveform for a website

    Set the Player bar preset, then export SVG. The file is a few tens of kilobytes of vector shapes rather than a bitmap, so it stays sharp on any display and can be restyled in CSS or a vector editor.

  • Checking a recording is not lopsided

    Switch to Envelope with Normalise off. Because it plots the true minimum and maximum separately rather than the absolute value, a waveform sitting off centre or leaning to one side is immediately visible.

When to use it

  • Podcast and music artwork

    Produce a waveform graphic for episode art, a video thumbnail or a social post, in the shape and colours you want.

  • Website and app assets

    Export vector SVG for a player component or a hero graphic that has to stay sharp at any size.

  • Checking a recording

    Look at the true envelope with normalisation off to see the real level, spot asymmetry, or confirm one channel is not silent.

  • Comparing dynamics

    Turn on the RMS overlay to see at a glance how much dynamic range a recording has left.

How it works

This turns an audio file into a waveform picture, and it tries hard to make that picture honest. Scanning the samples happens once, into a high resolution cache of 8192 buckets holding the minimum, maximum and RMS of each slice. Everything after that (width, bar size, style, colours, normalisation) only resamples that cache, so the controls respond instantly and, more importantly, the drawing is always re-derived at the current resolution. The previous build scanned the file once at whatever bar count happened to be current when the file loaded and never recomputed, so changing the width afterwards stretched a stale array and drew a shape that was no longer the audio.

It also reads every channel. The default measurement mode takes the loudest channel in each slice, which means content that exists only in the left or only in the right is still drawn; reading channel zero alone, which is what the old build did, renders a right-channel-only passage as a flat line. You can also pick a mono mix (what a mono speaker receives, where anti-phase material genuinely cancels), or left and right on their own. Normalisation is a switch rather than something that always happens: with it off the drawing shows the real level, so a quiet recording looks quiet and the true peak readout in dBFS tells you how quiet; with it on the loudest moment fills the canvas and the tool reports the gain it applied.

Five styles are available. Bars and Mirror are the familiar streaming player and podcast artwork looks. Envelope draws the true minimum and maximum outline, the shape an audio editor shows, which is the only style that reveals asymmetry in the waveform. Line draws two thin outlines with no fill, and Circular arranges the bars radiating from a ring. An optional RMS overlay draws the average level inside the peak envelope, which is where you can see the difference between a dynamic recording and a heavily compressed one. Colours are a two stop gradient with a separate played colour, the background can be transparent, and four presets set sensible sizes for a player bar, podcast artwork, an editor style envelope and a circular badge.

Export writes a PNG at one to four times the canvas size, or a real vector SVG. The SVG is generated from the same geometry the canvas uses, one rect or line per bar with the gradient carried across as a definition, so it scales to any size without softening and can be edited in a vector editor. The previous build had an SVG button that only raised the message "SVG export coming soon".

Frequently asked questions

Does it export SVG?

Yes, genuinely. The SVG is built from the same geometry as the on-screen canvas, one shape per bar with the gradient carried across as a definition, so the vector file and the PNG are the same picture. It scales to any size without softening and can be edited in a vector editor.

Why does my stereo file look different depending on the Channels setting?

Because the settings measure different things. Loudest channel takes the larger of the two in each slice, so nothing is hidden. Mono mix averages them, which is what a mono speaker receives, and anti-phase content genuinely cancels there. Left and right show one channel on its own. The default is Loudest channel.

Should I turn normalisation on?

For artwork, usually yes: it scales the loudest moment to fill the frame so the shape reads well. For anything where the level matters, no: with it off the drawing shows the real amplitude and the readout gives the true peak in dBFS, so a quiet recording looks quiet. When it is on, the tool tells you how much gain it applied.

What is the RMS overlay?

RMS is the average level of each slice, which tracks loudness as you perceive it, while the outer shape is the peak. Drawing both shows dynamics: a wide gap means a recording with plenty of range, and the two shapes nearly touching means it has been compressed hard.

What does the Envelope style show that Bars does not?

Bars plot the absolute peak, so the drawing is symmetrical by construction. Envelope plots the true minimum and maximum separately, so a waveform that sits off centre or leans to one side shows up rather than being folded away.

Does changing the size redraw correctly?

Yes. The samples are scanned once into a high resolution cache, and every size change resamples that cache at the new bar count. The shape stays correct at any width, which was not true of the previous version.

Private by design

Audio is decoded and processed locally with the Web Audio API. Your files are never uploaded to a server.