[javascript] audioRecorder 만들기 / js 함수로 녹음저장 만들기

 

패키지를 사용하지 않고, 단순 코드로만 개발한다는 점을 먼저 말씀드리고 시작하겠습니다.

 

// 녹음된 오디오를 저장할 변수
let audioChunks = [];
let mediaRecorder;

 

먼저 오디오를 저장할 변수를 선언해줍니다.

 

audioChunks 는 음성녹음을 담을 변수이고,

mediaRecorder는 녹음 기능 자체를 선언할 변수입니다.

 

audioRecorder.js

// 오디오 녹음 시작 함수
function startRecording() {
	navigator.mediaDevices.getUserMedia({ audio: true })
		.then(stream => {
			// mediaRecorder 초기화
			mediaRecorder = new MediaRecorder(stream);
			mediaRecorder.ondataavailable = event => {
				audioChunks.push(event.data);
			};
			mediaRecorder.onstop = () => {
				const audioBlob = new Blob(audioChunks, { type: 'audio/wav' });
				const audioUrl = URL.createObjectURL(audioBlob);
				document.getElementById('audioPlayer').src = audioUrl;

				var today = getTodayDateTimeString();

				const formData = new FormData();

				formData.append("file", audioBlob, today + ".wav");

				fetch('/upload', {
					method: 'POST',
					body: formData
				})
					.then(response => {
						if (response.ok) {
							console.log('uploaded successfully.');
						} else {
							console.error('Failed to upload');
						}
					})
					.catch(error => {
						console.error('Error occurred during upload:', error);
					});
			};
			mediaRecorder.start();

			document.getElementById('recording').removeEventListener('click', startRecording);
			document.getElementById('recording').addEventListener('click', stopRecording);
		})
		.catch(console.error);
}

// 오디오 녹음 중지 함수
function stopRecording() {
	document.getElementById('recording').disabled = false;
	document.getElementById('playRecording').disabled = false;
	mediaRecorder.stop();

	document.getElementById('recording').removeEventListener('click', stopRecording);
	document.getElementById('recording').addEventListener('click', startRecording);
}

// 오디오 재생 함수
function playRecording() {
	const audioBlob = new Blob(audioChunks, { type: 'audio/wav' });
	const audioUrl = URL.createObjectURL(audioBlob);
	const audio = new Audio(audioUrl);
	audio.play();
}

 

오디오 시작, 정지, 재생 함수를 생성해봤습니다.

 

HTML에서 사용해보겠습니다

<-- 녹음 시작/중지 -->
<button id="recording"> start/stop </button>

// 버튼 클릭 이벤트 처리
document.getElementById('recording').addEventListener('click', startRecording);
// 재생 필요할 시 만들어 주면 됨
document.getElementById('playRecording').addEventListener('click', playRecording);

 

js에서 파일 저장을 위해

오늘날짜시분초로 파일명을 생성해주기 위해

오늘날짜 가져오는 함수 만들어보겠습니다.

 

// 오늘 날짜 불러오기
function getTodayDateTimeString() {
	// 현재 날짜 객체 생성
	var today = new Date();

	// 년, 월, 일, 시, 분, 초
	var year = today.getFullYear();
	// getMonth() 메서드는 0부터 시작
	var month = today.getMonth() + 1;
	var day = today.getDate();
	var hours = today.getHours();
	var minutes = today.getMinutes();
	var seconds = today.getSeconds();

	// 월, 일, 시, 분, 초가 한 자리 수인 경우 앞에 0 추가
	if (month < 10) {
		month = '0' + month;
	}
	if (day < 10) {
		day = '0' + day;
	}
	if (hours < 10) {
		hours = '0' + hours;
	}
	if (minutes < 10) {
		minutes = '0' + minutes;
	}
	if (seconds < 10) {
		seconds = '0' + seconds;
	}

	// 오늘 날짜와 시간을 문자열로 반환 (ex: "2024-02-21 12:34:56")
	return year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds;
}

 

위 js 아래에 붙여넣기 해주시면 됩니다.