Spaces:

kimhyunwoo
/

sound

Running

App Files Files Community

kimhyunwoo commited on 20 days ago

Commit

6574219

verified ·

1 Parent(s): 34a689f

Update index.html

Browse files

Files changed (1) hide show

index.html +98 -94

index.html CHANGED Viewed

@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html>
 <head>
-<title>FFT 분석 후 사인파/코사인파 재생 (수정)</title>
 <style>
   body { font-family: sans-serif; text-align: center; margin-top: 50px; }
   button { padding: 10px 20px; font-size: 16px; cursor: pointer; margin: 5px; }
@@ -11,198 +11,201 @@
 </head>
 <body>
-  <h1>FFT 분석 후 사인파/코사인파 재생</h1>
-  <p>마이크 입력을 받아 FFT 분석 후 주파수 성분으로 소리를 재구성합니다.</p>
-  <button id="startButton">마이크 입력 시작 및 재생</button>
-  <button id="stopButton" disabled>중지</button>
-  <div id="status">대기 중...</div>
   <script>
     let audioContext;
     let analyser;
-    let source;
-    let gainNode; // 전체 볼륨 조절 노드
-    let animationFrameId = null; // requestAnimationFrame ID
-    let activeOscillators = []; // 현재 활성화된 오실레이터 노드들을 저장하는 배열
-    // FFT 분석할 주파수 성분의 개수 (2의 거듭제곱)
-    const fftSize = 2048;
-    // 주파수 데이터 배열의 크기 (fftSize / 2)
-    const bufferLength = analyser ? analyser.frequencyBinCount : fftSize / 2;
-    // FFT 분석 결과를 저장할 배열
-    let dataArray = new Uint8Array(bufferLength); // 주파수 크기 (0-255)
-    // 재생할 사인파/코사인파의 개수 (FFT 분석 결과를 몇 개의 파형으로 재구성할지)
     const numReconstructedOscillators = 50;
     const startButton = document.getElementById('startButton');
     const stopButton = document.getElementById('stopButton');
     const statusDiv = document.getElementById('status');
-    // ---------- 오디오 처리 함수 ----------
     const processAudio = () => {
-      if (!analyser) return; // analyser가 없으면 종료
-      // 1. FFT 분석: 주파수 데이터 가져오기
-      analyser.getByteFrequencyData(dataArray);
-      // 2. 이전 오실레이터 정리: 현재 활성화된 모든 오실레이터 중지 및 연결 해제
       activeOscillators.forEach(osc => {
         try {
-          osc.stop(); // 즉시 중지
-          osc.disconnect(); // 모든 연결 해제
         } catch (e) {
-          // 이미 중지되었거나 연결 해제된 경우 오류 무시
           // console.warn("Error stopping/disconnecting oscillator:", e);
         }
       });
-      activeOscillators = []; // 배열 비우기
-      // 3. 새로운 오실레이터 생성 및 연결
-      // 주파수 성분 분석하여 일정 개수의 오실레이터 생성
       for (let i = 0; i < numReconstructedOscillators; i++) {
         const oscillator = audioContext.createOscillator();
-        // 주파수 데이터 배열에서 해당하는 주파수 인덱스 계산
-        // bufferLength가 numReconstructedOscillators보다 클 때 인덱스가 겹치지 않도록 계산
-        const frequencyIndex = Math.min(Math.floor(i * (bufferLength / numReconstructedOscillators)), bufferLength - 1);
-        // 해당 인덱스의 주파수 크기 가져오기
-        const magnitude = dataArray[frequencyIndex];
-        // 크기가 일정 값 이상인 경우에만 오실레이터 생성 (노이즈 감소 효과)
-        if (magnitude > 10) { // 임계값 (조절 가능)
-            // 실제 주파수 계산 (Hz)
             const frequency = (frequencyIndex * audioContext.sampleRate) / fftSize;
-            // 재생할 주파수 범위 제한 (선택 사항)
-            if (frequency > 20 && frequency < audioContext.sampleRate / 2) { // 가청 주파수 범위 내
-                oscillator.type = 'sine'; // 파형 타입: 'sine', 'square', 'sawtooth', 'triangle' 또는 'custom'
                 try {
-                  // frequency 값이 유효한지 확인 (0보다 커야 함)
                   if (frequency > 0) {
                       oscillator.frequency.setValueAtTime(frequency, audioContext.currentTime);
                   } else {
-                      continue; // 유효하지 않은 주파수는 건너뜀
                   }
                 } catch (e) {
                     console.error("Error setting frequency:", e, "Frequency:", frequency);
-                    continue; // 오류 발생 시 해당 오실레이터 건너뜀
                 }
-                // 각 오실레이터의 볼륨을 해당 주파수 성분의 크기에 비례하여 설정
-                // magnitude(0~255)를 0~1 범위로 정규화하고, 전체 볼륨 고려
                 const oscGainNode = audioContext.createGain();
-                // magnitude가 클수록 소리가 커지도록 설정 (비선형적으로 조절 가능)
-                oscGainNode.gain.setValueAtTime((magnitude / 255) ** 2 * 0.5, audioContext.currentTime); // 볼륨 조절 (0.5는 추가 감쇠)
-                // 오실레이터 -> 개별 게인 노드 -> 전체 게인 노드 -> 출력
                 oscillator.connect(oscGainNode);
-                oscGainNode.connect(gainNode);
-                // 오실레이터 시작 (현재 시간부터)
                 oscillator.start(audioContext.currentTime);
-                // 활성화된 오실레이터 배열에 추가
                 activeOscillators.push(oscillator);
             }
         }
       }
-      // 4. 다음 프레임 요청
       animationFrameId = requestAnimationFrame(processAudio);
     };
