zeroed-some/cue-web / f948892

+*.wav

+<?php

+// audio/list.php - Optional API endpoint for listing audio files

+// This provides a cleaner way to get the file list than parsing HTML

+

+header('Content-Type: application/json');

+header('Access-Control-Allow-Origin: *');

+

+// Get all WAV files in the current directory

+$files = glob('*.wav');

+

+// Sort alphabetically

+sort($files);

+

+// Return as JSON

+echo json_encode($files);

+/* css/main.css */

+

+/* Reset and Base Styles */

+* {

+    box-sizing: border-box;

+    margin: 0;

+    padding: 0;

+}

+

+body {

+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

+    background: #1a1a1a;

+    color: #fff;

+    line-height: 1.6;

+    padding: 20px;

+}

+

+/* Layout */

+.container {

+    max-width: 1200px;

+    margin: 0 auto;

+}

+

+header {

+    margin-bottom: 30px;

+}

+

+h1 {

+    font-size: 28px;

+    font-weight: 600;

+    letter-spacing: -0.5px;

+}

+

+/* Controls Section */

+.controls {

+    background: #2a2a2a;

+    padding: 24px;

+    border-radius: 12px;

+    margin-bottom: 24px;

+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);

+}

+

+.control-group {

+    display: flex;

+    gap: 12px;

+    flex-wrap: wrap;

+    margin-bottom: 16px;

+}

+

+.ir-controls {

+    display: flex;

+    align-items: center;

+    gap: 12px;

+    margin-bottom: 16px;

+}

+

+.ir-controls label {

+    font-weight: 500;

+}

+

+/* Buttons */

+.btn {

+    background: #0066ff;

+    color: white;

+    border: none;

+    padding: 10px 20px;

+    border-radius: 6px;

+    cursor: pointer;

+    font-size: 14px;

+    font-weight: 500;

+    transition: all 0.2s ease;

+}

+

+.btn:hover {

+    background: #0052cc;

+    transform: translateY(-1px);

+    box-shadow: 0 2px 8px rgba(0, 102, 255, 0.3);

+}

+

+.btn:active {

+    transform: translateY(0);

+}

+

+.btn:disabled {

+    background: #666;

+    cursor: not-allowed;

+    transform: none;

+    box-shadow: none;

+}

+

+.btn-primary {

+    background: #0066ff;

+}

+

+.btn-success {

+    background: #00a854;

+}

+

+.btn-success:hover {

+    background: #008844;

+}

+

+.btn-small {

+    padding: 6px 12px;

+    font-size: 13px;

+}

+

+/* Select */

+.select {

+    background: #333;

+    color: white;

+    border: 1px solid #555;

+    padding: 8px 12px;

+    border-radius: 6px;

+    font-size: 14px;

+    cursor: pointer;

+}

+

+.select:focus {

+    outline: none;

+    border-color: #0066ff;

+}

+

+/* Status */

+.status {

+    font-size: 14px;

+    color: #00ff00;

+    font-weight: 500;

+}

+

+/* Main Area */

+.main-area {

+    display: grid;

+    grid-template-columns: 1fr 320px;

+    gap: 24px;

+}

+

+/* Video Section */

+.video-section {

+    background: #2a2a2a;

+    border-radius: 12px;

+    overflow: hidden;

+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);

+}

+

+.video-container {

+    position: relative;

+}

+

+#videoCanvas {

+    width: 100%;

+    height: auto;

+    display: block;

+    background: #000;

+}

+

+/* Effect Zones */

+.effect-zones {

+    position: absolute;

+    top: 0;

+    left: 0;

+    width: 100%;

+    height: 48px;

+    display: flex;

+    pointer-events: none;

+    background: rgba(0, 0, 0, 0.5);

+}

+

+.zone {

+    flex: 1;

+    border-right: 1px solid rgba(255, 255, 255, 0.1);

+    display: flex;

+    align-items: center;

+    justify-content: center;

+    font-size: 12px;

+    font-weight: 500;

+    color: rgba(255, 255, 255, 0.6);

+    text-transform: capitalize;

+    transition: all 0.3s ease;

+}

+

+.zone:last-child {

+    border-right: none;

+}

+

+.zone.active {

+    background: rgba(0, 102, 255, 0.3);

+    color: #fff;

+    text-shadow: 0 0 4px rgba(0, 102, 255, 0.5);

+}

+

+/* Cue Indicator */

+.cue-indicator {

+    position: absolute;

+    top: 60px;

+    left: 50%;

+    transform: translateX(-50%);

+    background: #ff0000;

+    color: white;

+    padding: 12px 24px;

+    border-radius: 6px;

+    font-weight: bold;

+    font-size: 16px;

+    letter-spacing: 1px;

+    box-shadow: 0 4px 12px rgba(255, 0, 0, 0.4);

+    display: none;

+}

+

+.cue-indicator.active {

+    display: block;

+    animation: pulse 0.5s ease-in-out infinite;

+}

+

+@keyframes pulse {

+    0%, 100% { 

+        opacity: 1; 

+        transform: translateX(-50%) scale(1);

+    }

+    50% { 

+        opacity: 0.8; 

+        transform: translateX(-50%) scale(1.05);

+    }

+}

+

+/* Parameters Section */

+.params-section {

+    background: #2a2a2a;

+    padding: 24px;

+    border-radius: 12px;

+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);

+}

+

+.params-section h3 {

+    font-size: 18px;

+    margin-bottom: 20px;

+    font-weight: 500;

+}

+

+.params-section h3 span {

+    color: #0066ff;

+    font-weight: 600;

+}

+

+/* Parameter Visualizer */

+.param-visualizer {

+    margin-bottom: 24px;

+}

+

+.param-bar {

+    width: 100%;

+    height: 200px;

+    background: #1a1a1a;

+    border-radius: 8px;

+    position: relative;

+    overflow: hidden;

+    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);

+}

+

