Spaces:

kimhyunwoo
/

sound

Running

App Files Files Community

kimhyunwoo commited on 20 days ago

Commit

390eac0

verified ·

1 Parent(s): 6574219

Update index.html

Browse files

Files changed (1) hide show

index.html +205 -128

index.html CHANGED Viewed

@@ -1,226 +1,303 @@
 <!DOCTYPE html>
 <html>
 <head>
-<title>FFT Analysis and Sine/Cosine Wave Resynthesis (Corrected)</title>
 <style>
-  body { font-family: sans-serif; text-align: center; margin-top: 50px; }
-  button { padding: 10px 20px; font-size: 16px; cursor: pointer; margin: 5px; }
-  #status { margin-top: 20px; color: gray; }
   .error { color: red; font-weight: bold; }
 </style>
 </head>
 <body>
-  <h1>FFT Analysis and Sine/Cosine Wave Resynthesis</h1>
-  <p>Takes microphone input, performs FFT analysis, and reconstructs the sound using frequency components.</p>
-  <button id="startButton">Start Microphone Input and Playback</button>
-  <button id="stopButton" disabled>Stop</button>
   <div id="status">Waiting...</div>
   <script>
     let audioContext;
     let analyser;
-    let microphoneSource; // Renamed from 'source' for clarity
-    let mainGainNode; // Renamed from 'gainNode' for clarity
-    let animationFrameId = null; // ID for requestAnimationFrame
-    let activeOscillators = []; // Array to store currently active oscillator nodes
-    // FFT analysis parameters
-    const fftSize = 2048; // Number of samples for FFT (power of 2)
-    // Size of the frequency data array (fftSize / 2)
-    const frequencyBinCount = fftSize / 2;
-    // Array to store FFT analysis results
-    let frequencyDataArray = new Uint8Array(frequencyBinCount); // Frequency magnitude (0-255)
-    // Number of sine/cosine waves to generate for resynthesis
-    // How many frequency components from the FFT result will be used to reconstruct the sound
-    const numReconstructedOscillators = 50;
-    // Get DOM elements
-    const startButton = document.getElementById('startButton');
-    const stopButton = document.getElementById('stopButton');
-    const statusDiv = document.getElementById('status');
-    // ---------- Audio Processing Function ----------
     const processAudio = () => {
-      if (!analyser) return; // Exit if analyser is not ready
-      // 1. FFT Analysis: Get frequency data
-      analyser.getByteFrequencyData(frequencyDataArray);
-      // 2. Cleanup Previous Oscillators: Stop and disconnect all currently active oscillators
       activeOscillators.forEach(osc => {
         try {
-          osc.stop(); // Stop immediately
-          osc.disconnect(); // Disconnect from all connections
-        } catch (e) {
-          // Ignore errors if the oscillator was already stopped or disconnected
-          // console.warn("Error stopping/disconnecting oscillator:", e);
-        }
       });
-      activeOscillators = []; // Clear the array
-      // 3. Create and Connect New Oscillators based on FFT results
-      // Analyze frequency components and create a fixed number of oscillators
       for (let i = 0; i < numReconstructedOscillators; i++) {
         const oscillator = audioContext.createOscillator();
-        // Calculate the corresponding frequency index in the data array
-        // Ensure index doesn't overlap if frequencyBinCount > numReconstructedOscillators
         const frequencyIndex = Math.min(Math.floor(i * (frequencyBinCount / numReconstructedOscillators)), frequencyBinCount - 1);
-        // Get the magnitude (amplitude) of this frequency component
-        const magnitude = frequencyDataArray[frequencyIndex];
-        // Only create an oscillator if the magnitude is above a certain threshold (reduces noise)
-        if (magnitude > 10) { // Threshold value (adjustable)
-            // Calculate the actual frequency in Hz
             const frequency = (frequencyIndex * audioContext.sampleRate) / fftSize;
-            // Optional: Limit the frequency range for playback
-            if (frequency > 20 && frequency < audioContext.sampleRate / 2) { // Within audible range
-                oscillator.type = 'sine'; // Waveform type: 'sine', 'square', 'sawtooth', 'triangle', or 'custom'
                 try {
-                  // Ensure the frequency is valid (must be > 0)
-                  if (frequency > 0) {
-                      oscillator.frequency.setValueAtTime(frequency, audioContext.currentTime);
-                  } else {
-                      continue; // Skip if frequency is invalid
-                  }
                 } catch (e) {
-                    console.error("Error setting frequency:", e, "Frequency:", frequency);
-                    continue; // Skip this oscillator if there's an error
                 }
-                // Create a gain node for this individual oscillator to control its volume
-                // Set the volume proportional to the magnitude of the frequency component
                 const oscGainNode = audioContext.createGain();
-                // Normalize magnitude (0-255) to a 0-1 range, apply non-linear scaling and overall volume adjustment
-                oscGainNode.gain.setValueAtTime((magnitude / 255) ** 2 * 0.5, audioContext.currentTime); // Volume control (0.5 is additional damping)
-                // Connect: Oscillator -> Individual Gain Node -> Main Gain Node -> Output
                 oscillator.connect(oscGainNode);
-                oscGainNode.connect(mainGainNode);
-                // Start the oscillator immediately
                 oscillator.start(audioContext.currentTime);
-                // Add the oscillator to the list of active oscillators
                 activeOscillators.push(oscillator);
             }
         }
       }
-      // 4. Request the next frame for continuous processing
-      animationFrameId = requestAnimationFrame(processAudio);
     };
