| | <!DOCTYPE html> |
| | <html lang="en"> |
| | <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(); |
| | } |
| | } |
| | |
| | |
| | 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()); |
| | |
| | |
| | const room3d = document.getElementById('3dRoomCanvas'); |
| | const ctx3d = room3d.getContext('2d'); |
| | |
| | function draw3dRoom() { |
| | |
| | |
| | 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> |
