Audio waveform generator for SVG and PNG

What this audio waveform generator measures

A waveform is a map of amplitude over time. The left edge is the beginning of the audio, the right edge is the end, and the height at each position shows how far the decoded signal moved from silence. This audio waveform generator reads the samples that your browser decodes from the actual file. It is not a decorative collection of random bars and it does not draw a shape from the filename, the track length or an online catalog.

Each exported position covers one consecutive time window. The generator keeps the largest absolute sample in that window across every channel. That choice is important: averaging a thousand samples can make a single sharp click almost disappear, even though the click is exactly the defect or drum transient someone needs to see. Peak sampling preserves it. The receipt reports how many windows were measured, while the SVG description explains that taller shapes are louder peaks.

Choose bars, a filled silhouette, or an outline

Bars make individual time windows easy to distinguish and work well for podcast cards, presentation slides and article illustrations. The filled style joins the same measurements into one continuous silhouette, which is useful when the waveform needs to read at a small size. Outline draws the upper and lower peak boundaries without filling the center. These are three renderings of the same amplitude data; changing style never reinterprets the audio or runs another decoder.

Set an exact wave color and an exact background color, or remove the background entirely. Transparency exists in both outputs. The SVG simply omits its background rectangle, and the PNG keeps transparent pixels when the browser draws that SVG onto its canvas. A transparent file is convenient for a layout editor, but a chosen background is safer when the image will be pasted into software that replaces transparency with black or white without asking.

SVG for scaling, PNG for fixed pixels

The SVG export stores shapes and coordinates, so it remains sharp on a small web card, a retina display or a printed poster. Its width and height establish an aspect ratio and an editing canvas, not a resolution ceiling. The PNG export is different: it contains exactly the pixel dimensions entered above. A 1200 by 400 setting produces a real 1200 by 400 image, which is why the tool states those dimensions before the files are prepared instead of offering vague small, medium and large labels.

For a web page, SVG is usually the smaller and more adaptable answer. Use PNG when a social platform, document editor or publishing system refuses SVG, or when you need one known raster size. Neither export contains playable sound. If the visual needs a still from moving footage instead, the video frame extractor saves the decoded source frame at full resolution rather than turning its soundtrack into a graph.

Why format support follows your browser

WAV and MP3 are the broadest choices. M4A and AAC support depends on the codecs available to the browser and operating system; Ogg and WebM can differ between Safari and Chromium; FLAC and AIFF also vary on older devices. The page first reads signature bytes such as RIFF…WAVE, ID3, OggS or fLaC instead of believing an extension. That detects a renamed PDF or image and reports an extension that disagrees with its container. It still lets the real Web Audio decoder decide whether an unfamiliar codec works, because a small signature table cannot honestly know what your particular device can decode.

Decoding can use much more memory than the compressed file on disk. For that reason the page shows the shared large-file advice before the Create waveform button. It never rejects a file because of size. You see the cost first, decide whether to close other tabs, and then ask the browser to proceed. Once measured, changing colors, styles or dimensions reuses the peak series already in memory rather than reading the file again.

A still waveform is not an animated audiogram

This tool has a deliberately narrow output promise: one accurate still waveform as SVG and PNG. It does not animate a playhead, combine cover art and captions, create an MP4, fetch a Spotify URL or ask for microphone access. Those jobs require a timeline and a video renderer, and pretending they are a color option would make this page slower and less truthful. If the source itself is video and the destination specifically requires an image animation, use the video-to-GIF converter; remember that GIF drops all audio.

A waveform can also show where a spoken recording has long empty runs, but it does not edit them. When the job is to shorten those pauses and keep a playable audio file, the audio silence remover decodes WAV or MP3 and exports a new MP3 locally, with the threshold and retained padding exposed instead of guessed.

The audio and the exported image stay local

Selection gives this tab a local File object. Header sniffing reads its first few bytes, Web Audio decodes the complete track in browser memory, and the peak sampler walks those decoded arrays. SVG is assembled as text. PNG is drawn from that local SVG into a canvas. There is no upload endpoint, external font, waveform service, analytics beacon or third-party asset in the path. The download links point to temporary blob URLs that disappear when the page is reloaded or the file is replaced.

You do not have to trust the tagline. Open developer tools and follow the exact checks in the guide to verifying local file processing. A run should request only the page’s own code and fonts; selecting and decoding audio adds no network request carrying the file. That boundary also explains why codec support belongs to your browser rather than to a hidden conversion server.