-    // ---------- Start Button Click Event Handler ----------
-    startButton.addEventListener('click', async () => {
-      try {
-        if (audioContext) { // If already running, do nothing
-          console.log("AudioContext is already active.");
-          return;
-        }
         statusDiv.textContent = 'Accessing microphone...';
         statusDiv.classList.remove('error');
         // 1. Create Audio Context
         audioContext = new (window.AudioContext || window.webkitAudioContext)();
-        // 2. Get Microphone Input Stream
         const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
-        // 3. Create and Connect Audio Nodes
-        microphoneSource = audioContext.createMediaStreamSource(stream); // Microphone source node
-        analyser = audioContext.createAnalyser();                     // Analyser node
-        analyser.fftSize = fftSize;                                    // Set FFT size
-        mainGainNode = audioContext.createGain();                      // Main volume control node
-        mainGainNode.gain.setValueAtTime(0.5, audioContext.currentTime); // Set initial volume (0.5)
-        // Connect nodes: Microphone Source -> Analyser -> Main Gain -> Destination (Speakers)
-        microphoneSource.connect(analyser);
-        // Note: The analyser node itself doesn't output sound directly.
-        // Connect the source directly to gain if you want to hear the original mic input as well (uncomment below)
-        // microphoneSource.connect(mainGainNode);
-        mainGainNode.connect(audioContext.destination); // Connect main gain to speakers
-        // Initialize/Reset the frequency data array size based on the analyser
         frequencyDataArray = new Uint8Array(analyser.frequencyBinCount);
-        // 4. Start Audio Processing Loop
-        processAudio();
-        // Update UI
         startButton.disabled = true;
         stopButton.disabled = false;
-        statusDiv.textContent = 'Microphone input active and playing back...';
       } catch (err) {
-        console.error('Error starting audio:', err);
         statusDiv.textContent = `Error: ${err.message}`;
         statusDiv.classList.add('error');
-        // Clean up resources on error
-        stopAudio();
       }
-    });
-    // ---------- Stop Button Click Event Handler ----------
-    stopButton.addEventListener('click', () => {
-      stopAudio();
-    });
-    // ---------- Function to Stop Audio and Clean Up Resources ----------
     const stopAudio = () => {
       if (animationFrameId) {
-        cancelAnimationFrame(animationFrameId); // Stop the animation loop
         animationFrameId = null;
       }
-      // Stop and disconnect all active oscillators
       activeOscillators.forEach(osc => {
         try {
           osc.stop();
           osc.disconnect();
-        } catch (e) { /* Ignore errors if already stopped/disconnected */ }
       });
       activeOscillators = [];
-      // Disconnect audio nodes
       if (microphoneSource) {
-        microphoneSource.disconnect();
-        // Stop the microphone track(s) in the stream
-        microphoneSource.mediaStream.getTracks().forEach(track => track.stop());
-        microphoneSource = null;
-      }
-      if (analyser) {
-        analyser.disconnect();
-        analyser = null;
-      }
-      if (mainGainNode) {
-        mainGainNode.disconnect();
-        mainGainNode = null;
       }
-      // Close the Audio Context to release system resources
       if (audioContext && audioContext.state !== 'closed') {
         audioContext.close().then(() => {
-          audioContext = null;
-          console.log("AudioContext closed.");
         });
       }
       // Update UI
       startButton.disabled = false;
       stopButton.disabled = true;
       statusDiv.textContent = 'Stopped.';
-      // Reset frequency data array
-      frequencyDataArray = new Uint8Array(frequencyBinCount);
     };
   </script>
 </body>

 <!DOCTYPE html>
 <html>
 <head>
