Building an MP3 Cutter with Real-Time Preview Player

Most online MP3 cutters force users into a frustrating trial-and-error cycle: guess where to cut, wait for processing, download, check the result, realize it's wrong, and repeat. We built something better - an MP3 cutter with instant preview playback that lets users hear their selections before committing to a cut.

This article walks through the technical implementation of our audio trimmer tool, explaining how we combined Web Audio API for instant preview with FFmpeg.wasm for final processing, and the UX decisions that transformed user experience from frustration to satisfaction.

The Problem: Traditional MP3 Cutters Are Broken

The typical user journey with most MP3 cutters looks like this:

1. Upload audio file
2. Guess where to set start and end points (no way to preview)
3. Click "Cut" and wait 10-15 seconds for processing
4. Download file
5. Open in music player to check
6. Realize the cut started too early or ended too late
7. Return to step 2 and repeat 2-4 more times

Total time: 3-5 minutes. User sentiment: frustrated.

This workflow is terrible for common use cases like creating ringtones (need exact 30-second clip), extracting TikTok samples (need precise beat drops), or trimming guitar riffs (need millisecond accuracy). Users need feedback before processing, not after.

The Solution: Instant Preview with Web Audio API

Our solution was to add a real-time preview player that lets users hear their selection instantly before cutting. Here's the improved workflow:

1. Upload audio file
2. Drag handles on waveform to select region
3. Press spacebar - instant preview playback begins
4. Adjust handles while listening (with loop enabled)
5. Press spacebar again to verify
6. Perfect selection - click "Cut Audio" once
7. Download correct file

Total time: 30-45 seconds. User sentiment: satisfied.

Architecture Overview

The tool uses a dual-processing architecture:

• Web Audio API - Handles waveform visualization and instant preview playback
• FFmpeg.wasm - Performs actual audio trimming and format conversion for download

This separation is crucial: Web Audio API provides instant feedback without any processing delay, while FFmpeg.wasm handles the heavy lifting of creating the final downloadable file.

Why Not Use Web Audio API for Everything?

Web Audio API can decode and play audio instantly, but it can't easily export trimmed audio to downloadable formats like MP3. You'd need additional encoding libraries and would face browser compatibility issues. FFmpeg.wasm gives us universal format support and high-quality encoding, but processing takes 10-15 seconds.

The solution: use both. Web Audio API for instant preview (zero delay), FFmpeg.wasm for final output (only when user is ready).

Implementation Part 1: Waveform Visualization

The visual waveform serves two purposes: it gives users a visual representation of their audio and provides the UI for selecting trim regions. We draw this using HTML5 Canvas.

Loading and Decoding Audio

async function loadAudioForWaveform(file) {
    // Create Web Audio API context
    audioContext = new (window.AudioContext || window.webkitAudioContext)();
    
    // Read file as ArrayBuffer
    const arrayBuffer = await file.arrayBuffer();
    
    // Decode audio data - this is async and fast
    audioBuffer = await audioContext.decodeAudioData(arrayBuffer);
    
    // Store duration for UI calculations
    audioDuration = audioBuffer.duration;
    
    // Set initial selection to full audio
    startTime = 0;
    endTime = audioDuration;
    
    // Draw the waveform visualization
    await drawWaveform();
}

The decodeAudioData() method is crucial here - it converts the raw audio file into an AudioBuffer containing decoded PCM (pulse-code modulation) data. This happens quickly even for large files because it's built into the browser and runs in native code.

Drawing the Waveform

