Front/jQuery
응용 예제 - 음성녹음
by Hyeon_
2021. 12. 15.
응용 예제 - 음성녹음
(1) 음성 녹음
- 음성 녹음 ([녹음] / [정지])
- <audio> 컨트롤 출력 play
- 파일로 저장
WebRTC
- 별도의 플러그인 없이 웹에서 RTC(Real-Time Communications)를 구현하기 위해 HTML5에 새로 추가된 기능
- https://webrtc.org
voiceRecord.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
<script src="js/jquery-3.6.0.min.js"></script>
<script src="js/voiceRecord.js"></script>
</head>
<body>
<button id="record">녹음</button>
<button id="stop">정지</button>
<p></p>
<div id="sound-clips"></div>
</body>
</html>
voiceRecord.js
$(document).ready(function(){
const record = document.getElementById('record');
const stop = document.getElementById('stop');
const soundClips = document.getElementById('sound-clips');
if(navigator.mediaDevices){
var constraints = {
audio:true
}
let chunks = []; // 녹음 데이터 저장하기 위한 변수
navigator.mediaDevices.getUserMedia(constraints)
.then(stream => {
const mediaRecorder = new MediaRecorder(stream);
// 녹음 버튼 클릭했을 때
record.onclick = () => {
mediaRecorder.start(); //녹음 시작
record.style.background = "red";
record.style.color = "black";
};
// 정지 버튼 눌렀을 때
stop.onclick = () => {
mediaRecorder.stop(); // 녹음 정지
record.style.background = "";
record.style.color = "";
};
mediaRecorder.onstop = e => {
// (1) <audio> 태그 담을 컨테이너 객체 생성
const clipcontainer = document.createElement('article');
// (2) audio 객체 생성 및 속성 설정
const audio = document.createElement('audio');
audio.setAttribute('controls', '');
// (3) 컨테이너에 audio 연결
clipcontainer.appendChild(audio);
// <div>에 <audio> 태그 출력
// 이전에 녹음할 때 추가한 childNode가 존재한다면 제거하고
if(soundClips.hasChildNodes())
soundClips.removeChild(soundClips.childNodes[0]);
//추가
soundClips.appendChild(clipcontainer);
// chunks에 저장된 녹음 데이터를 audio 양식으로 설정
const blob = new Blob(chunks, {
'type': 'audio/mp3 codecs=opus'
});
// chunks 초기화 (초기화 하지 않으면 녹음 내용이 누적 저장됨)
chunks = [];
// audio 소스 지정
const audioURL = URL.createObjectURL(blob);
audio.src = audioURL;
// (4) 녹음 내용을 파일로 저장
const clipName = "voiceRecord";
const a = document.createElement('a');
clipcontainer.appendChild(a);
a.href = audio.src;
a.download = clipName;
a.click();
};
// 녹음 시작 상태가 되면 chunks에 녹음 데이터 저장
mediaRecorder.ondataavailable = e => {
chunks.push(e.data);
};
})
.catch(err => {
console.log("오류 발생 : " + err)
})
}
});