+<title>FFT Analysis with Visualization and Controls</title>
 <style>
+  body { font-family: sans-serif; text-align: center; margin-top: 30px; background-color: #f4f4f4; }
+  #controls button { padding: 10px 15px; font-size: 15px; cursor: pointer; margin: 5px; border: none; border-radius: 5px; }
+  #startButton { background-color: #4CAF50; color: white; }
+  #stopButton { background-color: #f44336; color: white; }
+  #startButton:disabled, #stopButton:disabled { background-color: #cccccc; cursor: not-allowed; }
+  #status { margin-top: 15px; color: #555; font-weight: bold; min-height: 20px; }
   .error { color: red; font-weight: bold; }
+  #visualizerCanvas { display: block; margin: 20px auto; background-color: #000; border: 1px solid #ccc; }
+  #volumeControl { margin-top: 15px; }
+  #logArea {
+    margin: 20px auto;
+    width: 80%;
+    max-width: 600px;
+    height: 100px;
+    overflow-y: scroll;
+    border: 1px solid #ccc;
+    background-color: #fff;
+    text-align: left;
+    padding: 10px;
+    font-size: 12px;
+    font-family: monospace;
+  }
+  label { font-size: 14px; margin-right: 5px; }
 </style>
 </head>
 <body>
+  <h1>FFT Analysis with Visualization and Controls</h1>
+  <p>Real-time microphone input analysis, FFT visualization, and basic sound resynthesis.</p>
+  <div id="controls">
+    <button id="startButton">Start</button>
+    <button id="stopButton" disabled>Stop</button>
+  </div>
+  <div id="volumeControl">
+      <label for="volumeSlider">Volume:</label>
+      <input type="range" id="volumeSlider" min="0" max="1" step="0.01" value="0.5" disabled>
+  </div>
   <div id="status">Waiting...</div>
+  <canvas id="visualizerCanvas" width="600" height="200"></canvas>
+  <label for="logArea">Log:</label>
+  <div id="logArea"></div>
   <script>
+    // --- DOM Elements ---
+    const startButton = document.getElementById('startButton');
+    const stopButton = document.getElementById('stopButton');
+    const statusDiv = document.getElementById('status');
+    const canvas = document.getElementById('visualizerCanvas');
+    const canvasCtx = canvas.getContext('2d');
+    const volumeSlider = document.getElementById('volumeSlider');
+    const logArea = document.getElementById('logArea');
+    // --- Web Audio API Variables ---
     let audioContext;
     let analyser;