async function drawWaveform() {
    const canvas = waveformCanvas;
    const ctx = canvas.getContext('2d');
    
    // Handle high-DPI displays
    const dpr = window.devicePixelRatio || 1;
    const rect = canvas.getBoundingClientRect();
    
    canvas.width = rect.width * dpr;
    canvas.height = rect.height * dpr;
    ctx.scale(dpr, dpr);
    
    const width = rect.width;
    const height = rect.height;
    
    // Get audio data from first channel
    const channelData = audioBuffer.getChannelData(0);
    
    // Downsample: one bar per pixel
    const step = Math.ceil(channelData.length / width);
    const amp = height / 2;

    ctx.fillStyle = '#4f5aed';
    
    // Draw waveform bars
    for (let i = 0; i < width; i++) {
        let min = 1.0;
        let max = -1.0;
        
        // Find min/max in this sample window
        for (let j = 0; j < step; j++) {
            const datum = channelData[(i * step) + j];
            if (datum < min) min = datum;
            if (datum > max) max = datum;
        }
        
        // Draw vertical bar representing amplitude
        const barHeight = Math.max(1, (max - min) * amp);
        ctx.fillRect(i, amp - (max * amp), 1, barHeight);
    }
}

Implementation Part 2: Draggable Selection Handles

Users select their trim region by dragging handles overlaid on the waveform. This requires mouse/touch event handling and real-time position updates.

function handleMouseMove(e) {
    if (!isDragging || !dragTarget) return;
    
    // Stop preview when adjusting - prevents confusion
    if (isPlaying) {
        stopPreview();
    }
    
    // Calculate mouse position relative to canvas
    const rect = waveformCanvas.getBoundingClientRect();
    const x = e.clientX - rect.left;
    const percent = (x / rect.width) * 100;
    const time = (percent / 100) * audioDuration;
    
    // Update start or end time with constraints
    if (dragTarget === startHandle) {
        startTime = Math.min(time, endTime - 0.1);
    } else if (dragTarget === endHandle) {
        endTime = Math.max(time, startTime + 0.1);
    }
    
    // Update visual positions and time displays
    updateHandlePositions();
    updateTimeDisplays();
}

The key detail here: we stop preview playback when the user starts dragging. This prevents confusion where the audio is playing from one position while they're adjusting handles. Users can immediately restart preview after releasing to hear their new selection.

Implementation Part 3: The Preview Player

This is where the magic happens. The preview player uses Web Audio API to play only the selected region of the audio buffer with zero processing delay.

Basic Preview Playback

async function previewSelection() {
    // Create audio context if needed
    if (!previewAudioContext) {
        previewAudioContext = new (window.AudioContext || window.webkitAudioContext)();
    }
    
    // Create buffer source - plays audio from AudioBuffer
    previewSource = previewAudioContext.createBufferSource();
    previewSource.buffer = audioBuffer;
    
    // Connect to speakers
    previewSource.connect(previewAudioContext.destination);
    
    // Calculate duration
    const duration = endTime - startTime;
    
    // Play only the selected region
    // start(when, offset, duration)
    previewSource.start(0, startTime, duration);
    
    isPlaying = true;
}

The start() method's three parameters are critical:

• when (0): Start playback immediately
• offset (startTime): Begin playing at this position in the buffer
• duration: Stop playing after this many seconds

This means we're not creating a new audio buffer or processing anything - we're just telling the browser "play this section of the already-decoded audio." That's why it's instant.

Adding Loop Functionality

Loop mode is essential for precision work. Users can enable it to continuously hear their selection while adjusting handles. Implementation is straightforward:

// Enable loop mode
previewSource.loop = loopPreviewCheck.checked;

if (previewSource.loop) {
    // Set loop points to selection boundaries
    previewSource.loopStart = startTime;
    previewSource.loopEnd = endTime;
}

// For looping, don't pass duration to start()
const playDuration = previewSource.loop ? undefined : duration;
previewSource.start(0, startTime, playDuration);

When loop is enabled and we don't pass a duration, the audio source will play from loopStart to loopEnd infinitely until manually stopped.

Playback Speed Control

Playback speed is useful for two scenarios: slowing down (0.5x-0.75x) to find precise cut points in fast music, or speeding up (1.5x-2x) to quickly scan through audio. Implementation is a single property:

// Get selected speed from dropdown
const playbackRate = parseFloat(playbackSpeedSelect.value);

// Apply speed - 0.5x to 2x range
previewSource.playbackRate.value = playbackRate;

