Spectral Split - AI Stem Separation

Spectral Split is a modern web application that allows you to easily separate vocals, drums, bass, and other instruments from audio files.

It uses the free, in-browser HTDemucs AI model via demucs-web and onnxruntime-web. This means audio processing and stem separation are performed entirely on your device for complete privacy and require no API keys or backend processing fees.

Features

• Local AI Inference: Stem separation runs completely in the browser utilizing WebAssembly (WASM) and WebGPU acceleration.
• Privacy First: Your audio files are never uploaded to a backend server.
• 4-Stem Output: Splits audio into Vocals, Drums, Bass, and Other.
• Modern UI: Sleek, responsive interface built with React and Tailwind CSS.
• Free to Use: Fully free with no API limits.

Prerequisites

• Node.js (v18 or higher recommended)
• npm or yarn

Setup Instructions

1. Clone the repository:

   git clone <repository_url>
   cd <project_directory>

2. Install dependencies:

   npm install

   Note: Ensure all dependencies, particularly demucs-web and onnxruntime-web are installed successfully.

3. Start the development server:

   npm run dev

   The application will be accessible at http://localhost:3000.

Building for Production

1. Build the application:

   npm run build

   This will compile both the Vite frontend assets into the dist/ directory and bundle the Node.js Express backend into dist/server.js.

2. Start the production server:

   npm start

Note on Cross-Origin Isolation

Because the application relies on SharedArrayBuffer to support multi-threaded WASM and provide maximum performance via onnxruntime-web, the custom Express server (server.ts) automatically configures the application with strict Cross-Origin Isolation headers:

Cross-Origin-Opener-Policy: same-origin
Cross-Origin-Embedder-Policy: require-corp

Using the included backend server ensures that the necessary environment is provided to the browser to execute the heavy AI workloads.

Technologies Used

• React: Frontend framework
• Vite: Build tool
• Express.js: Lightweight backend to serve HTML assets and required headers
• demucs-web: Browser port of the HTDemucs stem separation model
• onnxruntime-web: Underlying ML runtime
• Tailwind CSS: Styling
• Lucide React: Icons