Spaces:

kimhyunwoo
/

sound

Running

App Files Files Community

sound / index.html

kimhyunwoo

Update index.html

bcaf481 verified 25 days ago

raw

history blame

5.32 kB

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