-    // ---------- 시작 버튼 클릭 이벤트 ----------
     startButton.addEventListener('click', async () => {
       try {
-        if (audioContext) { // 이미 실행 중이면 반환
-          console.log("AudioContext already active.");
           return;
         }
-        statusDiv.textContent = '마이크 접근 중...';
         statusDiv.classList.remove('error');
-        // 1. 오디오 컨텍스트 생성
         audioContext = new (window.AudioContext || window.webkitAudioContext)();
-        // 2. 마이크 입력 스트림 가져오기
         const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
-        // 3. 오디오 노드 생성 및 연결
-        source = audioContext.createMediaStreamSource(stream); // 마이크 소스
-        analyser = audioContext.createAnalyser();           // 분석기
-        analyser.fftSize = fftSize;                          // FFT 사이즈 설정
-        gainNode = audioContext.createGain();                // 전체 볼륨 조절 노드
-        gainNode.gain.setValueAtTime(0.5, audioContext.currentTime); // 초기 볼륨 설정 (0.5)
-        // 연결: 마이크 소스 -> 분석기 -> 전체 게인 -> 출력
-        source.connect(analyser);
-        // 주의: 분석기 노드에서 직접 출력으로 소리가 나가지 않도록 gainNode에만 연결
-        // source.connect(gainNode); // 필요에 따라 원본 소리도 출력하려면 연결
-        gainNode.connect(audioContext.destination); // 최종 스피커 출력
-        // dataArray 크기 재설정 (analyser 생성 후)
-        dataArray = new Uint8Array(analyser.frequencyBinCount);
-        // 4. 오디오 처리 시작
         processAudio();
-        // UI 업데이트
         startButton.disabled = true;
         stopButton.disabled = false;
-        statusDiv.textContent = '마이크 입력 및 재생 중...';
       } catch (err) {
-        console.error('오디오 시작 오류:', err);
-        statusDiv.textContent = `오류: ${err.message}`;
         statusDiv.classList.add('error');
-        // 오류 발생 시 자원 정리
         stopAudio();
       }
     });
-    // ---------- 중지 버튼 클릭 이벤트 ----------
     stopButton.addEventListener('click', () => {
       stopAudio();
     });
-    // ---------- 오디오 중지 및 자원 정리 함수 ----------
     const stopAudio = () => {
       if (animationFrameId) {
-        cancelAnimationFrame(animationFrameId); // 애니메이션 프레임 중지
         animationFrameId = null;
       }
-      // 활성화된 오실레이터 중지 및 연결 해제
       activeOscillators.forEach(osc => {
         try {
           osc.stop();
           osc.disconnect();
-        } catch (e) { /* 이미 중지/해제된 경우 무시 */ }
       });
       activeOscillators = [];
-      // 오디오 노드 연결 해제
-      if (source) {
-        source.disconnect();
-        source.mediaStream.getTracks().forEach(track => track.stop()); // 마이크 스트림 트랙 중지
-        source = null;
       }
       if (analyser) {
         analyser.disconnect();
         analyser = null;
       }
-      if (gainNode) {
-        gainNode.disconnect();
-        gainNode = null;
       }
-      // 오디오 컨텍스트 닫기 (자원 해제)
       if (audioContext && audioContext.state !== 'closed') {
         audioContext.close().then(() => {
           audioContext = null;
@@ -210,11 +213,12 @@
         });
       }
-      // UI 업데이트
       startButton.disabled = false;
       stopButton.disabled = true;
-      statusDiv.textContent = '중지됨.';
-      dataArray = new Uint8Array(fftSize / 2); // dataArray 초기화
     };
   </script>

 <!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; }
 </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;
         });
       }
+      // Update UI
       startButton.disabled = false;
       stopButton.disabled = true;
+      statusDiv.textContent = 'Stopped.';
+      // Reset frequency data array
+      frequencyDataArray = new Uint8Array(frequencyBinCount);
     };
   </script>