11labs Audio Sample Generator

Next.js app for:

• generating music loops and SFX with ElevenLabs,
• processing local WAVs through the same trim/crossfade loop pipeline,
• A/B testing loop smoothness in-browser.

Requirements

• Node.js 20+
• ELEVENLABS_API_KEY in .env.local
• ffmpeg available on PATH (required for music mode MP3 -> PCM decode)

Run

npm run dev

Open http://localhost:3000.

API Routes

• POST /api/samples/generate
  • mode: "music": calls ElevenLabs music API (mp3_44100_128), decodes MP3 to PCM, trims/processes, returns WAV.
  • mode: "sfx": calls ElevenLabs sound-generation API and returns MP3.
• POST /api/samples/process
  • accepts multipart WAV upload and runs local trim/crossfade loop processing.

Loop Processing Design

All loop math is centralized in lib/audio/pcm.ts:

• computeBarFrameCount: target bar-aligned frame count.
• computeFadeFrameCount: crossfade window size in frames.
• trimToFrameCount: deterministic frame trimming.
• prepareLoopPcm: single orchestration function used by both API routes.

prepareLoopPcm behavior:

1. Compute targetFrames from (bars, bpm, sampleRate).
2. If crossfade enabled, trim to targetFrames + fadeFrames (pre-crossfade window).
3. Fold tail onto head with equal-power gains.
4. Return exactly targetFrames when sufficient input exists.

This prevents the old drift where each loop iteration was shorter by fadeFrames.

BPM and Duration Verification

For 4/4 loops, expected duration is:

duration_seconds = bars * 4 * (60 / bpm)

Example:

• 24 bars @ 120 BPM = 48.000 s
• 24 bars @ 90 BPM = 64.000 s

If you import a 48s loop and your DAW shows 64s at 120 BPM, the clip is being time-stretched/warped on import (or interpreted with a different source BPM).

Quick verification:

ffprobe -v error -show_entries stream=sample_rate,channels,duration \
  -of default=noprint_wrappers=1:nokey=0 /path/to/file.wav

Generation responses also include timing headers:

• X-Loop-Target-BPM
• X-Loop-Target-Bars
• X-Loop-Target-Duration-Seconds
• X-Loop-BPM-Source

Local Checks

npm run lint
npx tsc --noEmit
npx next build --webpack