OBI

The Sonic Search Engine
Shazam for producers — search for sounds the way you hear them.

About • Features • Architecture • Tech Stack • Getting Started • Contributing • License

---

About

OBI is an audio-similarity search engine built for music producers, sound designers, and sample hunters. Instead of browsing through endless folders or typing keywords into a traditional search bar, OBI lets you find sounds by describing a vibe, uploading a clip, or recording a snippet straight from your mic.

Think Shazam, but for producers — you feed it audio DNA and it finds you the sounds you're hearing in your head.

Features

Multi-Modal Search — Search three ways from one interface: type a vibe ("dusty jazz drums from the 70s"), upload a .wav/.mp3, or record a snippet directly in-browser.

Custom Waveform Player — Hand-built SVG audio player with 48-bar visualization, gold fill progress tracking, and click-to-seek.

Cinematic Scan Animation — Full-screen overlay with expanding ripple rings, counter-rotating arcs, a breathing visualizer orb, and phased status text on a 3.2-second choreography.

ML Embedding Pipeline — MFCC-based audio fingerprinting converts any sound into a 128-dimensional vector for cosine similarity search via Qdrant.

Architecture

graph TD
    subgraph Frontend ["Frontend — Next.js 16"]
        UI[page.tsx]
        PC[ParticleCanvas]
        SO[ScanningOverlay]
        AP[AudioPlayer]
        AM[AuthModal]
        PP[profile/page.tsx]
        VK[VibeKnob]
        UI --> PC & SO & AP & AM
        PP --> VK
    end

    subgraph Backend ["Backend — FastAPI"]
        MAIN[main.py]
        ER[embed router]
        ES[embeddings service]
        SS[search service]
        ST[storage service]
        MAIN --> ER
        ER --> ES & SS & ST
    end

    subgraph ML ["ML Pipeline — Python"]
        EMB[embed.py — MFCC → 128-d vector]
        IDX[index_seed_data.py]
        EVAL[evaluate.py]
    end

    QD[(Qdrant Vector DB)]

    Frontend -- "POST /embed" --> Backend
    Backend --> ML
    ML --> QD

    style Frontend fill:#0d0d0d,stroke:#d4af37,stroke-width:2px,color:#fff
    style Backend fill:#0d0d0d,stroke:#d4af37,stroke-width:2px,color:#fff
    style ML fill:#0d0d0d,stroke:#d4af37,stroke-width:2px,color:#fff
    style QD fill:#1a1a1a,stroke:#d4af37,stroke-width:2px,color:#d4af37

Loading

Tech Stack

Layer	Technology	Purpose
Frontend	Next.js 16, React 19, TypeScript	App Router, SSR, type-safe UI
Styling	Tailwind CSS v4	Utility-first styling
Animation	Framer Motion 12	Page transitions, scanning overlay, orb effects
Audio	Custom SVG + Canvas	Waveform rendering and particle system
Backend	Python, FastAPI	REST API, audio processing orchestration
ML	librosa, MFCC → CLAP	Audio feature extraction and embedding
Vector DB	Qdrant	High-speed cosine similarity search
Storage	Supabase	Audio file hosting
Hosting	Vercel, Modal, Railway	Serverless deployment

Getting Started

Prerequisites

• Node.js ≥ 20
• Python ≥ 3.10
• pnpm (recommended) or npm

Frontend

cd frontend
pnpm install
pnpm dev

Runs at http://localhost:3000.

Backend

cd backend
python -m venv venv
source venv/bin/activate   # Windows: venv\Scripts\activate
pip install -r requirements.txt
uvicorn app.main:app --reload

API at http://localhost:8000 — health check: GET /health.

ML Pipeline

cd ml
pip install -r requirements.txt

python embed.py path/to/audio.wav        # Embed a single file
python index_seed_data.py                # Index seed data into Qdrant
python evaluate.py path/to/query.wav     # Evaluate search quality

Contributing

Contributions are welcome — read the Contributing Guide before opening a PR.

License

MIT — see LICENSE for details.