Spaces:

kimhyunwoo
/

pp

Running

App Files Files Community

kimhyunwoo commited on 12 days ago

Commit

407a467

verified ·

1 Parent(s): 7b4c04c

Update index.html

Browse files

Files changed (1) hide show

index.html +274 -19

index.html CHANGED Viewed

@@ -1,19 +1,274 @@
-<!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 lang="ko">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>피치 감지 및 피아노 합성</title>
+    <style>
+        body {
+            font-family: sans-serif;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            height: 100vh;
+            margin: 0;
+            background-color: #f4f4f4;
+        }
+        #controls {
+            margin-bottom: 20px;
+        }
+        button {
+            padding: 10px 20px;
+            font-size: 16px;
+            margin: 0 5px;
+            cursor: pointer;
+        }
+        #status {
+            font-size: 1.1em;
+            color: #333;
+        }
+        #pitch-display {
+            margin-top: 10px;
+            font-size: 1.2em;
+            font-weight: bold;
+            color: #007bff;
+        }
+    </style>
+</head>
+<body>
+    <h1>말 또는 노래 피치 감지 및 합성</h1>
+    <p>마이크에 대고 소리를 내세요. 감지된 피치를 피아노 소리로 재생합니다.</p>
+    <div id="controls">
+        <button id="startButton" disabled>Start</button>
+        <button id="stopButton" disabled>Stop</button>
+    </div>
+    <div id="status">Loading model...</div>
+    <div id="pitch-display"></div>
+    <!-- TensorFlow.js 및 ml5.js 라이브러리 로드 -->
+    <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@latest/dist/tf.min.js"></script>
+    <script src="https://unpkg.com/ml5@latest/dist/ml5.min.js"></script>
+    <script>
+        let audioContext;
+        let micStream;
+        let pitchDetector;
+        let processingNode;
+        let currentOscillator = null; // 현재 재생 중인 오실레이터
+        let gainNode; // 볼륨 조절 및 부드러운 시작/정지용
+        const startButton = document.getElementById('startButton');
+        const stopButton = document.getElementById('stopButton');
+        const statusDisplay = document.getElementById('status');
+        const pitchDisplay = document.getElementById('pitch-display');
+        const CREPE_MODEL_URL = 'https://cdn.jsdelivr.net/gh/ml5js/ml5-data@master/models/pitch/crepe/';
+        const PITCH_CONFIDENCE_THRESHOLD = 0.9; // 피치로 인정할 최소 신뢰도 (CREPE 모델은 null로 반환하는 경우가 많음)
+        const MIDI_NOTE_A4 = 69; // A4는 MIDI 노트 69
+        const FREQUENCY_A4 = 440; // A4는 440Hz
+        // Hz를 가장 가까운 MIDI 노트 번호로 변환
+        function hzToMidi(hz) {
+            if (hz === 0) return null;
+            return Math.round(MIDI_NOTE_A4 + 12 * Math.log2(hz / FREQUENCY_A4));
+        }
+        // MIDI 노트 번호를 해당 표준 주파수(Hz)로 변환
+        function midiToHz(midi) {
+            if (midi === null) return 0;
+             // MIDI 노트 범위 제한 (너무 높거나 낮은 소리 방지)
+            midi = Math.max(24, Math.min(108, midi)); // C1 (24) to C8 (108) roughly
+            return FREQUENCY_A4 * Math.pow(2, (midi - MIDI_NOTE_A4) / 12);
+        }
+        // 피치 감지 모델 로드
+        async function loadModel() {
+            try {
+                statusDisplay.textContent = 'Loading model...';
+                pitchDetector = await ml5.pitch(CREPE_MODEL_URL, audioContext, micStream.getAudioTracks()[0], () => {
+                     statusDisplay.textContent = 'Model loaded. Click Start.';
+                     startButton.disabled = false;
+                });
+            } catch (error) {
+                statusDisplay.textContent = `Error loading model: ${error.message}`;
+                console.error("Error loading model:", error);
+            }
+        }
+        // 오실레이터 (소리) 시작/업데이트/정지
+        function startOrUpdateOscillator(hz) {
+            const currentTime = audioContext.currentTime;
+            // 피치가 유효하고, 현재 재생 중인 오실레이터가 없거나 주파수가 크게 바뀌면 새 오실레이터 시작
+            if (hz > 0) {
+                 // MIDI 노트 번호로 변환하여 양자화
+                const midiNote = hzToMidi(hz);
+                if (midiNote !== null) {
+                     // 해당 MIDI 노트의 표준 주파수 계산
+                    const targetHz = midiToHz(midiNote);
+                    // 현재 오실레이터가 없거나, ���표 주파수가 현재 오실레이터 주파수와 다르면
+                    // (약간의 오차 허용)
+                    if (!currentOscillator || Math.abs(currentOscillator.frequency.value - targetHz) > 0.5) {
+                        // 이전 오실레이터 정지 (부드럽게)
+                        if (currentOscillator) {
+                            gainNode.gain.cancelScheduledValues(currentTime);
+                            gainNode.gain.linearRampToValueAtTime(0, currentTime + 0.05); // 짧은 감쇠
+                            currentOscillator.stop(currentTime + 0.06); // 감쇠 후 정지
+                            currentOscillator.disconnect();
+                        }
+                        // 새로운 오실레이터 생성 및 시작
+                        currentOscillator = audioContext.createOscillator();
+                        gainNode = audioContext.createGain(); // 새 게인 노드 (선택사항, 기존 것 사용도 가능)
+                        currentOscillator.type = 'sine'; // 'sine', 'square', 'sawtooth', 'triangle'
+                        currentOscillator.frequency.setValueAtTime(targetHz, currentTime); // 주파수 설정
+                        currentOscillator.connect(gainNode);
+                        gainNode.connect(audioContext.destination);
+                        gainNode.gain.setValueAtTime(0, currentTime);
+                        gainNode.linearRampToValueAtTime(0.5, currentTime + 0.01); // 짧은 공격 (최대 볼륨 0.5)
+                        currentOscillator.start(currentTime);
+                        // 피치/노트 정보 표시
+                        const noteName = music21NoteName(midiNote); // MIDI 노트 번호를 C4, D#5 등으로 변환
+                        pitchDisplay.textContent = `Pitch: ${hz.toFixed(2)} Hz (${noteName})`;
+                         // 오실레이터가 끝나면 정리
+                        currentOscillator.onended = () => {
+                           // console.log("Oscillator ended");
+                           if (currentOscillator && currentOscillator.frequency.value === targetHz) {
+                              // 의도적으로 멈춘 경우 currentOscillator가 null이 아닐 수 있음
+                              // 하지만 해당 주파수의 오실레이터가 끝났다면 null로 설정
+                              currentOscillator = null;
+                           }
+                        };
+                    } else {
+                        // 이미 같은 노트가 재생 중이면 주파수만 미세 업데이트 (선택 사항, 생략 가능)
+                         currentOscillator.frequency.setValueAtTime(targetHz, currentTime);
+                    }
+                } else {
+                    // MIDI 노트 변환 실패 (예: 너무 낮거나 높은 주파수)
+                    stopOscillator(); // 소리 멈춤
+                    pitchDisplay.textContent = `Pitch: ${hz.toFixed(2)} Hz (감지 오류)`;
+                }
+            } else {
+                // 피치가 유효하지 않음 (0 또는 null) -> 소리 멈춤
+                 stopOscillator();
+                 pitchDisplay.textContent = `Pitch: Detecting...`;
+            }
+        }
+         // MIDI 노트 번호를 음악적 노트 이름으로 변환 (예: 60 -> C4)
+        function music21NoteName(midiNote) {
+            const noteNames = ["C", "C#", "D", "D#", "E", "F", "F#", "G", "G#", "A", "A#", "B"];
+            if (midiNote === null || midiNote < 0 || midiNote > 127) {
+                return "Invalid Note";
+            }
+            const octave = Math.floor(midiNote / 12) - 1; // MIDI 0-11은 옥타브 -1, MIDI 12-23은 옥타브 0 등
+            const noteIndex = midiNote % 12;
+            return noteNames[noteIndex] + octave;
+        }
+        // 오실레이터 정지
+        function stopOscillator() {
+            if (currentOscillator) {
+                const currentTime = audioContext.currentTime;
+                gainNode.gain.cancelScheduledValues(currentTime);
+                gainNode.gain.linearRampToValueAtTime(0, currentTime + 0.1); // 짧은 감쇠
+                currentOscillator.stop(currentTime + 0.11); // 감쇠 후 정지
+                currentOscillator.disconnect(); // 연결 해제
+                currentOscillator = null; // 참조 제거
+                pitchDisplay.textContent = `Pitch: Listening...`;
+            }
+        }
+        // 마이크에서 피치 감지 시작
+        async function startPitchDetection() {
+            statusDisplay.textContent = 'Listening...';
+            startButton.disabled = true;
+            stopButton.disabled = false;
+            // ml5 pitch.start() 함수는 버퍼를 직접 처리하여 콜백으로 결과를 반환합니다.
+            pitchDetector.start((error, pitch) => {
+                if (error) {
+                    console.error("Pitch detection error:", error);
+                    statusDisplay.textContent = `Pitch detection error: ${error.message}`;
+                    stopPitchDetection(); // 오류 발생 시 정지
+                    return;
+                }
+                if (pitch) {
+                    // pitch 객체에 Hz 값이 포함되어 있습니다. CREPE 모델은 신뢰도가 낮으면 pitch=null을 반환하는 경향이 있습니다.
+                    // 별도의 신뢰도 임계값 검사보다는 null 체크가 더 일반적입니다.
+                    startOrUpdateOscillator(pitch.hz);
+                } else {
+                    // 피치 감지 실패 (불확실하거나 소리가 없는 경우)
+                    stopOscillator();
+                     pitchDisplay.textContent = `Pitch: Detecting...`;
+                }
+            });
+        }
+        // 피치 감지 정지
+        function stopPitchDetection() {
+            if (pitchDetector) {
+                pitchDetector.stop();
+            }
+            stopOscillator(); // 재생 중인 소리 정지
+            statusDisplay.textContent = 'Model loaded. Click Start.';
+            startButton.disabled = false;
+            stopButton.disabled = true;
+            pitchDisplay.textContent = '';
+        }
+        // 초기 설정
+        async function init() {
+             try {
+                // 오디오 컨텍스트 생성 (크롬 정책으로 인해 사용자 인터랙션 필요)
+                 // 사용자가 Start 버튼을 누를 때 생성하도록 변경
+                 // audioContext = new (window.AudioContext || window.webkitAudioContext)();
+                // 마이크 스트림 가져오기
+                statusDisplay.textContent = 'Requesting microphone access...';
+                micStream = await navigator.mediaDevices.getUserMedia({ audio: true });
+                // 오디오 컨텍스트 생성 (getUserMedia 성공 후)
+                 audioContext = new (window.AudioContext || window.webkitAudioContext)();
+                // ml5 pitch 모델 로드 (스트림 정보 필요)
+                loadModel(); // loadModel 함수 안에서 pitchDetector.start()는 모델 로드 완료 후에 호출됨
+            } catch (error) {
+                statusDisplay.textContent = `Error accessing microphone: ${error.message}`;
+                console.error("Error accessing microphone:", error);
+                startButton.disabled = true; // 마이크 접근 실패 시 시작 불가
+                stopButton.disabled = true;
+            }
+        }
+        // 이벤트 리스너 설정
+        startButton.addEventListener('click', startPitchDetection);
+        stopButton.addEventListener('click', stopPitchDetection);
+        // 페이지 로드 시 초기화 시작
+        window.onload = init;
+    </script>
+</body>
+</html>