+.param-fill {

+    position: absolute;

+    bottom: 0;

+    width: 100%;

+    background: linear-gradient(to top, #0066ff, #00aaff);

+    border-radius: 8px 8px 0 0;

+    transition: height 0.1s ease;

+    height: 50%;

+}

+

+.param-labels {

+    display: flex;

+    justify-content: space-between;

+    margin-top: 8px;

+    font-size: 12px;

+    color: #666;

+}

+

+/* Info Boxes */

+.info-box {

+    background: #333;

+    padding: 16px;

+    border-radius: 8px;

+    margin-bottom: 16px;

+    font-size: 14px;

+}

+

+.info-box:last-child {

+    margin-bottom: 0;

+}

+

+.info-list {

+    display: grid;

+    grid-template-columns: auto 1fr;

+    gap: 8px 16px;

+}

+

+.info-list dt {

+    font-weight: 600;

+    color: #999;

+}

+

+.info-list dd {

+    color: #fff;

+    font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace;

+}

+

+/* Instructions */

+.instructions h4 {

+    font-size: 16px;

+    margin-bottom: 12px;

+    font-weight: 500;

+}

+

+.instructions ol {

+    list-style: none;

+    counter-reset: step-counter;

+}

+

+.instructions li {

+    counter-increment: step-counter;

+    position: relative;

+    padding-left: 32px;

+    margin-bottom: 8px;

+    line-height: 1.5;

+}

+

+.instructions li::before {

+    content: counter(step-counter);

+    position: absolute;

+    left: 0;

+    top: 0;

+    background: #0066ff;

+    color: white;

+    width: 24px;

+    height: 24px;

+    border-radius: 50%;

+    display: flex;

+    align-items: center;

+    justify-content: center;

+    font-size: 12px;

+    font-weight: bold;

+}

+

+/* Responsive */

+@media (max-width: 968px) {

+    .main-area {

+        grid-template-columns: 1fr;

+    }

+    

+    .params-section {

+        order: -1;

+    }

+    

+    .control-group {

+        justify-content: center;

+    }

+}

+

+@media (max-width: 640px) {

+    body {

+        padding: 12px;

+    }

+    

+    h1 {

+        font-size: 24px;

+    }

+    

+    .controls {

+        padding: 16px;

+    }

+    

+    .btn {

+        padding: 8px 16px;

+        font-size: 13px;

+    }

+}

+#!/usr/bin/env bash

+set -euo pipefail

+

+PROJECT_DIR="$(cd "$(dirname "$0")" && pwd)"

+STAMP=$(date +%Y-%m-%d-%H%M%S)

+OUT=~/builds/$STAMP

+mkdir -p "$OUT"

+

+echo "▶ Staging files..."

+rsync -az --delete --exclude deploy.sh --exclude .git \

+      "$PROJECT_DIR"/ "$OUT"/

+

+echo "▶ Publishing release..."

+rsync -az --delete "$OUT"/ /var/www/cue.musicsian.com/releases/$STAMP/

+

+echo "▶ Flipping current symlink..."

+sudo ln -nfs /var/www/cue.musicsian.com/releases/$STAMP \

+            /var/www/cue.musicsian.com/current

+

+echo "▶ Restoring SELinux labels..."

+sudo restorecon -Rv /var/www/cue.musicsian.com/releases/$STAMP >/dev/null

+

+echo "▶ Reloading Nginx..."

+sudo systemctl reload nginx

+

+echo "✓ Deployed $STAMP to cue.musicsian.com"

+<!DOCTYPE html>

+<html lang="en">

+<head>

+    <meta charset="UTF-8">

+    <meta name="viewport" content="width=device-width, initial-scale=1.0">

+    <title>Gesture DSP - Web Audio Port</title>

+    <link rel="stylesheet" href="css/main.css">

+</head>

+<body>

+    <div class="container">

+        <header>

+            <h1>🎵 Gesture DSP - Web Audio Port</h1>

+        </header>

+        

+        <section class="controls">

+            <div class="control-group">

+                <button id="startCamera" class="btn btn-primary">Start Camera</button>

+                <select id="audioSelect" class="select">

+                    <option value="">Select Audio File...</option>

+                    <option value="__demo__">Generated Demo</option>

+                    <option disabled>──────────</option>

+                </select>

+                <button id="loadFile" class="btn">Upload WAV</button>

+                <input type="file" id="fileInput" accept="audio/wav" hidden>

+                <button id="playPause" class="btn btn-success" disabled>Play</button>

+            </div>

+            

+            <div class="ir-controls">

+                <label for="irSelect">Impulse Response:</label>

+                <select id="irSelect" class="select">

+                    <option value="none">None</option>

+                    <option value="hall">Hall</option>

+                    <option value="room">Room</option>

+                    <option value="plate">Plate</option>

+                </select>

+                <button id="loadIR" class="btn btn-small">Load Custom IR</button>

+                <input type="file" id="irInput" accept="audio/wav" hidden>

+            </div>

+            

+            <div class="status" id="status">Ready to start...</div>

+        </section>

+        

+        <main class="main-area">

+            <section class="video-section">

+                <div class="video-container">

+                    <canvas id="videoCanvas" width="640" height="480"></canvas>

+                    <div class="effect-zones" id="effectZones"></div>

+                    <div class="cue-indicator" id="cueIndicator">CUE TRIGGERED</div>

+                </div>

+            </section>

+            

+            <aside class="params-section">

+                <h3>Current Effect: <span id="currentEffect">None</span></h3>

+                

+                <div class="param-visualizer">

+                    <div class="param-bar">

+                        <div class="param-fill" id="paramFill"></div>

+                    </div>

+                    <div class="param-labels">

+                        <span>0%</span>

+                        <span>50%</span>

+                        <span>100%</span>

+                    </div>

+                </div>

+                

+                <div class="info-box">

+                    <dl class="info-list">

+                        <dt>Parameter:</dt>

+                        <dd id="paramValue">0.50</dd>

+                        <dt>Raw Param:</dt>

+                        <dd id="rawParamValue">0.50</dd>

+                        <dt>Hand Detected:</dt>

+                        <dd id="handStatus">No</dd>

+                    </dl>

+                </div>

+                

+                <div class="info-box instructions">

+                    <h4>Instructions:</h4>

+                    <ol>

+                        <li>Hold a neon pink/orange post-it</li>

+                        <li>Move horizontally to select effect</li>

+                        <li>Hold a teal post-it with other hand</li>

+                        <li>Move teal post-it vertically for parameter</li>

+                        <li>Keep post-it in same zone for cue trigger</li>

+                    </ol>

+                </div>

+            </aside>

+        </main>

+    </div>

+

+    <script type="module" src="js/app.js"></script>

+</body>

+</html>

+// js/app.js

+import { AudioEngine } from './audio-engine.js';

+import { GestureDetector } from './gesture-detector.js';

+

+class GestureDSPApp {

+    constructor() {

+        this.audioEngine = new AudioEngine();

+        this.gestureDetector = new GestureDetector();

+        

+        this.effectHistory = [];

+        this.lastCueTime = 0;

+        this.cueActive = false;

+        

+        this.setupUI();

+        this.setupEffectZones();

+        this.setupGestureCallbacks();

+    }

+    

+    async loadAudioFileList() {

+        try {

+            // First try the API endpoint if available

+            const response = await fetch('audio/list.php');

+            if (response.ok && response.headers.get('content-type')?.includes('application/json')) {

+                const files = await response.json();

+                console.log('Audio files from API:', files);

+                this.populateAudioSelect(files);

+                return;

+            }

+        } catch (err) {

+            console.log('API endpoint error:', err);

+        }

+        

+        try {

+            // Fallback to parsing directory listing

+            const response = await fetch('audio/');

+            const text = await response.text();

+            console.log('Directory listing response:', text.substring(0, 200));

+            

+            // Parse the directory listing

+            const files = this.parseDirectoryListing(text);

+            console.log('Parsed audio files:', files);

+            

+            if (files.length > 0) {

+                this.populateAudioSelect(files);

+            } else {

+                console.log('No audio files found, using defaults');

+                this.addDefaultAudioFiles();

+            }

+        } catch (err) {

+            console.error('Could not load audio file list:', err);

+            this.addDefaultAudioFiles();

+        }

+    }

+    

+    populateAudioSelect(files) {

+        const select = document.getElementById('audioSelect');

+        files.forEach(filename => {

+            if (filename.toLowerCase().endsWith('.wav')) {

+                const option = document.createElement('option');

+                option.value = filename;

+                option.textContent = this.formatFilename(filename);

+                select.appendChild(option);

+            }

+        });

+    }

+    

+    formatFilename(filename) {

+        // Remove .wav extension and prettify

+        return filename

+            .replace(/\.wav$/i, '')

+            .replace(/[_-]/g, ' ')

+            .replace(/\b\w/g, l => l.toUpperCase());

+    }

+    

+    parseDirectoryListing(html) {

+        const files = [];

+        

+        // Try to parse Apache/Nginx directory listing

+        const linkRegex = /<a\s+href="([^"]+\.wav)"[^>]*>/gi;

+        let match;

+        while ((match = linkRegex.exec(html)) !== null) {

+            const filename = match[1];

+            if (!filename.startsWith('/') && !filename.startsWith('..')) {

+                files.push(filename);

+            }

+        }

+        

+        // If no files found, try a different pattern (JSON response)

+        if (files.length === 0) {

+            try {

+                const json = JSON.parse(html);

+                if (Array.isArray(json)) {

+                    return json.filter(f => f.endsWith('.wav'));

+                }

+            } catch (e) {

+                // Not JSON, ignore

+            }

+        }

+        

+        return files.sort();

+    }

