Spaces:

kimhyunwoo
/

pp

Running

File size: 16,343 Bytes

<!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;
            min-height: 100vh; /* 화면 전체 높이 사용 */
            margin: 0;
            background-color: #f4f4f4;
            padding: 20px; /* 패딩 추가 */
            box-sizing: border-box; /* 패딩이 전체 크기에 포함되도록 */
        }
        h1 {
            margin-top: 0;
            text-align: center;
        }
        #controls {
            margin-bottom: 20px;
            display: flex; /* 버튼 정렬 */
            gap: 10px; /* 버튼 간 간격 */
        }
        button {
            padding: 10px 20px;
            font-size: 16px;
            cursor: pointer;
            border: none;
            border-radius: 5px;
            transition: background-color 0.3s ease;
        }
        #startButton {
             background-color: #28a745; /* 녹색 */
             color: white;
        }
         #startButton:disabled {
             background-color: #94d3a2;
             cursor: not-allowed;
         }
         #stopButton {
            background-color: #dc3545; /* 빨간색 */
            color: white;
         }
         #stopButton:disabled {
             background-color: #f0a9b0;
             cursor: not-allowed;
         }
        #status {
            font-size: 1.1em;
            color: #555;
            min-height: 1.5em; /* 높이 확보 */
        }
        #pitch-display {
            margin-top: 10px;
            font-size: 1.2em;
            font-weight: bold;
            color: #007bff;
            min-height: 1.5em; /* 높이 확보 */
        }
    </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 libraries...</div>
    <div id="pitch-display"></div>

    <!-- TensorFlow.js 및 ml5.js 라이브러리 로드 -->
    <!-- ml5.js 특정 안정 버전 사용 (@0.12.2) -->
    <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@latest/dist/tf.min.js"></script>
    <script src="https://unpkg.com/[email protected]/dist/ml5.min.js"></script>

    <script>
        let audioContext;
        let micStream;
        let pitchDetector;
        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');

        // CREPE 모델 URL - ml5에서 제공하는 피치 감지 모델
        const CREPE_MODEL_URL = 'https://cdn.jsdelivr.net/gh/ml5js/ml5-data@master/models/pitch/crepe/';

        const MIDI_NOTE_A4 = 69; // A4는 MIDI 노트 69
        const FREQUENCY_A4 = 440; // A4는 440Hz

        // Hz를 가장 가까운 MIDI 노트 번호로 변환 (양자화)
        function hzToMidi(hz) {
            if (hz === 0) return null;
            // MIDI 노트 번호 계산 (C0 = 12)
            const midi = Math.round(12 * Math.log2(hz / 16.35) + 12); // 16.35Hz는 C0의 주파수

             // MIDI 노트 범위 제한 (사람 목소리/악기 범위)
            return Math.max(24, Math.min(100, midi)); // C1 (24) to C7 (84) 쯤으로 제한
             // return midi; // 제한 없는 버전
        }

        // MIDI 노트 번호를 해당 표준 주파수(Hz)로 변환
        function midiToHz(midi) {
            if (midi === null) return 0;
             // MIDI 12 = C0, 69 = A4
            return 440 * Math.pow(2, (midi - MIDI_NOTE_A4) / 12);
        }

        // MIDI 노트 번호를 음악적 노트 이름으로 변환 (예: 60 -> C4)
        function midiToNoteName(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;
        }


        // 피치 감지 모델 로드
        async function loadModel() {
            try {
                statusDisplay.textContent = 'Loading pitch detection model...';

                // ml5 객체가 제대로 로드되었는지 확인
                if (typeof ml5 === 'undefined') {
                    throw new Error('ml5 library is not loaded. Check script tag or network.');
                }
                 // ml5.pitch 함수가 존재하는지 확인
                if (typeof ml5.pitch !== 'function') {
                     console.error('ml5 object:', ml5); // 디버깅을 위해 ml5 객체 출력
                    throw new Error('ml5.pitch is not a function. ml5 library might be incomplete or incorrect version.');
                }


                // ml5.pitch 모델 초기화
                // ml5 예제에서는 MediaStream 객체를 직접 전달하는 경우가 많습니다.
                pitchDetector = await ml5.pitch(CREPE_MODEL_URL, audioContext, micStream, () => {
                     statusDisplay.textContent = 'Model loaded. Click Start.';
                     startButton.disabled = false;
                });

            } catch (error) {
                statusDisplay.textContent = `Error loading model: ${error.message}`;
                console.error("Error loading model:", error);
                startButton.disabled = true; // 모델 로드 실패 시 시작 버튼 비활성화
                stopButton.disabled = true;
            }
        }

        // 오실레이터 (소리) 시작/업데이트/정지
        function startOrUpdateOscillator(hz) {
            const currentTime = audioContext.currentTime;

            // 피치가 유효하고 (0보다 크고 너무 크지 않은 값), 현재 재생 중인 오실레이터가 없거나 주파수가 크게 바뀌면 새 오실레이터 시작
            if (hz > 50 && hz < 10000) { // 현실적인 피치 범위 제한 (50Hz ~ 10kHz)

                 // MIDI 노트 번호로 변환하여 양자화
                const midiNote = hzToMidi(hz);

                if (midiNote !== null) {
                     // 해당 MIDI 노트의 표준 주파수 계산
                    const targetHz = midiToHz(midiNote);

                    // 현재 오실레이터가 없거나, 목표 주파수가 현재 오실레이터 주파수와 다르면 (약간의 오차 허용)
                    // 약 0.5Hz 차이 이상 나면 새 노트 시작으로 간주
                    if (!currentOscillator || Math.abs(currentOscillator.frequency.value - targetHz) > 0.5) {

                        // 이전 오실레이터 정지 (부드럽게)
                        if (currentOscillator) {
                            // 이미 예약된 게인 변경이 있다면 취소
                            gainNode.gain.cancelScheduledValues(currentTime);
                            // 현재 볼륨에서 0으로 짧게 감쇠
                            gainNode.gain.linearRampToValueAtTime(0, currentTime + 0.05); // 짧은 감쇠 (50ms)
                             // 감쇠가 완료된 후 오실레이터 정지 예약
                            currentOscillator.stop(currentTime + 0.06); // 감쇠 시간보다 약간 길게 설정
                             // 연결 해제 (메모리 누수 방지)
                            currentOscillator.disconnect();
                            gainNode.disconnect(); // 게인 노드도 해제
                            currentOscillator = null; // 참조 제거
                        }

                        // 새로운 오실레이터 및 게인 노드 생성
                        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);

                        // 볼륨을 0에서 시작하여 부드럽게 올림 (Attack)
                        gainNode.gain.setValueAtTime(0, currentTime);
                        gainNode.gain.linearRampToValueAtTime(0.3, currentTime + 0.02); // 빠르게 볼륨 올림 (max 0.3)

                        // 오실레이터 시작
                        currentOscillator.start(currentTime);

                        // 피치/노트 정보 표시
                        const noteName = midiToNoteName(midiNote); // MIDI 노트 번호를 C4, D#5 등으로 변환
                        pitchDisplay.textContent = `Pitch: ${hz.toFixed(1)} Hz -> ${noteName}`; // 감지된 Hz와 양자화된 노트 표시

                         // 오실레이터가 끝나면 정리 (stop()에 의해 명시적으로 멈췄을 때 호출됨)
                         currentOscillator.onended = () => {
                             //console.log("Oscillator ended:", targetHz); // 디버깅용
                             // 오실레이터가 정지되면 currentOscillator 참조를 제거하여 새로운 소리를 시작할 수 있게 함
                             if (currentOscillator && currentOscillator.frequency.value === targetHz) {
                                 currentOscillator = null;
                                 //console.log("Oscillator reference cleared."); // 디버깅용
                             }
                         };


                    } else {
                         // 이미 같은 노트가 재생 중이면 주파수만 미세 업데이트 (선택 사항, 생략 가능)
                         // currentOscillator.frequency.setValueAtTime(targetHz, currentTime); // 너무 자주 업데이트하지 않도록 주석 처리
                    }
                } else {
                    // MIDI 노트 변환 실패 (예: 범위를 벗어난 주파수)
                    stopOscillator(); // 소리 멈춤
                    pitchDisplay.textContent = `Pitch: ${hz.toFixed(1)} Hz (범위 벗어남)`;
                }

            } else {
                // 피치가 유효하지 않음 (0 또는 너무 낮거나 높은 값) -> 소리 멈춤
                 stopOscillator();
                 pitchDisplay.textContent = `Pitch: Detecting...`;
            }
        }


        // 오실레이터 정지 (부드럽게)
        function stopOscillator() {
            if (currentOscillator) {
                const currentTime = audioContext.currentTime;
                gainNode.gain.cancelScheduledValues(currentTime);
                gainNode.gain.linearRampToValueAtTime(0, currentTime + 0.1); // 짧은 감쇠 (100ms)
                currentOscillator.stop(currentTime + 0.11); // 감쇠 시간보다 약간 길게 설정
                currentOscillator.disconnect(); // 연결 해제
                gainNode.disconnect(); // 게인 노드도 해제
                currentOscillator = null; // 참조 제거
                pitchDisplay.textContent = `Pitch: Listening...`; // 소리 멈춤 후 메시지
            }
        }


        // 마이크에서 피치 감지 시작
        async function startPitchDetection() {
            statusDisplay.textContent = 'Listening...';
            startButton.disabled = true;
            stopButton.disabled = false;
            pitchDisplay.textContent = 'Pitch: Listening...'; // 초기 상태 표시

            // ml5 pitch.start() 함수는 오디오 스트림을 처리하여 콜백으로 결과를 반환합니다.
            // pitch 객체는 { hz: ..., confidence: ... } 형태입니다.
            pitchDetector.start((error, pitch) => {
                if (error) {
                    console.error("Pitch detection error:", error);
                    statusDisplay.textContent = `Pitch detection error: ${error.message}`;
                    stopPitchDetection(); // 오류 발생 시 정지
                    return;
                }

                // ml5 CREPE 모델은 신뢰도가 낮으면 pitch = null을 반환하는 경향이 있습니다.
                // 따라서 pitch 객체가 유효한지 먼저 확인합니다.
                if (pitch && pitch.hz) {
                    // pitch.hz 값이 0이 아닌 유효한 주파수인지 확인
                    startOrUpdateOscillator(pitch.hz);
                } else {
                    // 피치 감지 실패 (null이 반환되었거나 hz=0) -> 소리 멈춤
                    stopOscillator();
                }
            });
        }

        // 피치 감지 정지
        function stopPitchDetection() {
            if (pitchDetector) {
                pitchDetector.stop(); // ml5 피치 감지 중지
            }
            stopOscillator(); // 재생 중인 소리 정지
            statusDisplay.textContent = 'Model loaded. Click Start.'; // 상태 복원
            startButton.disabled = false; // 버튼 상태 복원
            stopButton.disabled = true;
            pitchDisplay.textContent = ''; // 피치 표시 초기화
        }

        // 초기 설정
        async function init() {
             try {
                statusDisplay.textContent = 'Requesting microphone access...';
                // 마이크 스트림 가져오기
                // 이 과정에서 사용자에게 마이크 접근 권한을 요청하는 팝업이 뜹니다.
                micStream = await navigator.mediaDevices.getUserMedia({ audio: true });
                statusDisplay.textContent = 'Microphone access granted. Creating audio context.';

                // 오디오 컨텍스트 생성 (getUserMedia 성공 후 생성하여 Chrome 정책 만족)
                 audioContext = new (window.AudioContext || window.webkitAudioContext)();
                statusDisplay.textContent = 'Audio context created. Loading pitch detection model...';


                // ml5 pitch 모델 로드 (스트림 정보 필요)
                // loadModel 함수는 비동기적으로 완료되며, 완료 후 버튼을 활성화합니다.
                await loadModel();


            } catch (error) {
                statusDisplay.textContent = `Error accessing microphone or initializing: ${error.message}`;
                console.error("Initialization error:", error);
                startButton.disabled = true; // 초기화 실패 시 시작 불가
                stopButton.disabled = true;
                pitchDisplay.textContent = 'Error.';
            }
        }

        // 이벤트 리스너 설정
        startButton.addEventListener('click', startPitchDetection);
        stopButton.addEventListener('click', stopPitchDetection);

        // 페이지 로드 시 초기화 시작
        window.onload = init;

        // ml5 라이브러리가 로드된 후 바로 실행될 수 있는 추가 체크 (혹시 모를 지연 대비)
        // 사실 window.onload 시점에는 script 태그가 모두 실행되었어야 하므로 불필요할 수 있으나, 안전을 위해 남겨둠
        if (typeof ml5 === 'undefined') {
            console.warn('ml5 library is still undefined after script tag. Check network or source.');
        } else {
             console.log('ml5 library detected after script tag load.');
        }


    </script>

</body>
</html>