Spaces:

Reality123b
/

Claude-ActiveANC

Running

App Files Files Community

Reality123b commited on Nov 9

Commit

93e3a28

verified ·

1 Parent(s): 0608523

Update index.html

Browse files

Files changed (1) hide show

index.html +177 -123

index.html CHANGED Viewed

@@ -149,6 +149,16 @@
       font-size: 14px;
     }
     .button-grid {
       display: grid;
       grid-template-columns: repeat(2, 1fr);
@@ -183,6 +193,25 @@
       font-size: 13px;
       margin-top: 20px;
     }
   </style>
 </head>
 <body>
@@ -192,11 +221,14 @@
       <p>Active Noise Cancellation & Focus Music</p>
     </div>
-    <div id="error" class="error" style="display: none;"></div>
     <div class="card">
       <div class="card-header">
-        <div class="card-title">🔊 Noise Cancellation</div>
         <button id="ancBtn" class="btn btn-primary">Start ANC</button>
       </div>
@@ -206,13 +238,16 @@
       </div>
       <p class="info-text">
-        Uses phase inversion to cancel ambient noise picked up by your microphone.
       </p>
     </div>
     <div class="card">
       <div class="card-header">
-        <div class="card-title">🎵 Focus Music</div>
         <button id="musicBtn" class="btn btn-primary">Play</button>
       </div>
@@ -222,7 +257,7 @@
           <button class="type-btn active" data-type="brown">Brown Noise</button>
           <button class="type-btn" data-type="white">White Noise</button>
           <button class="type-btn" data-type="pink">Pink Noise</button>
-          <button class="type-btn" data-type="binaural">Binaural Beats</button>
         </div>
       </div>
@@ -233,17 +268,19 @@
     </div>
     <div class="tip">
-      💡 Use headphones for best results. Combine ANC with focus music for maximum concentration.
     </div>
   </div>
   <script>
     let audioContext = null;
     let micStream = null;
-    let noiseProcessor = null;
-    let gainNode = null;
-    let oscillator = null;
-    let musicGain = null;
     let ancActive = false;
     let musicActive = false;
@@ -255,19 +292,35 @@
     const volumeSlider = document.getElementById('volumeSlider');
     const ancValue = document.getElementById('ancValue');
     const volumeValue = document.getElementById('volumeValue');
-    const errorDiv = document.getElementById('error');
     const typeButtons = document.querySelectorAll('.type-btn');