+    let microphoneSource;
+    let mainGainNode;
+    let animationFrameId = null; // For processAudio loop
+    let visualizerFrameId = null; // For drawVisualizer loop
+    let activeOscillators = [];
+    // --- Configuration ---
+    const fftSize = 2048;
+    const frequencyBinCount = fftSize / 2; // analyser.frequencyBinCount
+    let frequencyDataArray = new Uint8Array(frequencyBinCount);
+    const numReconstructedOscillators = 50; // Number of oscillators for resynthesis
+    // --- Logging Function ---
+    const logMessage = (message, isError = false) => {
+        console[isError ? 'error' : 'log'](message);
+        const logEntry = document.createElement('div');
+        logEntry.textContent = `[${new Date().toLocaleTimeString()}] ${message}`;
+        if (isError) {
+            logEntry.style.color = 'red';
+        }
+        logArea.appendChild(logEntry);
+        logArea.scrollTop = logArea.scrollHeight; // Auto-scroll to bottom
+    };
+    // --- Visualization Function ---
+    const drawVisualizer = () => {
+        if (!analyser) return;
+        visualizerFrameId = requestAnimationFrame(drawVisualizer); // Schedule next frame
+        // Get frequency data
+        analyser.getByteFrequencyData(frequencyDataArray);
+        // Clear canvas
+        canvasCtx.fillStyle = '#000'; // Black background
+        canvasCtx.fillRect(0, 0, canvas.width, canvas.height);
+        // Draw frequency bars
+        const barWidth = (canvas.width / frequencyBinCount) * 2.5; // Adjust multiplier for bar density
+        let barHeight;
+        let x = 0;
+        for (let i = 0; i < frequencyBinCount; i++) {
+            barHeight = frequencyDataArray[i] * (canvas.height / 255); // Scale height
+            // Color gradient (e.g., blue to red based on height)
+            const hue = (barHeight / canvas.height) * 240; // Hue range (e.g., 0=red, 240=blue)
+            canvasCtx.fillStyle = `hsl(${240 - hue}, 100%, 50%)`;
+            canvasCtx.fillRect(x, canvas.height - barHeight, barWidth, barHeight);
+            x += barWidth + 1; // Move to the next bar position
+        }
+    };
+    // --- Audio Processing Function (Resynthesis) ---
     const processAudio = () => {
+      if (!analyser) return;
+      animationFrameId = requestAnimationFrame(processAudio); // Schedule next frame
+      // 1. FFT Analysis (Data is fetched by drawVisualizer, but could be fetched here too if needed)
+      // analyser.getByteFrequencyData(frequencyDataArray); // Can be redundant if visualizer runs
+      // 2. Cleanup Previous Oscillators
       activeOscillators.forEach(osc => {
         try {
+          osc.stop();
+          osc.disconnect();
+        } catch (e) { /* Ignore */ }
       });
+      activeOscillators = [];
+      // 3. Create New Oscillators
       for (let i = 0; i < numReconstructedOscillators; i++) {
         const oscillator = audioContext.createOscillator();
         const frequencyIndex = Math.min(Math.floor(i * (frequencyBinCount / numReconstructedOscillators)), frequencyBinCount - 1);
+        const magnitude = frequencyDataArray[frequencyIndex]; // Use data from visualizer's last fetch
+        if (magnitude > 10) { // Magnitude threshold
             const frequency = (frequencyIndex * audioContext.sampleRate) / fftSize;
+            if (frequency > 20 && frequency < audioContext.sampleRate / 2) {
+                oscillator.type = 'sine';
                 try {
+                    if (frequency > 0) {
+                        oscillator.frequency.setValueAtTime(frequency, audioContext.currentTime);
+                    } else continue;
                 } catch (e) {
+                    logMessage(`Error setting frequency: ${frequency} Hz. ${e}`, true);
+                    continue;
                 }
                 const oscGainNode = audioContext.createGain();
+                // Volume based on magnitude, squared for emphasis, scaled down
+                oscGainNode.gain.setValueAtTime((magnitude / 255) ** 2 * 0.8, audioContext.currentTime); // Adjusted scaling
                 oscillator.connect(oscGainNode);
+                oscGainNode.connect(mainGainNode); // Connect to main volume control
                 oscillator.start(audioContext.currentTime);
                 activeOscillators.push(oscillator);
             }
         }
       }
     };
