MIDI-Melody-Generator

Running

App Files Files Community

kolaslab commited on Dec 1, 2024

Commit

797cfe7

verified ·

1 Parent(s): d1bc016

Update index.html

Browse files

Files changed (1) hide show

index.html +208 -157

index.html CHANGED Viewed

@@ -3,285 +3,336 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>3D Audio Spectrum Analyzer</title>
     <style>
         * {
             margin: 0;
             padding: 0;
             box-sizing: border-box;
-            font-family: Arial, sans-serif;
         }
         body {
-            background: #1a1a1a;
-            color: #fff;
         }
-        .container {
-            max-width: 1200px;
-            margin: 0 auto;
             padding: 20px;
         }
-        .header {
-            text-align: center;
-            padding: 20px 0;
         }
-        .controls {
             display: grid;
-            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
             gap: 20px;
-            margin: 20px 0;
-        }
-        .control-panel {
-            background: #2a2a2a;
-            padding: 20px;
-            border-radius: 8px;
         }
-        .visualization {
             display: grid;
             grid-template-columns: 2fr 1fr;
             gap: 20px;
-            margin: 20px 0;
         }
         canvas {
             width: 100%;
-            height: 400px;
-            background: #2a2a2a;
             border-radius: 8px;
         }
-        button {
-            background: #4CAF50;
             color: white;
-            padding: 10px 20px;
             border: none;
-            border-radius: 4px;
             cursor: pointer;
-            margin: 5px;
         }
-        button:hover {
-            background: #45a049;
         }
-        input[type="number"] {
             width: 100%;
             padding: 8px;
-            margin: 5px 0;
             border-radius: 4px;
-            border: 1px solid #444;
-            background: #333;
             color: white;
         }
-        .device-status {
-            background: #2a2a2a;
-            padding: 20px;
-            border-radius: 8px;
-            margin-top: 20px;
         }
-        .preset-container {
             display: grid;
-            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
             gap: 10px;
-            margin: 20px 0;
         }
-        .preset {
-            background: #333;
             padding: 10px;
             border-radius: 4px;
             cursor: pointer;
         }
-        .preset:hover {
-            background: #444;
         }
     </style>
 </head>
 <body>
-    <div class="container">
-        <div class="header">
-            <h1>3D Audio Spectrum Analyzer</h1>
-        </div>
-        <div class="controls">
             <div class="control-panel">
-                <h3>Device Configuration</h3>
-                <button id="startAnalysis">Start Analysis</button>
-                <button id="stopAnalysis">Stop Analysis</button>
-                <button id="calibrate">Calibrate Devices</button>
-                <div>
-                    <label>Device Role:</label>
                     <select id="deviceRole">
                         <option value="left">Left Channel</option>
                         <option value="right">Right Channel</option>
-                        <option value="center">Center Channel</option>
                     </select>
                 </div>
             </div>
             <div class="control-panel">
-                <h3>Binaural Beat Generator</h3>
-                <div>
-                    <label>Base Frequency (Hz):</label>
                     <input type="number" id="baseFreq" value="432" min="20" max="1000">
                 </div>
-                <div>
-                    <label>Beat Frequency (Hz):</label>
                     <input type="number" id="beatFreq" value="7" min="1" max="40">
                 </div>
-                <button id="startBinaural">Generate Binaural Beat</button>
-                <button id="stopBinaural">Stop</button>
             </div>
-        </div>
-        <div class="visualization">
-            <canvas id="spectrumCanvas"></canvas>
-            <canvas id="3dRoomCanvas"></canvas>
-        </div>
-        <div class="preset-container">
-            <div class="preset">
-                <h4>Alpha Wave</h4>
-                <p>8-12 Hz</p>
-            </div>
-            <div class="preset">
-                <h4>Theta Wave</h4>
-                <p>4-7 Hz</p>
-            </div>
-            <div class="preset">
-                <h4>Delta Wave</h4>
-                <p>0.5-4 Hz</p>
             </div>
-        </div>
-        <div class="device-status">
-            <h3>Connected Devices</h3>
-            <div id="deviceList"></div>
-        </div>
     </div>
     <script>