-    function showError(message) {
-      errorDiv.textContent = message;
-      errorDiv.style.display = 'block';
       setTimeout(() => {
-        errorDiv.style.display = 'none';
       }, 5000);
     }
     async function startANC() {
       try {
         const stream = await navigator.mediaDevices.getUserMedia({
           audio: {
             echoCancellation: false,
@@ -276,162 +329,156 @@
           }
         });
-        audioContext = new (window.AudioContext || window.webkitAudioContext)();
         micStream = stream;
-        const source = audioContext.createMediaStreamSource(stream);
-        noiseProcessor = audioContext.createScriptProcessor(4096, 1, 1);
-        const output = audioContext.createGain();
-        gainNode = output;
-        output.gain.value = ancSlider.value / 100;
-        noiseProcessor.onaudioprocess = (e) => {
           const input = e.inputBuffer.getChannelData(0);
-          const outputData = e.outputBuffer.getChannelData(0);
           const strength = ancSlider.value / 100;
           for (let i = 0; i < input.length; i++) {
-            outputData[i] = -input[i] * strength;
           }
         };
-        source.connect(noiseProcessor);
-        noiseProcessor.connect(output);
-        output.connect(audioContext.destination);
         ancActive = true;
         ancBtn.textContent = 'Stop ANC';
         ancBtn.className = 'btn btn-danger';
       } catch (err) {
-        showError('Microphone access denied. Please allow microphone permissions in your browser settings.');
         console.error(err);
       }
     }
     function stopANC() {
-      if (noiseProcessor) {
-        noiseProcessor.disconnect();
-        noiseProcessor = null;
       }
       if (micStream) {
         micStream.getTracks().forEach(track => track.stop());
         micStream = null;
       }
-      if (audioContext && !musicActive) {
-        audioContext.close();
-        audioContext = null;
-      }
-      gainNode = null;
       ancActive = false;
       ancBtn.textContent = 'Start ANC';
       ancBtn.className = 'btn btn-primary';
     }
     function startMusic() {
       try {
-        if (!audioContext) {
-          audioContext = new (window.AudioContext || window.webkitAudioContext)();
-        }
         const vol = volumeSlider.value / 100;
         if (musicType === 'brown' || musicType === 'white' || musicType === 'pink') {
-          const bufferSize = 4096;
-          const noiseBuffer = audioContext.createBuffer(1, bufferSize, audioContext.sampleRate);
-          const output = noiseBuffer.getChannelData(0);
-          if (musicType === 'white') {
-            for (let i = 0; i < bufferSize; i++) {
-              output[i] = Math.random() * 2 - 1;
-            }
-          } else if (musicType === 'brown') {
-            let lastOut = 0;
-            for (let i = 0; i < bufferSize; i++) {
-              const white = Math.random() * 2 - 1;
-              output[i] = (lastOut + (0.02 * white)) / 1.02;
-              lastOut = output[i];
-              output[i] *= 3.5;
-            }
-          } else if (musicType === 'pink') {
-            let b0 = 0, b1 = 0, b2 = 0, b3 = 0, b4 = 0, b5 = 0, b6 = 0;
-            for (let i = 0; i < bufferSize; i++) {
-              const white = Math.random() * 2 - 1;
-              b0 = 0.99886 * b0 + white * 0.0555179;
-              b1 = 0.99332 * b1 + white * 0.0750759;
-              b2 = 0.96900 * b2 + white * 0.1538520;
-              b3 = 0.86650 * b3 + white * 0.3104856;
-              b4 = 0.55000 * b4 + white * 0.5329522;
-              b5 = -0.7616 * b5 - white * 0.0168980;
-              output[i] = b0 + b1 + b2 + b3 + b4 + b5 + b6 + white * 0.5362;
-              output[i] *= 0.11;
-              b6 = white * 0.115926;
-            }
-          }
-          const noiseSource = audioContext.createBufferSource();
-          noiseSource.buffer = noiseBuffer;
-          noiseSource.loop = true;
-          const gain = audioContext.createGain();
-          gain.gain.value = vol;
-          musicGain = gain;
-          noiseSource.connect(gain);
-          gain.connect(audioContext.destination);
-          noiseSource.start(0);
-          oscillator = noiseSource;
-        } else if (musicType === 'binaural') {
-          const osc1 = audioContext.createOscillator();
-          const osc2 = audioContext.createOscillator();
-          osc1.frequency.value = 200;
-          osc2.frequency.value = 210;
-          const merger = audioContext.createChannelMerger(2);
-          const leftGain = audioContext.createGain();
-          const rightGain = audioContext.createGain();
-          leftGain.gain.value = vol;
-          rightGain.gain.value = vol;
-          musicGain = leftGain;
-          osc1.connect(leftGain);
-          osc2.connect(rightGain);
-          leftGain.connect(merger, 0, 0);
-          rightGain.connect(merger, 0, 1);
-          merger.connect(audioContext.destination);
-          osc1.start();
-          osc2.start();
-          oscillator = [osc1, osc2];
         }
         musicActive = true;
         musicBtn.textContent = 'Stop';
         musicBtn.className = 'btn btn-danger';
       } catch (err) {
-        showError('Failed to start focus music.');
         console.error(err);
       }
     }
     function stopMusic() {
-      if (oscillator) {
-        if (Array.isArray(oscillator)) {
-          oscillator.forEach(osc => osc.stop());
-        } else {
-          oscillator.stop();
         }
-        oscillator = null;
       }
-      musicGain = null;
-      if (audioContext && !ancActive) {
-        audioContext.close();
-        audioContext = null;
       }
       musicActive = false;
       musicBtn.textContent = 'Play';
       musicBtn.className = 'btn btn-primary';
     }
     ancBtn.addEventListener('click', () => {
@@ -452,15 +499,15 @@
     ancSlider.addEventListener('input', (e) => {
       ancValue.textContent = e.target.value;
-      if (gainNode) {
-        gainNode.gain.value = e.target.value / 100;
       }
     });
     volumeSlider.addEventListener('input', (e) => {
       volumeValue.textContent = e.target.value;
-      if (musicGain) {
-        musicGain.gain.value = e.target.value / 100;
       }
     });
@@ -476,6 +523,13 @@
         }
       });
     });
   </script>
 </body>
 </html>

       font-size: 14px;
     }
+    .success {
+      background: rgba(34, 197, 94, 0.2);
+      border: 1px solid #22c55e;
+      color: #bbf7d0;
+      padding: 16px;
+      border-radius: 12px;
+      margin-bottom: 20px;
+      font-size: 14px;
+    }
     .button-grid {
       display: grid;
       grid-template-columns: repeat(2, 1fr);
       font-size: 13px;
       margin-top: 20px;
     }
