-
Notifications
You must be signed in to change notification settings - Fork 0
/
record_t.html
66 lines (56 loc) · 2.17 KB
/
record_t.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>마이크 녹음</title>
</head>
<body>
<button>시작/종료</button>
<br /><br />
<audio controls>녹음된 소리를 재생할 audio 엘리먼트</audio>
</body>
<script>
// 엘리먼트 취득
const $audioEl = document.querySelector("audio");
const $btn = document.querySelector("button");
// 녹음중 상태 변수
let isRecording = false;
// MediaRecorder 변수 생성
let mediaRecorder = null;
// 녹음 데이터 저장 배열
const audioArray = [];
$btn.onclick = async function (event) {
if (!isRecording) {
// 마이크 mediaStream 생성: Promise를 반환하므로 async/await 사용
const mediaStream = await navigator.mediaDevices.getUserMedia({
audio: true,
});
// MediaRecorder 생성
mediaRecorder = new MediaRecorder(mediaStream);
// 이벤트핸들러: 녹음 데이터 취득 처리
mediaRecorder.ondataavailable = (event) => {
audioArray.push(event.data); // 오디오 데이터가 취득될 때마다 배열에 담아둔다.
};
// 이벤트핸들러: 녹음 종료 처리 & 재생하기
mediaRecorder.onstop = (event) => {
// 녹음이 종료되면, 배열에 담긴 오디오 데이터(Blob)들을 합친다: 코덱도 설정해준다.
const blob = new Blob(audioArray, { type: "audio/ogg codecs=opus" });
audioArray.splice(0); // 기존 오디오 데이터들은 모두 비워 초기화한다.
// Blob 데이터에 접근할 수 있는 주소를 생성한다.
const blobURL = window.URL.createObjectURL(blob);
// audio엘리먼트로 재생한다.
$audioEl.src = blobURL;
$audioEl.play();
};
// 녹음 시작
mediaRecorder.start();
isRecording = true;
} else {
// 녹음 종료
mediaRecorder.stop();
isRecording = false;
}
};
</script>
</html>