+    

+    addDefaultAudioFiles() {

+        // Fallback list of common demo files

+        const defaultFiles = [

+            'drums.wav',

+            'synth.wav',

+            'vocals.wav',

+            'guitar.wav',

+            'piano.wav'

+        ];

+        

+        const select = document.getElementById('audioSelect');

+        defaultFiles.forEach(filename => {

+            const option = document.createElement('option');

+            option.value = filename;

+            option.textContent = filename.replace(/\.wav$/i, '');

+            select.appendChild(option);

+        });

+    }

+    

+    async loadAudioFromServer(filename) {

+        try {

+            this.updateStatus(`Loading ${filename}...`);

+            const response = await fetch(`audio/${filename}`);

+            

+            if (!response.ok) {

+                throw new Error(`HTTP error! status: ${response.status}`);

+            }

+            

+            const arrayBuffer = await response.arrayBuffer();

+            await this.audioEngine.loadArrayBuffer(arrayBuffer);

+            this.updateStatus(`Loaded: ${filename}`);

+        } catch (err) {

+            console.error('Error loading audio file:', err);

+            this.updateStatus(`Failed to load ${filename}`);

+        }

+    }

+    

+    async setupUI() {

+        // Load available audio files

+        await this.loadAudioFileList();

+        

+        // Camera control

+        document.getElementById('startCamera').addEventListener('click', () => this.startCamera());

+        

+        // Audio selection

+        document.getElementById('audioSelect').addEventListener('change', async (e) => {

+            const value = e.target.value;

+            if (!value) return;

+            

+            if (value === '__demo__') {

+                await this.audioEngine.loadDemoAudio();

+                this.updateStatus('Demo audio loaded');

+            } else {

+                await this.loadAudioFromServer(value);

+            }

+            document.getElementById('playPause').disabled = false;

+        });

+        

+        // Audio upload

+        document.getElementById('loadFile').addEventListener('click', () => {

+            document.getElementById('fileInput').click();

+        });

+        

+        document.getElementById('fileInput').addEventListener('change', async (e) => {

+            const file = e.target.files[0];

+            if (file) {

+                await this.audioEngine.loadFile(file);

+                this.updateStatus(`Loaded: ${file.name}`);

+                document.getElementById('playPause').disabled = false;

+                

+                // Reset select to show custom file loaded

+                document.getElementById('audioSelect').value = '';

+            }

+        });

+        

+        document.getElementById('playPause').addEventListener('click', () => {

+            this.togglePlayback();

+        });

+        

+        // IR controls

+        document.getElementById('irSelect').addEventListener('change', (e) => {

+            this.audioEngine.loadPresetIR(e.target.value);

+            this.updateStatus(`Loaded ${e.target.value} IR`);

+        });

+        

+        document.getElementById('loadIR').addEventListener('click', () => {

+            document.getElementById('irInput').click();

+        });

+        

+        document.getElementById('irInput').addEventListener('change', async (e) => {

+            const file = e.target.files[0];

+            if (file) {

+                await this.audioEngine.loadIRFile(file);

+                this.updateStatus(`Loaded IR: ${file.name}`);

+            }

+        });

+    }