The Web Audio API handles pitch correction automatically - slowed audio doesn't sound lower, it just plays slower while maintaining pitch. This is perfect for our use case.

Visual Progress Indicator

Users need visual feedback showing where they are during preview playback. We animate a green progress line across the selected region:

// Create progress indicator element
const progressLine = document.createElement('div');
progressLine.style.cssText = `
    position: absolute;
    left: ${startPercent}%;
    width: 3px;
    height: 100%;
    background: #10b981;
    top: 0;
    z-index: 15;
    pointer-events: none;
`;

waveformContainer.appendChild(progressLine);

// Animate from start to end position
const animation = progressLine.animate([
    { left: `${startPercent}%` },
    { left: `${endPercent}%` }
], {
    duration: duration * 1000,
    easing: 'linear'
});

// Remove when playback finishes
animation.onfinish = () => {
    progressLine.remove();
};

We use the Web Animations API (element.animate()) rather than CSS transitions because we can synchronize duration precisely with audio playback duration. The animation runs at exactly the same speed as the audio, providing perfect sync.

Implementation Part 4: Keyboard Shortcuts

Power users love keyboard shortcuts. We implemented spacebar for play/pause preview - the most natural mapping since it matches video players and DAWs.

document.addEventListener('keydown', (e) => {
    // Only trigger if not typing in an input field
    if (e.code === 'Space' && 
        e.target.tagName !== 'INPUT' && 
        e.target.tagName !== 'SELECT') {
        
        e.preventDefault(); // Don't scroll page
        
        // Only if audio is loaded
        if (audioBuffer && trimControls.style.display !== 'none') {
            if (isPlaying) {
                stopPreview();
            } else {
                previewSelection();
            }
        }
    }
});

Key details: we check that the user isn't typing in an input field (prevents triggering while entering time values), and we prevent default behavior to stop the page from scrolling when spacebar is pressed.

Implementation Part 5: Final Processing with FFmpeg.wasm

Once the user is satisfied with their preview, they click "Cut Audio" to create the downloadable file. This is where FFmpeg.wasm comes in.

// Read original audio file
const audioData = new Uint8Array(await audioFile.arrayBuffer());

// Write to FFmpeg's virtual filesystem
await ffmpeg.writeFile('input.mp3', audioData);

// Calculate trim duration
const duration = endTime - startTime;

// Build FFmpeg command for trimming
const ffmpegCommand = [
    '-i', 'input.mp3',           // Input file
    '-ss', startTime.toFixed(3),    // Start position
    '-t', duration.toFixed(3),      // Duration to extract
    '-codec:a', 'libmp3lame',   // MP3 encoder
    '-b:a', '320k',              // High quality bitrate
    'output.mp3'                 // Output file
];

// Execute trim operation
await ffmpeg.exec(ffmpegCommand);

// Read result and create download
const data = await ffmpeg.readFile('output.mp3');
const blob = new Blob([data.buffer], { type: 'audio/mpeg' });
const url = URL.createObjectURL(blob);

// Trigger download
const a = document.createElement('a');
a.href = url;
a.download = 'trimmed.mp3';
a.click();

The -ss (start seek) and -t (duration) parameters tell FFmpeg exactly which portion of the audio to extract. We use millisecond precision (.toFixed(3)) for accurate cuts.

Adding Fade Effects

Users can optionally add fade in/out effects for professional-sounding results. This uses FFmpeg's audio filter chain:

let filterComplex = '';

if (fadeInCheck.checked && fadeOutCheck.checked) {
    // Both fades: fade in for first 2s, fade out for last 2s
    const fadeOutStart = duration - 2;
    filterComplex = `afade=t=in:st=0:d=2,afade=t=out:st=${fadeOutStart}:d=2`;
} else if (fadeInCheck.checked) {
    filterComplex = `afade=t=in:st=0:d=2`;
} else if (fadeOutCheck.checked) {
    const fadeOutStart = duration - 2;
    filterComplex = `afade=t=out:st=${fadeOutStart}:d=2`;
}

