Spaces:

kimhyunwoo
/

pp

Running

App Files Files Community

pp / index.html

kimhyunwoo

Update index.html

8381e0f verified 9 days ago

raw

history blame contribute delete

16.3 kB

	<!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>