+    

+    setupEffectZones() {

+        const zonesContainer = document.getElementById('effectZones');

+        zonesContainer.innerHTML = '';

+        

+        this.audioEngine.effectNames.forEach((name, index) => {

+            const zone = document.createElement('div');

+            zone.className = 'zone';

+            zone.textContent = name.replace('_', ' ');

+            zone.id = `zone-${index}`;

+            zonesContainer.appendChild(zone);

+        });

+    }

+    

+    setupGestureCallbacks() {

+        this.gestureDetector.onHandsDetected = (redHand, yellowHand) => {

+            if (redHand) {

+                this.handleEffectSelection(redHand);

+            }

+            

+            if (yellowHand) {

+                this.handleParameterControl(yellowHand);

+            } else {

+                // Slowly return to center when no hand detected

+                if (this.audioEngine.audioContext && this.audioEngine.effects) {

+                    const currentParam = this.audioEngine.currentParam;

+                    this.audioEngine.updateEffectParameter(currentParam * 0.95 + 0.5 * 0.05);

+                }

+                this.updateParameterDisplay();

+            }

+            

+            // Update hand status

+            document.getElementById('handStatus').textContent = 

+                redHand || yellowHand ? 'Yes' : 'No';

+        };

+    }

+    

+    handleEffectSelection(handBox) {

+        const centerX = handBox.x + handBox.width / 2;

+        const canvasWidth = this.gestureDetector.canvas.width;

+        const zoneWidth = canvasWidth / this.audioEngine.effectNames.length;

+        const effectIndex = Math.floor(centerX / zoneWidth);

+        const clampedIndex = Math.max(0, Math.min(effectIndex, this.audioEngine.effectNames.length - 1));

+        

+        // Update effect history for cue detection

+        this.effectHistory.push(clampedIndex);

+        if (this.effectHistory.length > 10) {

+            this.effectHistory.shift();

+        }

+        

+        // Check for cue trigger

+        if (this.effectHistory.length === 10 && 

+            this.effectHistory.every(i => i === clampedIndex) &&

+            Date.now() - this.lastCueTime > 2000) {

+            this.triggerCue();

+            this.lastCueTime = Date.now();

+        }

+        

+        // Switch effect

+        this.audioEngine.switchToEffect(clampedIndex);

+        

+        // Update UI

+        document.querySelectorAll('.zone').forEach((zone, i) => {

+            zone.classList.toggle('active', i === clampedIndex);

+        });

+        

+        document.getElementById('currentEffect').textContent = 

+            this.audioEngine.effectNames[clampedIndex].replace('_', ' ');

+    }

+    

+    handleParameterControl(handBox) {

+        const centerY = handBox.y + handBox.height / 2;

+        const canvasHeight = this.gestureDetector.canvas.height;

+        const paramMinRatio = 0.2;

+        const paramMaxRatio = 0.8;

+        const minY = paramMinRatio * canvasHeight;

+        const maxY = paramMaxRatio * canvasHeight;

+        

+        let param;

+        if (centerY <= minY) {

+            param = 1.0;

+        } else if (centerY >= maxY) {

+            param = 0.0;

+        } else {

+            param = 1.0 - (centerY - minY) / (maxY - minY);

+        }

+        

+        // Only update if audio engine is initialized

+        if (this.audioEngine.audioContext) {

+            this.audioEngine.updateEffectParameter(param);

+        }

+        this.updateParameterDisplay();

+    }

+    

+    updateParameterDisplay() {

+        // Safely get parameters with defaults

+        const param = this.audioEngine.currentParam || 0.5;

+        const rawParam = this.audioEngine.rawParam || 0.5;

+        

+        document.getElementById('paramValue').textContent = param.toFixed(2);

+        document.getElementById('rawParamValue').textContent = rawParam.toFixed(2);

+        document.getElementById('paramFill').style.height = `${param * 100}%`;

+    }

+    

+    triggerCue() {

+        this.cueActive = true;

+        const indicator = document.getElementById('cueIndicator');

+        indicator.classList.add('active');

+        

+        setTimeout(() => {

+            indicator.classList.remove('active');

+            this.cueActive = false;

+        }, 1000);

+    }

+    

+    async startCamera() {

+        try {

+            // Initialize audio engine first if not already done

+            await this.audioEngine.init();

+            

+            await this.gestureDetector.start();

+            this.updateStatus('Camera active - wear colored gloves!');

+            document.getElementById('startCamera').disabled = true;

+        } catch (err) {

+            console.error('Error starting camera:', err);

+            this.updateStatus('Camera access denied');

+        }

+    }

+    

+    togglePlayback() {

+        if (this.audioEngine.isPlaying) {

+            this.audioEngine.stop();

+            document.getElementById('playPause').textContent = 'Play';

+        } else {

+            this.audioEngine.play();

+            document.getElementById('playPause').textContent = 'Stop';

+        }

+    }

+    

+    updateStatus(message) {

+        document.getElementById('status').textContent = message;

+    }

+}

+

+// Initialize the app when DOM is ready

+document.addEventListener('DOMContentLoaded', () => {

+    window.app = new GestureDSPApp();

+});

+// js/audio-engine.js

+import { Effects } from './effects.js';

+