+    .status {
+      display: inline-block;
+      padding: 4px 12px;
+      border-radius: 12px;
+      font-size: 12px;
+      font-weight: 600;
+      margin-left: 8px;
+    }
+    .status-active {
+      background: #22c55e;
+      color: white;
+    }
+    .status-inactive {
+      background: rgba(255, 255, 255, 0.1);
+      color: #e9d5ff;
+    }
   </style>
 </head>
 <body>
       <p>Active Noise Cancellation & Focus Music</p>
     </div>
+    <div id="message" style="display: none;"></div>
     <div class="card">
       <div class="card-header">
+        <div>
+          <span class="card-title">🔊 Noise Cancellation</span>
+          <span id="ancStatus" class="status status-inactive">OFF</span>
+        </div>
         <button id="ancBtn" class="btn btn-primary">Start ANC</button>
       </div>
       </div>
       <p class="info-text">
+        ⚠️ Software ANC has limitations due to processing delay. Works best combined with focus music to mask background noise.
       </p>
     </div>
     <div class="card">
       <div class="card-header">
+        <div>
+          <span class="card-title">🎵 Focus Music</span>
+          <span id="musicStatus" class="status status-inactive">OFF</span>
+        </div>
         <button id="musicBtn" class="btn btn-primary">Play</button>
       </div>
           <button class="type-btn active" data-type="brown">Brown Noise</button>
           <button class="type-btn" data-type="white">White Noise</button>
           <button class="type-btn" data-type="pink">Pink Noise</button>
+          <button class="type-btn" data-type="sine">Sine Wave</button>
         </div>
       </div>
     </div>
     <div class="tip">
+      💡 Use headphones for best results. Focus music works better than ANC for masking constant sounds like fans.
     </div>
   </div>
   <script>
     let audioContext = null;
     let micStream = null;
+    let sourceNode = null;
+    let scriptNode = null;
+    let ancGainNode = null;
+    let musicSource = null;
+    let musicGainNode = null;
     let ancActive = false;
     let musicActive = false;
     const volumeSlider = document.getElementById('volumeSlider');
     const ancValue = document.getElementById('ancValue');
     const volumeValue = document.getElementById('volumeValue');
+    const messageDiv = document.getElementById('message');
+    const ancStatus = document.getElementById('ancStatus');
+    const musicStatus = document.getElementById('musicStatus');
     const typeButtons = document.querySelectorAll('.type-btn');
+    function showMessage(message, isError = false) {
+      messageDiv.textContent = message;
+      messageDiv.className = isError ? 'error' : 'success';
+      messageDiv.style.display = 'block';
       setTimeout(() => {
+        messageDiv.style.display = 'none';
       }, 5000);
     }