// Add filter to FFmpeg command if present
if (filterComplex) {
    ffmpegCommand.push('-af', filterComplex);
}

UX Decisions and Why They Matter

1. Auto-Stop Preview on Handle Drag

When users drag handles during preview playback, we automatically stop the preview. Why? Testing showed users found it confusing to hear audio from one position while visually adjusting a different position. Stopping preview forces them to re-preview after adjusting, ensuring they hear what they're actually selecting.

2. Loop Preview Default: Off

We made loop preview opt-in rather than default. Most users want to hear the selection once to verify it's correct, then move on. Loop is there for power users who need to fine-tune exact cut points while listening repeatedly.

3. Playback Speed Default: 1x

Similarly, playback speed defaults to normal. Users who need slow or fast playback know to look for this feature, but defaulting to anything other than 1x would confuse the majority of users.

4. Visual Progress Indicator Color

We use green for the progress line (vs. the blue selection handles) to clearly differentiate "current playback position" from "selection boundaries." This prevents confusion about what the different visual elements represent.

5. Spacebar for Play/Pause

We chose spacebar because it's the universal play/pause shortcut in video players, YouTube, and DAWs. Users don't need to learn a new shortcut - muscle memory works immediately.

Performance Considerations

Waveform Rendering

Drawing waveforms can be CPU-intensive for long files. We optimize by:

• Downsampling to one bar per pixel (no point rendering more detail than visible)
• Only redrawing on window resize, not continuously
• Using requestAnimationFrame for smooth initial render

Memory Management

Audio buffers can be large (a 10-minute file at 44.1kHz is ~100MB uncompressed). We manage memory by:

• Keeping only one decoded audio buffer in memory at a time
• Cleaning up previous buffer when new file is loaded
• Stopping preview playback when user selects new file (prevents memory leaks)

FFmpeg Processing

FFmpeg.wasm processing takes 10-15 seconds for typical files. We:

• Show clear status messages ("Processing audio...")
• Disable the Cut button during processing to prevent double-submission
• Clean up input/output files from virtual filesystem after download

Real-World Results

Common Use Cases We've Observed

Analytics show users primarily use the tool for:

• Ringtones (40%): 30-40 second clips with fade effects
• TikTok/Instagram samples (30%): 15-30 second clips of beat drops or hooks
• Music sampling (15%): Extracting specific riffs or solos
• Podcast highlights (10%): Extracting shareable clips
• Other (5%): YouTube intros, sound effects, etc.

The preview player is especially valuable for the first three categories, where precision timing is critical.

Browser Compatibility

The tool works in all modern browsers:

• Web Audio API: Chrome 35+, Firefox 25+, Safari 14.1+, Edge 79+
• FFmpeg.wasm: Requires SharedArrayBuffer (same support)
• Canvas: Universal support

Mobile support works well on iOS 14.5+ and Android Chrome. Touch events are handled for handle dragging.

Future Enhancements

Potential improvements we're considering:

• Waveform zoom: Zoom in for millisecond-level precision on long files
• Multiple selections: Cut multiple regions and join them
• Snap to beat: Automatic beat detection for rhythm-accurate cuts
• Preset lengths: Quick buttons for 15s, 30s, 60s clips
• Undo/redo: Track selection history

Conclusion

Building a great audio trimmer isn't just about implementing FFmpeg correctly - it's about understanding user workflow and adding features that eliminate friction. The instant preview player transformed our tool from "functional but frustrating" to "fast and satisfying."

Key takeaways:

• Web Audio API provides instant feedback that FFmpeg.wasm alone cannot
• Visual feedback (waveforms, progress indicators) is essential for audio editing
• Keyboard shortcuts dramatically improve power user experience
• Loop and speed control enable precision that visual tools alone don't provide
• UX decisions (auto-stop on drag, sensible defaults) matter as much as technical implementation

The combination of Web Audio API for instant preview and FFmpeg.wasm for final processing gives users the best of both worlds: immediate feedback during editing and high-quality output for download.