Audio Waveform Generator

The generator decodes your uploaded file (MP3, WAV, OGG, or anything the browser's Web Audio decodeAudioData accepts) and reads only the first (left) audio channel via getChannelData(0). It then splits that PCM data into one column per output bar, where the bar count is Math.floor(canvasWidth / (barWidth + barGap)) - so the default 800px canvas with a 3px bar and 1px gap yields exactly 200 bars. For each bin it walks every sample and keeps the single loudest absolute value (a peak via Math.abs, not an average or RMS), then normalizes the whole set by dividing by the largest peak so the tallest bar always reaches full height. Because each bar collapses thousands of samples into one peak, the result is a static loudness envelope of the track over time, not the individual oscillations of the sound wave.

Four drawing styles are genuinely implemented and switchable: Classic Bars (centered vertical bars filling 90% of canvas height), Mirror (symmetric top-and-bottom bars at 45% height each with a faint rgba(255,255,255,0.2) center line, the SoundCloud look), Line (a 2px round-capped stroked outline mirrored above and below center at 40% height), and Circular (bars radiating outward from a ring whose radius is 60% of the smaller canvas dimension). Color is a horizontal left-to-right linear gradient (createLinearGradient(0,0,width,0)) from a start color (default #3b82f6 blue) to an end color (default #8b5cf6 violet) over a solid background (default #111827). You can toggle rounded bar caps, set bar width (1-10px) and gap (0-5px), and resize the canvas from 400-1600px wide (100px steps) and 100-400px tall (50px steps).

The tool also loads the file into a hidden audio element so you can play it back and scrub via a seek slider; when 'Show progress' is enabled, bars whose index ratio is below the current playhead are repainted in the progress color (default #22c55e green), and the Line style additionally drops a filled 6px dot at the playhead x-position. Export is PNG only - the single Download PNG button calls the canvas toDataURL('image/png') and downloads a file named waveform-[timestamp].png at the exact canvas dimensions. There is no SVG export option exposed in the interface, so plan around raster output. All processing (decodeAudioData, peak extraction, canvas drawing) happens locally in the browser; nothing is uploaded.