-        class AudioAnalyzer {
             constructor() {
                 this.audioContext = null;
                 this.analyser = null;
-                this.oscillator = null;
-                this.isPlaying = false;
             }
             async initialize() {
                 try {
                     this.audioContext = new (window.AudioContext || window.webkitAudioContext)();
                     this.analyser = this.audioContext.createAnalyser();
                     const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
                     const source = this.audioContext.createMediaStreamSource(stream);
                     source.connect(this.analyser);
-                    this.setupVisualization();
                 } catch (error) {
-                    console.error('Error initializing audio:', error);
                 }
             }
             generateBinauralBeat(baseFreq, beatFreq) {
-                if (this.isPlaying) this.stopBinauralBeat();
                 const leftOsc = this.audioContext.createOscillator();
                 const rightOsc = this.audioContext.createOscillator();
-                const leftGain = this.audioContext.createGain();
-                const rightGain = this.audioContext.createGain();
-                const merger = this.audioContext.createChannelMerger(2);
                 leftOsc.frequency.value = baseFreq;
                 rightOsc.frequency.value = baseFreq + beatFreq;
-                leftOsc.connect(leftGain);
-                rightOsc.connect(rightGain);
-                leftGain.connect(merger, 0, 0);
-                rightGain.connect(merger, 0, 1);
-                merger.connect(this.audioContext.destination);
                 leftOsc.start();
                 rightOsc.start();
-                this.oscillator = { left: leftOsc, right: rightOsc };
-                this.isPlaying = true;
             }
             stopBinauralBeat() {
-                if (this.oscillator) {
-                    this.oscillator.left.stop();
-                    this.oscillator.right.stop();
-                    this.isPlaying = false;
-                }
             }
-            setupVisualization() {
-                const canvas = document.getElementById('spectrumCanvas');
                 const ctx = canvas.getContext('2d');
-                const width = canvas.width;
-                const height = canvas.height;
                 const draw = () => {
                     requestAnimationFrame(draw);
-                    const dataArray = new Uint8Array(this.analyser.frequencyBinCount);
                     this.analyser.getByteFrequencyData(dataArray);
-                    ctx.fillStyle = '#2a2a2a';
-                    ctx.fillRect(0, 0, width, height);
-                    const barWidth = width / dataArray.length;
                     let x = 0;
-                    dataArray.forEach(value => {
-                        const barHeight = value * height / 255;
-                        ctx.fillStyle = `hsl(${value}, 100%, 50%)`;
-                        ctx.fillRect(x, height - barHeight, barWidth, barHeight);
-                        x += barWidth;
-                    });
                 };
                 draw();
             }
-        }
-        // Initialize application
-        const analyzer = new AudioAnalyzer();
-        document.getElementById('startAnalysis').addEventListener('click', () => analyzer.initialize());
-        document.getElementById('startBinaural').addEventListener('click', () => {
-            const baseFreq = parseFloat(document.getElementById('baseFreq').value);
-            const beatFreq = parseFloat(document.getElementById('beatFreq').value);
-            analyzer.generateBinauralBeat(baseFreq, beatFreq);
-        });
-        document.getElementById('stopBinaural').addEventListener('click', () => analyzer.stopBinauralBeat());
-        // Setup room visualization
-        const room3d = document.getElementById('3dRoomCanvas');
-        const ctx3d = room3d.getContext('2d');
-        function draw3dRoom() {
-            // Basic 3D room visualization implementation would go here
-            // This would require a more complex 3D rendering library for proper implementation
-            ctx3d.fillStyle = '#2a2a2a';
-            ctx3d.fillRect(0, 0, room3d.width, room3d.height);
-            ctx3d.strokeStyle = '#4CAF50';
-            ctx3d.beginPath();
-            ctx3d.moveTo(50, 50);
-            ctx3d.lineTo(room3d.width - 50, 50);
-            ctx3d.lineTo(room3d.width - 50, room3d.height - 50);
-            ctx3d.lineTo(50, room3d.height - 50);
-            ctx3d.closePath();
-            ctx3d.stroke();
         }
-        draw3dRoom();
     </script>
 </body>
 </html><script async data-explicit-opt-in="true" data-cookie-opt-in="true" src="https://vercel.live/_next-live/feedback/feedback.js"></script>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Multi-Device Audio Analysis System</title>
     <style>
