blob: 345c6139f6e91ddc565f7f1803a46ad241bab20b (
plain)
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
|
/*
* EchoClip, a web tool to record and play back audio clips.
* Copyright 2024 Pacien TRAN-GIRARD
* SPDX-License-Identifier: EUPL-1.2
*/
const errorContainer = document.querySelector("#error");
const recordBtn = document.querySelector("#record");
const autoplayCheckbox = document.querySelector("#autoplay");
const clearBtn = document.querySelector("#clear");
const clips = document.querySelector("#clips");
function wrapElement(wrapper, child) {
const wrapperElement = document.createElement(wrapper);
wrapperElement.append(child);
return wrapperElement;
}
// TODO: fancy player element with spectrogram and spectrum analyser?
function audioElementForBlob(blob) {
const audioElement = document.createElement("audio");
audioElement.src = window.URL.createObjectURL(blob);
audioElement.setAttribute("controls", "");
return audioElement;
}
function onGetDeviceSuccess(stream) {
const mediaRecorder = new MediaRecorder(stream);
let recordingChunks = [];
// TODO: add some recording indicator (red bullet) when recording
mediaRecorder.addEventListener("dataavailable", event => {
recordingChunks.push(event.data);
});
mediaRecorder.addEventListener("stop", _event => {
const blob = new Blob(recordingChunks, { type: mediaRecorder.mimeType });
recordingChunks = [];
const audioElement = audioElementForBlob(blob);
// TODO: record blob and list to local persistent storage
// TODO: "clear all" button to clear all clips
// TODO: buttons to clear individual clips
// TODO: keyboard shortcut to play clips for the ten last indexes
clips.prepend(wrapElement("li", audioElement));
if (autoplayCheckbox.checked) {
// TODO: stop playing any other clip
audioElement.play();
}
});
recordBtn.addEventListener("mousedown", _event => {
mediaRecorder.start();
});
recordBtn.addEventListener("mouseup", _event => {
mediaRecorder.stop();
});
document.addEventListener("keydown", event => {
if (event.key == " ") {
event.preventDefault(); // prevent scroll
if (mediaRecorder.state == "inactive")
mediaRecorder.start();
}
});
document.addEventListener("keyup", event => {
if (event.key == " ") {
event.preventDefault(); // prevent scroll
mediaRecorder.stop();
}
});
}
function onGetDeviceError(error) {
console.log(error);
errorContainer.innerHTML = error;
}
navigator
.mediaDevices
.getUserMedia({ audio: true })
.then(onGetDeviceSuccess, onGetDeviceError);
|