Audio Trimmer
Click or Drag & Drop Audio File (MP3/WAV)
Implementation Details
1. The Decoding Process
When a file is uploaded, the browser doesn't just "read" it; it must decode the compressed format (like MP3) into raw Pulse Code Modulation (PCM) data. We use audioContext.decodeAudioData to get the AudioBuffer.
2. Visualizing the Waveform
Drawing millions of audio samples on a small canvas would crash the browser. Our drawWaveform function uses a downsampling technique:
It divides the audio into "buckets" (one for every pixel of width).
It finds the
minandmaxpeaks in that bucket.It draws a single vertical line representing that range.
3. Selection & Trimming
Selection: We use mouse events on the canvas to track
startXandendX.The "Cut": Instead of deleting data, we use an
OfflineAudioContext. This is a non-real-time version of the audio engine that can "render" a new audio file as fast as the CPU allows.
4. Exporting as WAV
Since browsers don't have a built-in Save as MP3 function without external libraries (like LAME), this code generates a WAV file by manually constructing the 44-byte RIFF header required for audio players to recognize the file.