+export class AudioEngine {

+    constructor() {

+        this.audioContext = null;

+        this.source = null;

+        this.isPlaying = false;

+        this.audioBuffer = null;

+        

+        this.currentEffectIndex = 0;

+        this.currentParam = 0.5;

+        this.rawParam = 0.5;

+        this.smoothedParam = 0.5;

+        this.paramSmoothFactor = 0.2;

+        

+        this.effectNames = [

+            'mid_side', 

+            'bitcrush', 

+            'lowpass', 

+            'highpass', 

+            'delay', 

+            'reverb', 

+            'spectral_freeze', 

+            'pitch_shift'

+        ];

+        

+        this.effects = null;

+        this.effectNodes = [];

+    }

+    

+    async init() {

+        if (!this.audioContext) {

+            this.audioContext = new (window.AudioContext || window.webkitAudioContext)();

+            

+            // Load AudioWorklet modules

+            await this.loadWorklets();

+            

+            // Setup audio graph

+            this.setupAudioGraph();

+        }

+    }

+    

+    async loadWorklets() {

+        try {

+            // Load bitcrusher worklet

+            const bitcrusherResponse = await fetch('js/worklets/bitcrusher.js');

+            const bitcrusherCode = await bitcrusherResponse.text();

+            const bitcrusherBlob = new Blob([bitcrusherCode], { type: 'application/javascript' });

+            const bitcrusherUrl = URL.createObjectURL(bitcrusherBlob);

+            await this.audioContext.audioWorklet.addModule(bitcrusherUrl);

+            

+            // Load spectral freeze worklet

+            const freezeResponse = await fetch('js/worklets/spectral-freeze.js');

+            const freezeCode = await freezeResponse.text();

+            const freezeBlob = new Blob([freezeCode], { type: 'application/javascript' });

+            const freezeUrl = URL.createObjectURL(freezeBlob);

+            await this.audioContext.audioWorklet.addModule(freezeUrl);

+        } catch (err) {

+            console.error('Error loading AudioWorklets:', err);

+            console.log('Falling back to inline worklets');

+            

+            // Fallback: load worklets inline

+            await this.loadInlineWorklets();

+        }

+    }

+    

+    async loadInlineWorklets() {

+        // Inline worklet code as fallback

+        const bitcrusherProcessor = `

+            class BitcrusherProcessor extends AudioWorkletProcessor {

+                static get parameterDescriptors() {

+                    return [{

+                        name: 'bitDepth',

+                        defaultValue: 8,

+                        minValue: 1,

+                        maxValue: 16,

+                        automationRate: 'k-rate'

+                    }];

+                }

+                

+                process(inputs, outputs, parameters) {

+                    const input = inputs[0];

+                    const output = outputs[0];

+                    const bitDepth = parameters.bitDepth[0];

+                    

+                    const step = 2 / Math.pow(2, bitDepth);

+                    

+                    for (let channel = 0; channel < input.length; channel++) {

+                        const inputChannel = input[channel];

+                        const outputChannel = output[channel];

+                        

+                        for (let i = 0; i < inputChannel.length; i++) {

+                            const sample = inputChannel[i];

+                            outputChannel[i] = Math.round(sample / step) * step;

+                        }

+                    }

+                    

+                    return true;

+                }

+            }

+            

+            registerProcessor('bitcrusher-processor', BitcrusherProcessor);

+        `;

+        

+        const spectralFreezeProcessor = `

+            class SpectralFreezeProcessor extends AudioWorkletProcessor {

+                constructor() {

+                    super();

+                    this.frozenSpectrum = null;

+                    this.isActive = false;

+                    this.port.onmessage = (e) => {

+                        if (e.data.type === 'setActive') {

+                            this.isActive = e.data.value;

+                            if (!this.isActive) {

+                                this.frozenSpectrum = null;

+                            }

+                        }

+                    };

+                }

+                

+                static get parameterDescriptors() {

+                    return [{

+                        name: 'freeze',

+                        defaultValue: 0,

+                        minValue: 0,

+                        maxValue: 1,

+                        automationRate: 'k-rate'

+                    }];

+                }

+                

+                process(inputs, outputs, parameters) {

+                    const input = inputs[0];

+                    const output = outputs[0];

+                    const freeze = parameters.freeze[0];

+                    

+                    if (freeze > 0.5 && !this.frozenSpectrum && input[0]) {

+                        this.frozenSpectrum = new Float32Array(input[0].length);

+                        for (let i = 0; i < input[0].length; i++) {

+                            this.frozenSpectrum[i] = input[0][i];

+                        }

+                    } else if (freeze <= 0.5) {

+                        this.frozenSpectrum = null;

+                    }

+                    

+                    for (let channel = 0; channel < input.length; channel++) {

+                        const inputChannel = input[channel];

+                        const outputChannel = output[channel];

+                        

+                        if (this.frozenSpectrum && freeze > 0.5) {

+                            for (let i = 0; i < outputChannel.length; i++) {

+                                const phase = Math.random() * 2 * Math.PI;

+                                outputChannel[i] = this.frozenSpectrum[i % this.frozenSpectrum.length] * 

+                                                  Math.cos(phase) * 0.8;

+                            }

+                        } else {

+                            for (let i = 0; i < outputChannel.length; i++) {

+                                outputChannel[i] = inputChannel ? inputChannel[i] : 0;

+                            }

+                        }

+                    }

+                    

+                    return true;

+                }

+            }

+            

+            registerProcessor('spectral-freeze-processor', SpectralFreezeProcessor);

+        `;

+        

+        const bitcrusherBlob = new Blob([bitcrusherProcessor], { type: 'application/javascript' });

+        const bitcrusherUrl = URL.createObjectURL(bitcrusherBlob);

+        await this.audioContext.audioWorklet.addModule(bitcrusherUrl);

+        

+        const freezeBlob = new Blob([spectralFreezeProcessor], { type: 'application/javascript' });

+        const freezeUrl = URL.createObjectURL(freezeBlob);

+        await this.audioContext.audioWorklet.addModule(freezeUrl);

+    }

+    

+    setupAudioGraph() {

+        // Create main input/output nodes

+        this.inputGain = this.audioContext.createGain();

+        this.outputGain = this.audioContext.createGain();

+        

+        // Create effects

+        this.effects = new Effects(this.audioContext);

+        

+        // Create a simple serial effects chain

+        this.setupSerialEffectsChain();

+        

+        this.outputGain.connect(this.audioContext.destination);

+    }

+    

+    setupSerialEffectsChain() {

+        // Create bypass and effect paths for each effect

+        this.effectNodes = [];

+        

+        let previousNode = this.inputGain;

+        

+        this.effectNames.forEach((name, i) => {

+            const bypass = this.audioContext.createGain();

+            const effectInput = this.audioContext.createGain();

+            const mixer = this.audioContext.createGain();

+            

+            // Split signal to bypass and effect

+            previousNode.connect(bypass);

+            previousNode.connect(effectInput);

+            

+            // Connect effect

+            const effectOutput = this.audioContext.createGain();

+            

+            switch (name) {

+                case 'mid_side':

+                    effectInput.connect(this.effects.midSideIn);

+                    this.effects.midSideOut.connect(effectOutput);

+                    break;

+                    

+                case 'bitcrush':

+                    effectInput.connect(this.effects.bitcrusher);

+                    this.effects.bitcrusher.connect(effectOutput);

+                    break;

+                    

+                case 'lowpass':

+                    effectInput.connect(this.effects.lowpass);

+                    this.effects.lowpass.connect(effectOutput);

+                    break;

+                    

+                case 'highpass':

+                    effectInput.connect(this.effects.highpass);

+                    this.effects.highpass.connect(effectOutput);

+                    break;

+                    

+                case 'delay':

+                    effectInput.connect(this.effects.delay);

+                    effectInput.connect(this.effects.delayDry);

+                    this.effects.delayMix.connect(effectOutput);

+                    this.effects.delayDry.connect(effectOutput);

+                    break;

+                    

+                case 'reverb':

+                    effectInput.connect(this.effects.convolver);

+                    effectInput.connect(this.effects.reverbDry);

+                    this.effects.convolver.connect(this.effects.reverbMix);

+                    this.effects.reverbMix.connect(effectOutput);

+                    this.effects.reverbDry.connect(effectOutput);

+                    break;

+                    

+                case 'spectral_freeze':

+                    effectInput.connect(this.effects.spectralFreeze);

+                    this.effects.spectralFreeze.connect(effectOutput);

+                    break;

+                    

+                case 'pitch_shift':

+                    effectInput.connect(effectOutput); // Pass through, handled by playback rate

+                    break;

+            }

+            

+            // Mix bypass and effect

+            bypass.connect(mixer);

+            effectOutput.connect(mixer);

+            

+            // Store node info

+            this.effectNodes.push({

+                name,

+                bypass,

+                effectInput,

+                effectOutput,

+                mixer,

+                isActive: false

+            });

+            

+            // Set initial state (all bypassed)

+            bypass.gain.value = 1;

+            effectInput.gain.value = 0;

+            

+            // Chain to next effect

+            previousNode = mixer;

+        });

+        

+        // Connect final node to output

+        previousNode.connect(this.outputGain);

+    }

+    

+    switchToEffect(index) {

+        // Disable all effects

+        this.effectNodes.forEach((node, i) => {

+            if (i === index) {

+                // Enable this effect

+                node.bypass.gain.setTargetAtTime(0, this.audioContext.currentTime, 0.01);

+                node.effectInput.gain.setTargetAtTime(1, this.audioContext.currentTime, 0.01);

+                node.isActive = true;

+            } else {

+                // Bypass this effect

+                node.bypass.gain.setTargetAtTime(1, this.audioContext.currentTime, 0.01);

+                node.effectInput.gain.setTargetAtTime(0, this.audioContext.currentTime, 0.01);

+                node.isActive = false;

+            }

+        });

+        

+        this.currentEffectIndex = index;

+    }

+    

+    updateEffectParameter(value) {

+        // Don't update if not initialized

+        if (!this.effects) {

+            return;

+        }

+        

+        this.rawParam = value;

+        

+        // Smooth the parameter

+        this.smoothedParam = this.paramSmoothFactor * this.smoothedParam + 

+                            (1 - this.paramSmoothFactor) * value;

+        this.currentParam = this.smoothedParam;

+        

+        // Update the effect

+        const effectName = this.effectNames[this.currentEffectIndex];

+        this.effects.updateParameter(effectName, this.currentParam);

+        

+        // Special handling for pitch shift - EXTREME VERSION

+        if (effectName === 'pitch_shift' && this.source && this.source.playbackRate) {

+            // INSANE pitch range: -3 octaves to +3 octaves

+            // Non-linear curve for more fun in the middle

+            const normalized = (this.currentParam - 0.5) * 2; // -1 to 1

+            const semitones = normalized * Math.abs(normalized) * 36; // -36 to +36 with curve

+            this.source.playbackRate.value = Math.pow(2, semitones / 12);

+            

+            // Also detune for microtonal madness at certain positions

+            if (this.source.detune) {

+                this.source.detune.value = Math.sin(this.currentParam * Math.PI * 4) * 50;

+            }

+        }

+    }

+    

+    async loadArrayBuffer(arrayBuffer) {

+        await this.init();

+        

+        try {

+            const audioBuffer = await this.audioContext.decodeAudioData(arrayBuffer);

+            this.audioBuffer = audioBuffer;

+            return true;

+        } catch (err) {

+            console.error('Error decoding audio:', err);

+            return false;

+        }

+    }

+    

+    async loadFile(file) {

+        const arrayBuffer = await file.arrayBuffer();

+        return this.loadArrayBuffer(arrayBuffer);

+    }

+    

+    async loadDemoAudio() {

+        await this.init();

+        

+        // Create a rich demo audio

+        const sampleRate = this.audioContext.sampleRate;

+        const duration = 30;

+        const buffer = this.audioContext.createBuffer(2, sampleRate * duration, sampleRate);

+        

+        for (let channel = 0; channel < 2; channel++) {

+            const channelData = buffer.getChannelData(channel);

+            

+            for (let i = 0; i < channelData.length; i++) {

+                const t = i / sampleRate;

+                

+                // Bass line

+                const bassFreq = 110 * Math.pow(2, Math.floor(t * 2) % 4 / 12);

+                const bass = Math.sin(2 * Math.PI * bassFreq * t) * 0.3;

+                

+                // Melody

+                const melodyPattern = [0, 3, 5, 7, 8, 7, 5, 3];

+                const melodyNote = melodyPattern[Math.floor(t * 4) % 8];

+                const melodyFreq = 440 * Math.pow(2, melodyNote / 12);

+                const melody = Math.sin(2 * Math.PI * melodyFreq * t) * 0.2;

+                

+                // Drums

+                const kick = (t % 0.5 < 0.05) ? Math.sin(2 * Math.PI * 60 * t) * Math.exp(-t % 0.5 * 20) : 0;

+                const hihat = (t % 0.125 < 0.02) ? (Math.random() * 2 - 1) * 0.1 * Math.exp(-t % 0.125 * 50) : 0;

+                

+                // Mix with stereo separation

+                const pan = channel === 0 ? 0.7 : 1.3;

+                channelData[i] = (bass + melody * pan + kick + hihat) * 0.5;

+            }

+        }

+        

+        this.audioBuffer = buffer;

+    }

+    

+    async loadPresetIR(preset) {

+        if (preset === 'none') {

+            this.effects.createDefaultIR();

+            return;

+        }

+        

+        // Create synthetic IRs for different spaces

+        const lengths = { room: 1, hall: 2, plate: 3 };

+        const length = this.audioContext.sampleRate * lengths[preset];

+        const ir = this.audioContext.createBuffer(2, length, this.audioContext.sampleRate);

+        

+        for (let channel = 0; channel < 2; channel++) {

+            const channelData = ir.getChannelData(channel);

+            

+            for (let i = 0; i < length; i++) {

+                const decay = Math.pow(1 - i / length, 2);

+                

+                switch (preset) {

+                    case 'room':

+                        channelData[i] = (Math.random() * 2 - 1) * decay;

+                        break;

+                    case 'hall':

+                        channelData[i] = (Math.random() * 2 - 1) * decay * 

+                                         (1 + 0.5 * Math.sin(i / this.audioContext.sampleRate * 100));

+                        break;

+                    case 'plate':

+                        channelData[i] = (Math.random() * 2 - 1) * decay * 

+                                         Math.sin(i / this.audioContext.sampleRate * 2000);

+                        break;

+                }

+            }

+        }

+        

+        this.effects.setImpulseResponse(ir);

+    }

+    

+    async loadIRFile(file) {

+        await this.init();

+        

+        try {

+            const arrayBuffer = await file.arrayBuffer();

+            const irBuffer = await this.audioContext.decodeAudioData(arrayBuffer);

+            this.effects.setImpulseResponse(irBuffer);

+            return true;

+        } catch (err) {

+            console.error('Error loading IR:', err);

+            return false;

+        }

+    }

+    

+    play() {

+        if (!this.audioBuffer) return;

+        

+        this.source = this.audioContext.createBufferSource();

+        this.source.buffer = this.audioBuffer;

+        this.source.loop = true;

+        this.source.connect(this.inputGain);

+        this.source.start();

+        

+        this.isPlaying = true;

+    }

+    

+    stop() {

+        if (this.source) {

+            this.source.stop();

+            this.source.disconnect();

+            this.source = null;

+        }

+        

+        this.isPlaying = false;

+    }

+}