+        :root {
+            --primary: #2196F3;
+            --secondary: #4CAF50;
+            --bg-dark: #1a1a1a;
+            --bg-light: #2a2a2a;
+            --text: #ffffff;
+        }
         * {
             margin: 0;
             padding: 0;
             box-sizing: border-box;
+            font-family: 'Segoe UI', system-ui, sans-serif;
         }
         body {
+            background: var(--bg-dark);
+            color: var(--text);
+            min-height: 100vh;
         }
+        .app-container {
+            display: grid;
+            grid-template-columns: 300px 1fr;
+            gap: 20px;
             padding: 20px;
+            height: 100vh;
         }
+        .sidebar {
+            background: var(--bg-light);
+            border-radius: 12px;
+            padding: 20px;
+            display: flex;
+            flex-direction: column;
+            gap: 20px;
         }
+        .main-content {
             display: grid;
+            grid-template-rows: auto 1fr;
             gap: 20px;
         }
+        .visualization-container {
             display: grid;
             grid-template-columns: 2fr 1fr;
             gap: 20px;
+        }
+        .canvas-container {
+            background: var(--bg-light);
+            border-radius: 12px;
+            padding: 20px;
+            position: relative;
         }
         canvas {
             width: 100%;
+            height: 100%;
+            background: rgba(0,0,0,0.2);
             border-radius: 8px;
         }
+        .control-panel {
+            background: var(--bg-light);
+            border-radius: 12px;
+            padding: 20px;
+        }
+        .btn {
+            background: var(--primary);
             color: white;
             border: none;
+            padding: 12px 24px;
+            border-radius: 6px;
             cursor: pointer;
+            transition: opacity 0.2s;
+            width: 100%;
+            margin-bottom: 10px;
+        }
+        .btn:hover {
+            opacity: 0.9;
+        }
+        .btn.secondary {
+            background: var(--secondary);
         }
+        .input-group {
+            margin-bottom: 15px;
         }
+        .input-group label {
+            display: block;
+            margin-bottom: 5px;
+            color: #888;
+        }
+        input[type="number"],
+        select {
             width: 100%;
             padding: 8px;
+            background: rgba(255,255,255,0.1);
+            border: 1px solid rgba(255,255,255,0.2);
             border-radius: 4px;
             color: white;
         }
+        .device-list {
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
         }
+        .device-item {
+            background: rgba(255,255,255,0.1);
+            padding: 10px;
+            border-radius: 4px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        .status-indicator {
+            width: 10px;
+            height: 10px;
+            border-radius: 50%;
+            background: var(--secondary);
+        }
+        #frequencyDisplay {
+            position: absolute;
+            top: 10px;
+            right: 10px;
+            background: rgba(0,0,0,0.7);
+            padding: 5px 10px;
+            border-radius: 4px;
+        }
+        .preset-list {
             display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
             gap: 10px;
         }
+        .preset-item {
+            background: rgba(255,255,255,0.1);
             padding: 10px;
             border-radius: 4px;
             cursor: pointer;
+            transition: background 0.2s;
         }
+        .preset-item:hover {
+            background: rgba(255,255,255,0.2);
         }
     </style>
 </head>
 <body>
+    <div class="app-container">
+        <aside class="sidebar">
             <div class="control-panel">
+                <h3>Device Settings</h3>
+                <div class="input-group">
+                    <label>Device Role</label>
                     <select id="deviceRole">
+                        <option value="primary">Primary</option>
                         <option value="left">Left Channel</option>
                         <option value="right">Right Channel</option>
                     </select>
                 </div>
+                <button class="btn" id="startCapture">Start Capture</button>
+                <button class="btn secondary" id="calibrate">Calibrate</button>
+            </div>
+            <div class="device-list">
+                <h3>Connected Devices</h3>
+                <div class="device-item">
+                    <span>This Device</span>
+                    <div class="status-indicator"></div>
+                </div>
             </div>
+        </aside>
+        <main class="main-content">
             <div class="control-panel">
+                <h2>Binaural Beat Generator</h2>
+                <div class="input-group">
+                    <label>Base Frequency (Hz)</label>
                     <input type="number" id="baseFreq" value="432" min="20" max="1000">
                 </div>
+                <div class="input-group">
+                    <label>Beat Frequency (Hz)</label>
                     <input type="number" id="beatFreq" value="7" min="1" max="40">
                 </div>