+    // --- Start Audio Function ---
+    const startAudio = async () => {
+      logMessage("Attempting to start audio...");
+      if (audioContext) {
+        logMessage("AudioContext already active.");
+        return;
+      }
+      try {
         statusDiv.textContent = 'Accessing microphone...';
         statusDiv.classList.remove('error');
         // 1. Create Audio Context
         audioContext = new (window.AudioContext || window.webkitAudioContext)();
+        logMessage("AudioContext created.");
+        // 2. Get Microphone Stream
         const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+        logMessage("Microphone access granted.");
+        // 3. Create Nodes
+        microphoneSource = audioContext.createMediaStreamSource(stream);
+        analyser = audioContext.createAnalyser();
+        analyser.fftSize = fftSize;
+        mainGainNode = audioContext.createGain();
+        mainGainNode.gain.setValueAtTime(volumeSlider.value, audioContext.currentTime); // Initial volume
+        // Reinitialize data array based on actual bin count
         frequencyDataArray = new Uint8Array(analyser.frequencyBinCount);
+        // 4. Connect Nodes: Mic -> Analyser -> Main Gain -> Destination
+        microphoneSource.connect(analyser);
+        // We only connect the *resynthesized* sound (via oscillators) to mainGainNode
+        mainGainNode.connect(audioContext.destination);
+        logMessage("Audio nodes connected.");
+        // 5. Start Processing and Visualization
+        processAudio();       // Start resynthesis loop
+        drawVisualizer();     // Start visualization loop
+        logMessage("Audio processing and visualization started.");
+        // 6. Update UI
         startButton.disabled = true;
         stopButton.disabled = false;
+        volumeSlider.disabled = false;
+        statusDiv.textContent = 'Running...';
       } catch (err) {
+        logMessage(`Error starting audio: ${err.message}`, true);
         statusDiv.textContent = `Error: ${err.message}`;
         statusDiv.classList.add('error');
+        stopAudio(); // Clean up on error
       }
+    };
+    // --- Stop Audio Function ---
     const stopAudio = () => {
+      logMessage("Stopping audio...");
       if (animationFrameId) {
+        cancelAnimationFrame(animationFrameId);
         animationFrameId = null;
       }
+      if (visualizerFrameId) {
+          cancelAnimationFrame(visualizerFrameId);
+          visualizerFrameId = null;
+      }
+      // Stop and disconnect oscillators
       activeOscillators.forEach(osc => {
         try {
           osc.stop();
           osc.disconnect();
+        } catch (e) { /* Ignore */ }
       });
       activeOscillators = [];
+      // Disconnect main nodes
+      if (analyser) analyser.disconnect();
+      if (mainGainNode) mainGainNode.disconnect();
       if (microphoneSource) {
+          microphoneSource.mediaStream.getTracks().forEach(track => track.stop()); // IMPORTANT: Stop mic track
+          microphoneSource.disconnect();
       }
+      logMessage("Nodes disconnected, microphone track stopped.");
+      // Close Audio Context
       if (audioContext && audioContext.state !== 'closed') {
         audioContext.close().then(() => {
+          logMessage("AudioContext closed.");
+          audioContext = null; // Ensure it's nullified
         });
+      } else {
+          audioContext = null; // Ensure it's nullified if already closed or never opened
       }
+      // Clear visualizer
+      canvasCtx.fillStyle = '#333';
+      canvasCtx.fillRect(0, 0, canvas.width, canvas.height);
+      canvasCtx.fillStyle = '#fff';
+      canvasCtx.textAlign = 'center';
+      canvasCtx.fillText("Stopped", canvas.width / 2, canvas.height / 2);
       // Update UI
       startButton.disabled = false;
       stopButton.disabled = true;
+      volumeSlider.disabled = true;
       statusDiv.textContent = 'Stopped.';
+      logMessage("Audio stopped successfully.");
     };
+    // --- Event Listeners ---
+    startButton.addEventListener('click', startAudio);
+    stopButton.addEventListener('click', stopAudio);
+    volumeSlider.addEventListener('input', (event) => {
+        if (mainGainNode) {
+            mainGainNode.gain.setValueAtTime(event.target.value, audioContext.currentTime);
+        }
+    });
+    // Initial canvas state
+    canvasCtx.fillStyle = '#333';
+    canvasCtx.fillRect(0, 0, canvas.width, canvas.height);
+    canvasCtx.fillStyle = '#fff';
+    canvasCtx.textAlign = 'center';
+    canvasCtx.fillText("Waiting to start...", canvas.width / 2, canvas.height / 2);
   </script>
 </body>