+    function initAudioContext() {
+      if (!audioContext || audioContext.state === 'closed') {
+        audioContext = new (window.AudioContext || window.webkitAudioContext)();
+      }
+      // Resume if suspended (important for mobile)
+      if (audioContext.state === 'suspended') {
+        audioContext.resume();
+      }
+      return audioContext;
+    }
     async function startANC() {
       try {
+        const ctx = initAudioContext();
         const stream = await navigator.mediaDevices.getUserMedia({
           audio: {
             echoCancellation: false,
           }
         });
         micStream = stream;
+        sourceNode = ctx.createMediaStreamSource(stream);
+        scriptNode = ctx.createScriptProcessor(4096, 1, 1);
+        ancGainNode = ctx.createGain();
+        ancGainNode.gain.value = ancSlider.value / 100;
+        scriptNode.onaudioprocess = (e) => {
           const input = e.inputBuffer.getChannelData(0);
+          const output = e.outputBuffer.getChannelData(0);
           const strength = ancSlider.value / 100;
           for (let i = 0; i < input.length; i++) {
+            output[i] = -input[i] * strength;
           }
         };
+        sourceNode.connect(scriptNode);
+        scriptNode.connect(ancGainNode);
+        ancGainNode.connect(ctx.destination);
         ancActive = true;
         ancBtn.textContent = 'Stop ANC';
         ancBtn.className = 'btn btn-danger';
+        ancStatus.textContent = 'ON';
+        ancStatus.className = 'status status-active';
+        showMessage('ANC Started - Microphone active');
       } catch (err) {
+        showMessage('Microphone access denied. Go to browser Settings → Site Settings → Microphone and allow access.', true);
         console.error(err);
       }
     }
     function stopANC() {
+      if (scriptNode) {
+        scriptNode.disconnect();
+        scriptNode = null;
+      }
+      if (sourceNode) {
+        sourceNode.disconnect();
+        sourceNode = null;
+      }
+      if (ancGainNode) {
+        ancGainNode.disconnect();
+        ancGainNode = null;
       }
       if (micStream) {
         micStream.getTracks().forEach(track => track.stop());
         micStream = null;
       }
       ancActive = false;
       ancBtn.textContent = 'Start ANC';
       ancBtn.className = 'btn btn-primary';
+      ancStatus.textContent = 'OFF';
+      ancStatus.className = 'status status-inactive';
+    }
+    function generateNoiseBuffer(ctx, type) {
+      const bufferSize = ctx.sampleRate * 2; // 2 seconds
+      const buffer = ctx.createBuffer(1, bufferSize, ctx.sampleRate);
+      const data = buffer.getChannelData(0);
+      if (type === 'white') {
+        for (let i = 0; i < bufferSize; i++) {
+          data[i] = Math.random() * 2 - 1;
+        }
+      } else if (type === 'brown') {
+        let lastOut = 0;
+        for (let i = 0; i < bufferSize; i++) {
+          const white = Math.random() * 2 - 1;
+          data[i] = (lastOut + (0.02 * white)) / 1.02;
+          lastOut = data[i];
+          data[i] *= 3.5;
+        }
+      } else if (type === 'pink') {
+        let b0 = 0, b1 = 0, b2 = 0, b3 = 0, b4 = 0, b5 = 0, b6 = 0;
+        for (let i = 0; i < bufferSize; i++) {
+          const white = Math.random() * 2 - 1;
+          b0 = 0.99886 * b0 + white * 0.0555179;
+          b1 = 0.99332 * b1 + white * 0.0750759;
+          b2 = 0.96900 * b2 + white * 0.1538520;
+          b3 = 0.86650 * b3 + white * 0.3104856;
+          b4 = 0.55000 * b4 + white * 0.5329522;
+          b5 = -0.7616 * b5 - white * 0.0168980;
+          data[i] = b0 + b1 + b2 + b3 + b4 + b5 + b6 + white * 0.5362;
+          data[i] *= 0.11;
+          b6 = white * 0.115926;
+        }
+      }
+      return buffer;
     }
     function startMusic() {
       try {
+        const ctx = initAudioContext();
         const vol = volumeSlider.value / 100;
+        musicGainNode = ctx.createGain();
+        musicGainNode.gain.value = vol;
         if (musicType === 'brown' || musicType === 'white' || musicType === 'pink') {
+          const buffer = generateNoiseBuffer(ctx, musicType);
+          musicSource = ctx.createBufferSource();
+          musicSource.buffer = buffer;
+          musicSource.loop = true;
+          musicSource.connect(musicGainNode);
+        } else if (musicType === 'sine') {
+          musicSource = ctx.createOscillator();
+          musicSource.type = 'sine';
+          musicSource.frequency.value = 220;
+          musicSource.connect(musicGainNode);
         }
+        musicGainNode.connect(ctx.destination);
+        musicSource.start(0);
         musicActive = true;
         musicBtn.textContent = 'Stop';
         musicBtn.className = 'btn btn-danger';
+        musicStatus.textContent = 'ON';
+        musicStatus.className = 'status status-active';
+        showMessage('Focus music playing');
       } catch (err) {
+        showMessage('Failed to start music. Try tapping the screen first to enable audio.', true);
         console.error(err);
       }
     }
     function stopMusic() {
+      if (musicSource) {
+        try {
+          musicSource.stop();
+        } catch (e) {
+          // Already stopped
         }
+        musicSource.disconnect();
+        musicSource = null;
       }
+      if (musicGainNode) {
+        musicGainNode.disconnect();
+        musicGainNode = null;
       }
       musicActive = false;
       musicBtn.textContent = 'Play';
       musicBtn.className = 'btn btn-primary';
+      musicStatus.textContent = 'OFF';
+      musicStatus.className = 'status status-inactive';
     }
     ancBtn.addEventListener('click', () => {
     ancSlider.addEventListener('input', (e) => {
       ancValue.textContent = e.target.value;
+      if (ancGainNode) {
+        ancGainNode.gain.value = e.target.value / 100;
       }
     });
     volumeSlider.addEventListener('input', (e) => {
       volumeValue.textContent = e.target.value;
+      if (musicGainNode) {
+        musicGainNode.gain.value = e.target.value / 100;
       }
     });
         }
       });
     });
+    // Enable audio on first user interaction (required for mobile)
+    document.body.addEventListener('click', () => {
+      if (audioContext && audioContext.state === 'suspended') {
+        audioContext.resume();
+      }
+    }, { once: true });
   </script>
 </body>
 </html>