+                <button class="btn" id="generateBeat">Generate Beat</button>
             </div>
+            <div class="visualization-container">
+                <div class="canvas-container">
+                    <canvas id="spectrumAnalyzer"></canvas>
+                    <div id="frequencyDisplay">0 Hz</div>
+                </div>
+                <div class="canvas-container">
+                    <canvas id="roomAnalysis"></canvas>
+                </div>
             </div>
+        </main>
     </div>
     <script>
+        class AudioSystem {
             constructor() {
                 this.audioContext = null;
                 this.analyser = null;
+                this.gainNode = null;
+                this.oscillators = {};
+                this.isCapturing = false;
+                this.isGenerating = false;
+                this.initialize();
+                this.setupEventListeners();
             }
             async initialize() {
                 try {
                     this.audioContext = new (window.AudioContext || window.webkitAudioContext)();
                     this.analyser = this.audioContext.createAnalyser();
+                    this.gainNode = this.audioContext.createGain();
+                    this.analyser.fftSize = 2048;
+                    this.gainNode.connect(this.audioContext.destination);
+                    this.analyser.connect(this.gainNode);
+                    await this.setupSpectrumVisualizer();
+                } catch (error) {
+                    console.error('Audio initialization failed:', error);
+                }
+            }
+            async startCapture() {
+                if (this.isCapturing) return;
+                try {
                     const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
                     const source = this.audioContext.createMediaStreamSource(stream);
                     source.connect(this.analyser);
+                    this.isCapturing = true;
                 } catch (error) {
+                    console.error('Capture failed:', error);
                 }
             }
             generateBinauralBeat(baseFreq, beatFreq) {
+                if (this.isGenerating) this.stopBinauralBeat();
                 const leftOsc = this.audioContext.createOscillator();
                 const rightOsc = this.audioContext.createOscillator();
                 leftOsc.frequency.value = baseFreq;
                 rightOsc.frequency.value = baseFreq + beatFreq;
+                const merger = this.audioContext.createChannelMerger(2);
+                leftOsc.connect(merger, 0, 0);
+                rightOsc.connect(merger, 0, 1);
+                merger.connect(this.gainNode);
                 leftOsc.start();
                 rightOsc.start();
+                this.oscillators = { left: leftOsc, right: rightOsc };
+                this.isGenerating = true;
             }
             stopBinauralBeat() {
+                if (!this.isGenerating) return;
+                Object.values(this.oscillators).forEach(osc => osc.stop());
+                this.oscillators = {};
+                this.isGenerating = false;
             }
+            async setupSpectrumVisualizer() {
+                const canvas = document.getElementById('spectrumAnalyzer');
                 const ctx = canvas.getContext('2d');
+                const bufferLength = this.analyser.frequencyBinCount;
+                const dataArray = new Uint8Array(bufferLength);
                 const draw = () => {
                     requestAnimationFrame(draw);
                     this.analyser.getByteFrequencyData(dataArray);
+                    ctx.fillStyle = 'rgba(0, 0, 0, 0.2)';
+                    ctx.fillRect(0, 0, canvas.width, canvas.height);
+                    const barWidth = canvas.width / bufferLength;
                     let x = 0;
+                    for(let i = 0; i < bufferLength; i++) {
+                        const barHeight = (dataArray[i] / 255) * canvas.height;
+                        const hue = i / bufferLength * 360;
+                        ctx.fillStyle = `hsl(${hue}, 100%, 50%)`;
+                        ctx.fillRect(x, canvas.height - barHeight, barWidth, barHeight);
+                        x += barWidth + 1;
+                    }
                 };
                 draw();
             }
+            setupEventListeners() {
+                document.getElementById('startCapture').onclick = () => this.startCapture();
+                document.getElementById('generateBeat').onclick = () => {
+                    const baseFreq = parseFloat(document.getElementById('baseFreq').value);
+                    const beatFreq = parseFloat(document.getElementById('beatFreq').value);
+                    this.generateBinauralBeat(baseFreq, beatFreq);
+                };
+            }
         }
+        // Initialize the system
+        const audioSystem = new AudioSystem();
     </script>
 </body>
 </html><script async data-explicit-opt-in="true" data-cookie-opt-in="true" src="https://vercel.live/_next-live/feedback/feedback.js"></script>