Spaces:

kimhyunwoo
/

sound

Running

App Files Files Community

kimhyunwoo commited on 20 days ago

Commit

bcaf481

verified ·

1 Parent(s): fe818d2

Update index.html

Browse files

Files changed (1) hide show

index.html +128 -18

index.html CHANGED Viewed

@@ -1,19 +1,129 @@
-<!doctype html>
 <html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!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>
+  <h1>FFT 분석 후 사인파/코사인파 재생</h1>
+  <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)
+    // 재생할 사인파/코사인파의 개수 (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>
+</body>
+</html>