diff options
Diffstat (limited to 'app.js')
-rw-r--r-- | app.js | 65 |
1 files changed, 65 insertions, 0 deletions
@@ -0,0 +1,65 @@ | |||
1 | /* | ||
2 | * EchoClip, a web tool to record and play back audio clips. | ||
3 | * Copyright 2024 Pacien TRAN-GIRARD | ||
4 | * SPDX-License-Identifier: EUPL-1.2 | ||
5 | */ | ||
6 | |||
7 | const errorContainer = document.querySelector("#error"); | ||
8 | const recordBtn = document.querySelector("#record"); | ||
9 | const autoplayCheckbox = document.querySelector("#autoplay"); | ||
10 | const clearBtn = document.querySelector("#clear"); | ||
11 | const clips = document.querySelector("#clips"); | ||
12 | |||
13 | function wrapElement(wrapper, child) { | ||
14 | const wrapperElement = document.createElement(wrapper); | ||
15 | wrapperElement.append(child); | ||
16 | return wrapperElement; | ||
17 | } | ||
18 | |||
19 | // TODO: fancy player element with spectrogram and spectrum analyser? | ||
20 | function audioElementForBlob(blob) { | ||
21 | const audioElement = document.createElement("audio"); | ||
22 | audioElement.src = window.URL.createObjectURL(blob); | ||
23 | audioElement.setAttribute("controls", ""); | ||
24 | return audioElement; | ||
25 | } | ||
26 | |||
27 | function onGetDeviceSuccess(stream) { | ||
28 | const mediaRecorder = new MediaRecorder(stream); | ||
29 | let recordingChunks = []; | ||
30 | |||
31 | mediaRecorder.addEventListener("dataavailable", event => { | ||
32 | recordingChunks.push(event.data); | ||
33 | }); | ||
34 | |||
35 | mediaRecorder.addEventListener("stop", _event => { | ||
36 | const blob = new Blob(recordingChunks, { type: mediaRecorder.mimeType }); | ||
37 | recordingChunks = []; | ||
38 | const audioElement = audioElementForBlob(blob); | ||
39 | // TODO: autoplay audioElement if checkbox enabled | ||
40 | // TODO: record blob and list to local persistent storage | ||
41 | // TODO: "clear all" button to clear all clips | ||
42 | // TODO: buttons to clear individual clips | ||
43 | // TODO: keyboard shortcut to play clips for the ten last indexes | ||
44 | clips.prepend(wrapElement("li", audioElement)); | ||
45 | }); | ||
46 | |||
47 | // TODO: handle "space" key hold the same as holding the "record" button | ||
48 | recordBtn.addEventListener("mousedown", _event => { | ||
49 | mediaRecorder.start(); | ||
50 | }); | ||
51 | |||
52 | recordBtn.addEventListener("mouseup", _event => { | ||
53 | mediaRecorder.stop(); | ||
54 | }); | ||
55 | } | ||
56 | |||
57 | function onGetDeviceError(error) { | ||
58 | console.log(error); | ||
59 | errorContainer.innerHTML = error; | ||
60 | } | ||
61 | |||
62 | navigator | ||
63 | .mediaDevices | ||
64 | .getUserMedia({ audio: true }) | ||
65 | .then(onGetDeviceSuccess, onGetDeviceError); | ||