MVP Granular Sampler

A granular synthesis sampler built with Rust (WASM), React, PixiJS, and AudioWorklet.

Project Structure

BkBkD/
├── audio-engine/          # Rust WASM module for audio processing
│   ├── src/
│   │   ├── granular/     # Granular synthesis module
│   │   └── lib.rs        # Main library file
│   └── Cargo.toml
│
├── frontend/              # React + Vite + TypeScript frontend
│   ├── src/
│   │   ├── components/    # React components
│   │   ├── wasm/         # WASM initialization
│   │   ├── worklets/     # AudioWorklet processors
│   │   ├── store/        # Zustand state management
│   │   └── utils/        # Utility functions
│   └── package.json
│
└── package.json           # Root workspace scripts

Prerequisites

• Node.js (v20.19.0 or >=22.12.0 recommended)
• pnpm (install with npm install -g pnpm or see https://pnpm.io/installation)
• Rust (install from https://rustup.rs/)
• wasm-pack (install with cargo install wasm-pack)

Setup Instructions

1. Install Dependencies

# Install frontend dependencies
pnpm run install:all

# Or manually:
cd frontend && pnpm install

2. Build WASM Module

# Build the Rust WASM module
pnpm run build:wasm

# Or manually:
cd audio-engine && wasm-pack build --target web

This will create the WASM package in audio-engine/pkg/ which the frontend will import.

3. Run Development Server

# Start the Vite dev server
pnpm run dev

# Or manually:
cd frontend && pnpm run dev

The application will be available at http://localhost:5173 (or the port Vite assigns).

Usage

1. Load Audio: Click "Select Audio File" to load an audio file
2. Adjust Parameters:
   • Grain Size: Size of each grain in samples (128-4096)
   • Density: Number of grains per input length (1-100)
3. Process: Audio is automatically processed when parameters change
4. Play: Click "Play Processed" to hear the granular synthesis result
5. Visualize: The waveform is displayed below the controls

Build for Production

# Build everything
pnpm run build

# This will:
# 1. Build WASM module (audio-engine/pkg/)
# 2. Build frontend (frontend/dist/)

Architecture

Audio Engine (Rust/WASM)

• Modular Structure: Each audio processing algorithm is in its own module
• Granular Module: First module implementing granular synthesis
• WASM Bindings: Exported functions are accessible from JavaScript

Frontend (React/TypeScript)

• State Management: Zustand store for global state
• Audio Processing: WASM functions for granular synthesis
• Visualization: PixiJS for real-time waveform rendering
• Real-time Processing: AudioWorklet support (worklet in public/)

Development

Adding New Audio Modules

1. Create a new module in audio-engine/src/ (e.g., reverb/)
2. Add mod reverb; to audio-engine/src/lib.rs
3. Export functions with #[wasm_bindgen]
4. Import and use in frontend/src/wasm/index.ts

Project Structure Notes

• The audio-engine/pkg/ directory is generated by wasm-pack and should not be committed
• AudioWorklet files need to be in public/ to be accessible at runtime
• WASM modules are loaded asynchronously and must be initialized before use

Troubleshooting

WASM Module Not Loading

• Ensure wasm-pack build --target web has been run
• Check browser console for initialization errors
• Verify CORS headers in Vite config (Cross-Origin-Embedder-Policy)

AudioWorklet Issues

• Ensure worklet file is in public/ directory
• Check browser support for AudioWorklet
• Verify AudioContext is created with user interaction

License

MIT