Spaces:

kimhyunwoo
/

sound

Running

App Files Files Community

kimhyunwoo commited on 25 days ago

Commit

34a689f

verified ·

1 Parent(s): bcaf481

Update index.html

Browse files

Files changed (1) hide show

index.html +173 -79

index.html CHANGED Viewed

@@ -1,11 +1,12 @@
 <!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; }
   #status { margin-top: 20px; color: gray; }
 </style>
 </head>
 <body>
@@ -14,17 +15,21 @@
   <p>마이크 입력을 받아 FFT 분석 후 주파수 성분으로 소리를 재구성합니다.</p>
   <button id="startButton">마이크 입력 시작 및 재생</button>
-  <div id="status"></div>
   <script>
     let audioContext;
     let analyser;
     let source;
-    let oscillatorNode; // 사인/코사인 파형을 생성할 오실레이터 노드
     // FFT 분석할 주파수 성분의 개수 (2의 거듭제곱)
     const fftSize = 2048;
-    const bufferLength = fftSize / 2; // 주파수 데이터 배열의 크기
     // FFT 분석 결과를 저장할 배열
     let dataArray = new Uint8Array(bufferLength); // 주파수 크기 (0-255)
@@ -32,96 +37,185 @@
     // 재생할 사인파/코사인파의 개수 (FFT 분석 결과를 몇 개의 파형으로 재구성할지)
     const numReconstructedOscillators = 50;
-    document.getElementById('startButton').addEventListener('click', async () => {
-      try {
-        // 오디오 컨텍스트 생성 (브라우저 호환성을 위해 접두사 고려)
-        audioContext = new (window.AudioContext || window.webkitAudioContext)();
-        // 마이크 입력 스트림 가져오기
-        const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
-        // 미디어 스트림 소스 노드 생성
-        source = audioContext.createMediaStreamSource(stream);
-        // 분석기 노드 생성
-        analyser = audioContext.createAnalyser();
-        analyser.fftSize = fftSize; // FFT 사이즈 설정
-        // 마이크 소스를 분석기 노드에 연결
-        source.connect(analyser);
-        // ------------- FFT 분석 및 파형 재구성 로직 -------------
-        // 실시간으로 FFT 분석을 수행하는 함수
-        const processAudio = () => {
-          // 주파수 데이터 가져오기 (크기)
-          analyser.getByteFrequencyData(dataArray);
-          // 이전 오실레이터 노드가 있다면 연결 해제 및 삭제
-          if (oscillatorNode) {
-            oscillatorNode.disconnect();
-            oscillatorNode = null;
-          }
-          // 새로운 게인 노드 생성 (볼륨 조절)
-          const gainNode = audioContext.createGain();
-          gainNode.gain.value = 0.5; // 재생 볼륨 (조절 가능)
-          // 게인 노드를 최종 출력에 연결
-          gainNode.connect(audioContext.destination);
-          // 오실레이터 노드를 담을 배열
-          const oscillators = [];
-          // FFT 분석 결과를 기반으로 사인파/코사인파 생성 (단순화된 예제)
-          for (let i = 0; i < numReconstructedOscillators; i++) {
-            const oscillator = audioContext.createOscillator();
-            // 주파수 데이터 배열에서 해당하는 주파수 인덱스 계산
-            const frequencyIndex = Math.min(Math.floor(i * (bufferLength / numReconstructedOscillators)), bufferLength - 1);
-            // 해당 주파수 성분의 크기를 기반으로 주파수 설정 (단순화)
-            // 실제로는 analyser.getByteFrequencyData는 크기만 제공하며, 주파수는 인덱스와 샘플 레이트로 계산해야 합니다.
-            // 여기서의 frequency는 예시를 위해 간단하게 주파수 인덱스와 비례하게 설정합니다.
-            const frequency = audioContext.sampleRate / fftSize * frequencyIndex; // 실제 주파수 계산
-            // 주파수가 너무 낮거나 높으면 제외 (조절 가능)
-            if (frequency > 50 && frequency < 15000) {
-              oscillator.type = 'sine'; // 또는 'cosine'
-              oscillator.frequency.setValueAtTime(frequency, audioContext.currentTime);
-              // 각 오실레이터의 볼륨을 해당 주파수 성분의 크기에 비례하여 설정 (단순화)
-              const oscillatorGain = audioContext.createGain();
-              oscillatorGain.gain.value = dataArray[frequencyIndex] / 255 * 0.1; // 크기에 비례하여 볼륨 조절
-              // 오실레이터를 게인 노드에 연결하고 게인 노드를 메인 게인 노드에 연결
-              oscillator.connect(oscillatorGain);
-              oscillatorGain.connect(gainNode);
-              // 오실레이터 시작
-              oscillator.start();
-              // 오실레이터 배열에 추가
-              oscillators.push(oscillator);
-            }
-          }
-          // 생성된 오실레이터 노드를 저장
-          oscillatorNode = oscillators;
-          // 다음 프레임에 다시 분석 및 재생 요청
-          requestAnimationFrame(processAudio);
-        };
-        // 분석 및 재생 시작
-        processAudio();
-        document.getElementById('status').textContent = '마이크 입력 및 재생 중...';
-      } catch (err) {
-        console.error('마이크 접근 오류:', err);
-        document.getElementById('status').textContent = `오류 발생: ${err.message}`;
       }
-    });
   </script>

 <!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; }
   #status { margin-top: 20px; color: gray; }
+  .error { color: red; font-weight: bold; }
 </style>
 </head>
 <body>
   <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;
+          console.log("AudioContext closed.");
+        });
       }
+      // UI 업데이트
+      startButton.disabled = false;
+      stopButton.disabled = true;
+      statusDiv.textContent = '중지됨.';
+      dataArray = new Uint8Array(fftSize / 2); // dataArray 초기화
+    };
   </script>