+// js/effects.js

+

+export class Effects {

+    constructor(audioContext) {

+        this.context = audioContext;

+        this.setupEffects();

+    }

+    

+    setupEffects() {

+        // Mid/Side processing

+        this.setupMidSide();

+        

+        // Bitcrusher

+        this.bitcrusher = new AudioWorkletNode(this.context, 'bitcrusher-processor');

+        

+        // Filters with EXTREME settings

+        this.lowpass = this.context.createBiquadFilter();

+        this.lowpass.type = 'lowpass';

+        this.lowpass.frequency.value = 1000;

+        

+        this.highpass = this.context.createBiquadFilter();

+        this.highpass.type = 'highpass';

+        this.highpass.frequency.value = 1000;

+        

+        // Delay with modulation

+        this.setupDelay();

+        

+        // Add LFO for delay modulation

+        this.lfo = this.context.createOscillator();

+        this.lfoGain = this.context.createGain();

+        this.lfoGain.gain.value = 0.002; // Subtle modulation

+        this.lfo.frequency.value = 0.5;

+        this.lfo.connect(this.lfoGain);

+        this.lfoGain.connect(this.delay.delayTime);

+        this.lfo.start();

+        

+        // Convolution reverb with filter

+        this.setupReverb();

+        

+        // Add reverb filter for character

+        this.reverbFilter = this.context.createBiquadFilter();

+        this.reverbFilter.type = 'lowpass';

+        this.reverbFilter.frequency.value = 5000;

+        this.convolver.connect(this.reverbFilter);

+        this.reverbFilter.connect(this.reverbMix);

+        

+        // Spectral freeze

+        this.spectralFreeze = new AudioWorkletNode(this.context, 'spectral-freeze-processor');

+        

+        // Pitch shift (placeholder - uses playback rate in AudioEngine)

+        this.pitchShift = this.context.createGain();

+        

+        // Add a limiter to prevent clipping from extreme effects

+        this.limiter = this.context.createDynamicsCompressor();

+        this.limiter.threshold.value = -3;

+        this.limiter.knee.value = 0;

+        this.limiter.ratio.value = 20;

+        this.limiter.attack.value = 0.001;

+        this.limiter.release.value = 0.1;

+    }

+    

+    setupMidSide() {

+        this.midSideIn = this.context.createChannelSplitter(2);

+        this.midSideOut = this.context.createChannelMerger(2);

+        this.midGain = this.context.createGain();

+        this.sideGain = this.context.createGain();

+        this.sideGain.gain.value = 1.0;

+        

+        // Create mid/side matrix

+        // Mid = (L + R) / 2

+        // Side = (L - R) / 2

+        this.midSideIn.connect(this.midGain, 0);

+        this.midSideIn.connect(this.midGain, 1);

+        this.midSideIn.connect(this.sideGain, 0);

+        this.midSideIn.connect(this.sideGain, 1);

+        

+        // Reconstruct L/R from M/S

+        this.midGain.connect(this.midSideOut, 0, 0);

+        this.midGain.connect(this.midSideOut, 0, 1);

+        this.sideGain.connect(this.midSideOut, 0, 0);

+        

+        // Invert phase for right channel side

+        const sideInverter = this.context.createGain();

+        sideInverter.gain.value = -1;

+        this.sideGain.connect(sideInverter);

+        sideInverter.connect(this.midSideOut, 0, 1);

+    }

+    

+    setupDelay() {

+        this.delay = this.context.createDelay(2);

+        this.delay.delayTime.value = 0.3;

+        this.delayFeedback = this.context.createGain();

+        this.delayFeedback.gain.value = 0.4;

+        this.delayMix = this.context.createGain();

+        this.delayMix.gain.value = 0.5;

+        this.delayDry = this.context.createGain();

+        

+        // Feedback loop

+        this.delay.connect(this.delayFeedback);

+        this.delayFeedback.connect(this.delay);

+        this.delay.connect(this.delayMix);

+    }

+    

+    setupReverb() {

+        this.convolver = this.context.createConvolver();

+        this.reverbMix = this.context.createGain();

+        this.reverbMix.gain.value = 0.5;

+        this.reverbDry = this.context.createGain();

+        

+        // Create default impulse response

+        this.createDefaultIR();

+    }

+    

+    createDefaultIR() {

+        const length = this.context.sampleRate * 2; // 2 seconds

+        const impulse = this.context.createBuffer(2, length, this.context.sampleRate);

+        

+        for (let channel = 0; channel < 2; channel++) {

+            const channelData = impulse.getChannelData(channel);

+            for (let i = 0; i < length; i++) {

+                channelData[i] = (Math.random() * 2 - 1) * Math.pow(1 - i / length, 2);

+            }

+        }

+        

+        this.convolver.buffer = impulse;

+    }

+    

+    setImpulseResponse(buffer) {

+        this.convolver.buffer = buffer;

+    }

+    

+    getEffect(name) {

+        const effects = {

+            'mid_side': this.midSideOut,

+            'bitcrush': this.bitcrusher,

+            'lowpass': this.lowpass,

+            'highpass': this.highpass,

+            'delay': this.delayMix,

+            'reverb': this.reverbMix,

+            'spectral_freeze': this.spectralFreeze,

+            'pitch_shift': this.pitchShift

+        };

+        

+        return effects[name];

+    }

+    

+    connectEffect(name, input, output) {

+        switch (name) {

+            case 'mid_side':

+                input.connect(this.midSideIn);

+                this.midSideOut.connect(output);

+                break;

+                

+            case 'delay':

+                input.connect(this.delay);

+                input.connect(this.delayDry);

+                this.delayMix.connect(output);

+                this.delayDry.connect(output);

+                break;

+                

+            case 'reverb':

+                input.connect(this.convolver);

+                input.connect(this.reverbDry);

+                this.convolver.connect(this.reverbMix);

+                this.reverbMix.connect(output);

+                this.reverbDry.connect(output);

+                break;

+                

+            default:

+                const effect = this.getEffect(name);

+                input.connect(effect);

+                effect.connect(output);

+        }

+    }

+    

+    updateParameter(effectName, value) {

+        switch (effectName) {

+            case 'mid_side':

+                // EXTREME stereo effects - from completely mono to psychedelic width

+                this.sideGain.gain.value = value * 8.0; // SUPER WIDE

+                // Also mess with the mid gain for more extreme effect

+                this.midGain.gain.value = 1 - (value * 0.8); // Reduce mid as side increases

+                break;

+                

+            case 'bitcrush':

+                // EXTREME bit reduction with sample rate reduction too!

+                const bitDepth = Math.max(1, 8 - (value * 7)); // 8-bit down to 1-bit

+                this.bitcrusher.parameters.get('bitDepth').value = bitDepth;

+                // TODO: Add sample rate reduction for more lofi effect

+                break;

+                

+            case 'lowpass':

+                // INSANE filter sweep from sub-bass to almost nothing

+                this.lowpass.frequency.value = 20 * Math.pow(500, value); // 20Hz to 10kHz

+                this.lowpass.Q.value = 0.5 + (value * value * 30); // Exponential resonance - SCREAMING at high values

+                // Add some gain compensation for the resonance

+                const lpGain = 1 - (value * value * 0.5);

+                if (this.lowpass.gain) this.lowpass.gain.value = lpGain;

+                break;

+                

+            case 'highpass':

+                // CRAZY high pass that can remove everything

+                this.highpass.frequency.value = 10 * Math.pow(1000, value); // 10Hz to 10kHz

+                this.highpass.Q.value = 0.5 + (value * value * 30); // SCREAMING resonance

+                break;

+                

+            case 'delay':

+                // CHAOS delay - multiple taps, extreme feedback

+                const delayTime = 0.001 + (value * value * 1.5); // 1ms to 1.5 seconds (exponential)

+                this.delay.delayTime.value = delayTime;

+                this.delayFeedback.gain.value = Math.min(0.98, value * 1.1); // Can go over 100%!

+                this.delayMix.gain.value = value * 1.5; // Delay can be louder than dry

+                

+                // Modulate delay time slightly for chorus/flanger effects at low values

+                if (value < 0.3 && this.lfo) {

+                    this.lfo.frequency.value = 2 + value * 10;

+                }

+                break;

+                

+            case 'reverb':

+                // MASSIVE reverb with pre-delay and filtering

+                this.reverbMix.gain.value = value * value * 2; // Exponential curve, can be 200% wet

+                this.reverbDry.gain.value = 1 - value;

+                

+                // Add some filtering to the reverb for more character

+                if (this.reverbFilter) {

+                    this.reverbFilter.frequency.value = 200 + (1 - value) * 5000; // Darker reverb as it gets wetter

+                }

+                break;

+                

+            case 'spectral_freeze':

+                // Multiple freeze modes based on position

+                if (value < 0.2) {

+                    this.spectralFreeze.parameters.get('freeze').value = 0;

+                } else if (value < 0.5) {

+                    // Stutter freeze

+                    this.spectralFreeze.parameters.get('freeze').value = 

+                        Math.sin(Date.now() * 0.01) > 0 ? 1 : 0;

+                } else {

+                    // Full freeze

+                    this.spectralFreeze.parameters.get('freeze').value = 1;

+                }