-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
108 lines (97 loc) · 3.03 KB
/
index.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
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
<!DOCTYPE html>
<html>
<head>
<title>Record Audio</title>
<style>
#audio-list {
list-style: none;
}
</style>
</head>
<body>
<div>
<button id="record">Record</button>
<button id="pause">Pause (don't work)</button>
<button id="stop">Stop (don't work)</button>
<button id="save">Save</button>
</div>
<div>
<h2>Audio list</h2>
<ul id="audio-list"></ul>
</div>
<script>
let chunks = [];
let recorder;
let blob = null;
const recordButton = document.getElementById("record");
const pauseButton = document.getElementById("pause");
const stopButton = document.getElementById("stop");
const saveButton = document.getElementById("save");
recordButton.addEventListener("click", startRecording);
pauseButton.addEventListener("click", pauseRecording);
stopButton.addEventListener("click", stopRecording);
saveButton.addEventListener("click", saveRecording);
async function startRecording() {
const audioStream = await navigator.mediaDevices.getUserMedia({
audio: true,
});
recorder = new MediaRecorder(audioStream);
recorder.start();
recordButton.disabled = true;
pauseButton.disabled = false;
stopButton.disabled = false;
recorder.addEventListener("dataavailable", function (event) {
saveAsFile(event.data);
});
}
function saveRecording(blob) {
stopRecording();
// recorder.stop();
}
function saveAsFile(blob) {
fetch("http://localhost:3000/audio", {
method: "POST",
body: blob,
headers: {
"Content-Type": "audio/ogg",
},
});
return;
// const blob = new Blob(chunks, { type: "audio/wav" });
const url = URL.createObjectURL(blob);
addEntry(url);
const a = document.createElement("a");
document.body.appendChild(a);
a.style = "display: none";
a.href = url;
a.download = "recording.ogg";
a.click();
window.URL.revokeObjectURL(url);
}
function pauseRecording() {
if (recorder.state === "recording") {
recorder.pause();
pauseButton.innerHTML = "Resume";
} else if (recorder.state === "paused") {
recorder.resume();
pauseButton.innerHTML = "Pause";
}
}
function stopRecording() {
recorder.stop();
recordButton.disabled = false;
pauseButton.disabled = true;
stopButton.disabled = true;
}
function addEntry(url) {
const entryContainer = document.createElement("li");
const entryContent = document.createElement("audio");
entryContent.setAttribute("controls", "true");
entryContent.src = url;
entryContainer.appendChild(entryContent);
const entryList = document.getElementById("audio-list");
entryList.appendChild(entryContainer);
}
</script>
</body>
</html>