| <!DOCTYPE html> |
| <html lang="en"> |
| <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); |
| }; |
| } |
| } |
| |
| |
| 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> |
