Audio Waveform Generator
Generate a visual waveform from an audio file
Updated
What is the Audio Waveform Generator?
The Audio Waveform Generator is a free, browser-based tool that converts any audio file into a beautiful, customizable waveform visualization. Upload an MP3, WAV, OGG, FLAC, AAC, M4A, or WebM file and instantly generate a visual representation of its audio amplitude over time.
Choose from four distinct waveform styles — Bars, Line, Mirror, and Filled — and fine-tune every visual detail including colors, resolution, bar dimensions, line thickness, and corner radius. A real-time canvas preview updates instantly as you adjust settings, so you can perfect the look before exporting.
Export your waveform as a high-resolution PNG or scalable SVG at any custom dimensions, making it ideal for podcast cover art, music player interfaces, video thumbnails, blog headers, and social media graphics.
Everything runs entirely in your browser using the Web Audio API and Canvas API. No audio data leaves your device, no account is required, and there are no file size restrictions beyond your browser's memory capacity. The tool supports mono and multi-channel audio, automatically mixing channels for a clean mono visualization with optional normalization and gain control.
How it works
The Audio Waveform Generator processes audio files entirely client-side through a multi-stage pipeline that decodes audio data, extracts amplitude peaks, and renders them onto an HTML Canvas.
Step 1 — Audio Decoding. When you upload a file, the browser's Web Audio API (AudioContext.decodeAudioData) reads the raw audio buffer and decodes it into uncompressed PCM sample data. This works with any browser-supported format including MP3, WAV, OGG, FLAC, AAC, M4A, WebM, and Opus.
Step 2 — Channel Mixing. If the audio has multiple channels (e.g., stereo left and right), the tool averages all channels into a single mono signal. This ensures the waveform represents the combined audio faithfully regardless of the source channel count.
Step 3 — Peak Extraction. The mono sample data is divided into a user-configurable number of segments (20 to 500). For each segment, the tool calculates the RMS (Root Mean Square) amplitude — a perceptually accurate measure that represents the effective signal level rather than just the peak sample value. This produces a smooth, visually balanced waveform even for audio with dynamic range.
Step 4 — Normalization and Gain. If normalization is enabled, all peak values are scaled so the loudest segment maps to the maximum display height, with an optional gain multiplier to boost or attenuate the visual amplitude. Without normalization, raw RMS values are scaled by the gain factor directly.
Step 5 — Canvas Rendering. The processed peaks are drawn onto an HTML5 Canvas element using device-pixel-ratio scaling for crisp rendering on high-DPI displays. Each waveform style uses a distinct drawing algorithm:
- Bars — Vertical rectangles drawn upward from the baseline with configurable width, gap, and corner radius.
- Mirror — Symmetric bars extending both upward and downward from the center, with the lower reflection rendered at 50% opacity.
- Line — A continuous stroked path connecting all peak points with configurable line thickness.
- Filled — The same path as Line, but with the area beneath filled at 25% opacity plus the stroke on top.
A time axis with auto-scaled tick marks and labels is optionally drawn below the waveform area.
Step 6 — Export. For PNG export, an offscreen Canvas is created at the user-specified dimensions, the waveform is redrawn at that resolution, and the result is converted to a PNG blob. For SVG export, the tool generates a standards-compliant SVG document with all waveform shapes, colors, and time axis elements encoded as vector markup — infinitely scalable with no quality loss.
Examples
Generate a bar-style waveform from an MP3 file
Upload an MP3 file and generate a dark-themed bar waveform visualization with 150 samples, ready for PNG export.
Create a mirror waveform from a WAV recording
Drop a WAV recording to produce a symmetric mirror waveform with a reflection effect and time axis overlay.
Render a filled area waveform from a podcast clip
Load an OGG podcast segment and generate a smooth filled area waveform with custom teal color on a dark background.
Frequently asked questions
What audio formats does the waveform generator support?
What audio formats does the waveform generator support?
The tool supports any audio format your browser can decode through the Web Audio API. This includes MP3, WAV, OGG, FLAC, AAC, M4A, WebM, and Opus. If your browser plays it, the tool can generate a waveform from it.
Is my audio file uploaded to a server?
Is my audio file uploaded to a server?
No. All audio processing happens entirely in your browser using the Web Audio API and Canvas API. No data is sent to any server, and no audio content leaves your device. Your files stay private and local.
What is the difference between the four waveform styles?
What is the difference between the four waveform styles?
Bars draws vertical rectangles rising from the bottom baseline. Line draws a continuous connected path through the peak values. Mirror creates symmetric bars extending both up and down from the center with a reflection effect on the lower half. Filled draws the same path as Line but fills the area beneath it with a semi-transparent color.
What does the Normalize toggle do?
What does the Normalize toggle do?
Normalization scales all peak amplitudes so the loudest section of the audio maps to the full display height. This ensures quiet recordings produce the same visual amplitude as loud ones. When disabled, the waveform reflects the raw relative loudness of the audio, which is useful for comparing volume levels across a recording.
What does the Gain control do?
What does the Gain control do?
The Gain slider multiplies all amplitude values by a factor between 0.1x and 3.0x. This lets you visually amplify quiet passages or attenuate loud ones without changing the underlying audio data. When combined with normalization, gain is applied after the normalization pass.
What does the Resolution (Samples) slider control?
What does the Resolution (Samples) slider control?
Resolution determines how many vertical segments the waveform is divided into. Fewer samples (e.g., 50) produce a sparse, chunky look with thick bars. More samples (e.g., 400) produce a dense, detailed waveform with thinner bars or more line points. The default of 150 works well for most use cases.
How do I export the waveform as an image?
How do I export the waveform as an image?
Once your waveform is displayed, scroll to the Export section. Set your desired Width and Height in pixels (default is 1920x400), then click either the PNG or SVG download button. PNG produces a raster image at the exact pixel dimensions specified. SVG produces a scalable vector file that looks sharp at any size.
What is the difference between PNG and SVG export?
What is the difference between PNG and SVG export?
PNG is a raster image format — it renders the waveform at a fixed pixel resolution. It is ideal for direct use in social media posts, thumbnails, and applications that require pixel-based images. SVG is a vector format — it stores the waveform as mathematical shapes that scale infinitely without quality loss. It is ideal for web design, print materials, and situations where you need to resize the waveform later.
Why does my waveform look flat or empty?
Why does my waveform look flat or empty?
This usually means the audio file is very quiet or contains long silent sections. Enable the Normalize option to scale the peaks to the full display height, and increase the Gain slider to amplify the visual amplitude. If the file is entirely silent, the waveform will correctly display as a flat line.
Can I use the generated waveform images commercially?
Can I use the generated waveform images commercially?
Yes. The waveform visualizations are generated from your own audio data and you own the output. You can use the exported PNG and SVG files in commercial projects, podcast artwork, album covers, videos, websites, and any other context without restriction.
Does the tool work with very long audio files?
Does the tool work with very long audio files?
Yes, but extremely long files (over 60 minutes) may take several seconds to decode depending on your device's processing power and available memory. A loading indicator is displayed during decoding. The waveform itself renders instantly regardless of audio length since the data is downsampled to your chosen resolution.
What does the Time Axis option do?
What does the Time Axis option do?
The Time Axis toggle adds evenly-spaced tick marks and timestamps along the bottom edge of the waveform. Tick intervals are automatically calculated based on the audio duration — for short clips you might see tenths of a second, while longer tracks show minute markers. This is useful for identifying positions in the audio visually.
Related tools
More utilities you might find handy.
Audio Trimmer
Trim and export a section of an audio file
Speech to Text
Convert speech to text live in your browser — free, private, and instant. Just click the mic and start talking, no account needed.
Subtitle SRT Viewer
Preview, inspect, and validate .srt subtitle files online with a readable cue-by-cue timeline