feat: audio upload + AI-assisted tempo map generation
Users can now upload any audio file to generate a CTP tempo map:
BPM detection (lib/analysis/bpm-detect.ts):
- Runs entirely client-side via Web Audio API — audio is never uploaded
- Decodes any browser-supported format (MP3, WAV, AAC, OGG, FLAC, M4A)
- Energy envelope → onset strength → autocorrelation over 55–210 BPM range
- Returns BPM, normalised confidence score, duration, and optional half-time BPM
for songs where a double-time pulse is detected
AI CTP generation (lib/analysis/ai-ctp.ts):
- Calls Claude (claude-opus-4-6) with adaptive thinking + structured JSON output
- System prompt explains CTP rules and section layout conventions
- Claude uses knowledge of well-known songs to produce accurate section maps;
falls back to a sensible generic structure for unknown tracks
- Only BPM + duration + optional metadata is sent to the server (no audio data)
API route (app/api/analyze/route.ts):
- POST /api/analyze accepts { bpm, duration, title?, artist?, mbid?, contributed_by? }
- Validates input, calls generateCTPWithAI, runs CTP schema validation
- Returns { ctp, warnings } — warnings are surfaced in the UI rather than 500-ing
UI (components/TempoAnalyzer.tsx, app/(web)/analyze/page.tsx):
- Drag-and-drop or browse file upload
- Shows BPM, confidence, duration after detection
- Half-time toggle when double-time is detected
- Metadata form: title, artist, MusicBrainz ID, contributor name
(filename parsed into artist/title as a convenience default)
- AI generation with streaming-style progress states
- Sections review via TempoMapEditor
- Download .ctp.json or submit directly to the database
Also: added @anthropic-ai/sdk to package.json, ANTHROPIC_API_KEY to .env.example,
updated next.config.mjs serverComponentsExternalPackages, added Analyze nav link.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
50
app/(web)/analyze/page.tsx
Normal file
50
app/(web)/analyze/page.tsx
Normal file
@@ -0,0 +1,50 @@
|
||||
import type { Metadata } from "next";
|
||||
import TempoAnalyzer from "@/components/TempoAnalyzer";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Analyze Audio",
|
||||
description:
|
||||
"Upload an audio file, detect the tempo, and generate a CTP tempo map with AI assistance.",
|
||||
};
|
||||
|
||||
export default function AnalyzePage() {
|
||||
return (
|
||||
<div>
|
||||
<div className="mb-8">
|
||||
<p className="text-sm text-zinc-500 uppercase tracking-widest mb-2">
|
||||
Tempo Analysis
|
||||
</p>
|
||||
<h1 className="text-3xl font-bold">Generate a Tempo Map</h1>
|
||||
<p className="mt-2 text-zinc-400 max-w-xl">
|
||||
Upload your audio file. The app detects the BPM in your browser, then
|
||||
uses AI to generate a complete{" "}
|
||||
<abbr title="Click Track Protocol">CTP</abbr> tempo map — including
|
||||
sections, time signatures, and any tempo changes.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="mb-6 rounded-lg border border-zinc-800 bg-zinc-900/40 px-5 py-4 text-sm text-zinc-500 space-y-1">
|
||||
<p>
|
||||
<span className="text-zinc-300 font-medium">How it works:</span>
|
||||
</p>
|
||||
<ol className="list-decimal pl-5 space-y-1">
|
||||
<li>Drop or select any audio file — MP3, WAV, AAC, OGG, FLAC, M4A.</li>
|
||||
<li>
|
||||
BPM is detected locally in your browser using the Web Audio API.
|
||||
Your audio is <strong className="text-zinc-400">never uploaded</strong>.
|
||||
</li>
|
||||
<li>
|
||||
Only the detected BPM, duration, and any metadata you provide are
|
||||
sent to the server for AI generation.
|
||||
</li>
|
||||
<li>
|
||||
Claude analyses the song structure and returns a draft CTP document.
|
||||
Always verify it against the recording.
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<TempoAnalyzer />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user