feat: audio recording

1 files changed, 210 insertions, 0 deletions

diff --git a/public/static/scripts/audiorecorder.js b/public/static/scripts/audiorecorder.js
new file mode 100644
index 0000000..b12a2af
--- /dev/null
+++ b/public/static/scripts/audiorecorder.js
@@ -0,0 +1,210 @@
+// getting form upload tabs
+const tabs = document.getElementById('form-upload-tabs');
+
+// creating an audio button
+tabs.innerHTML += `
+<div class="form-upload-tab tab disabled" id="form-tab-audio">
+    <button onclick="showUploadType('audio')" class="transparent">
+        <p>Record</p>
+    </button>
+</div>
+`;
+
+function generateAudioRecorderHTML() {
+    return `
+    <div class="column gap-8">
+        <button type="button" class="big-upload-button" onclick="startRecording()" id="record-start-btn">
+            <h1>Click here to start audio recording</h1>
+        </button>
+        <button type="button" class="big-upload-button" onclick="stopRecording()" id="record-stop-btn" style="display: none">
+            <h1>Recording...</h1>
+            <p>Click here to stop audio recording</p>
+        </button>
+        <div class="row align-center justify-center">
+            <div class="box row align-center gap-8 pad-8" id="record-player" style="display:none">
+                <button type="button" onclick="removeRecording()">
+                    <img src="/static/img/icons/cross.png" alt="Delete">
+                </button>
+                <button type="button" onclick="startRecording()">
+                    <img src="/static/img/icons/repeat.png" alt="Retry">
+                </button>
+                <button type="button" onclick="playRecord()" id="record-play-btn">
+                    <img src="/static/img/icons/play.png" alt="Play">
+                </button>
+                <button type="button" onclick="pauseRecord()" id="record-pause-btn" style="display: none;">
+                    <img src="/static/img/icons/pause.png" alt="Pause">
+                </button>
+                <div class="column gap-8">
+                    <input type="range" min="0" max="100" value="0" step="0.01" class="audio-slider" id="record-slider" oninput="rewindRecord()">
+                    <div class="row justify-between">
+                        <p id="record-currentsecond"></p>
+                        <p id="record-duration"></p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+`;
+}
+
+const form = document.getElementById('form-record-upload');
+form.innerHTML = generateAudioRecorderHTML();
+
+const startBtn = document.getElementById('record-start-btn');
+const stopBtn = document.getElementById('record-stop-btn');
+const playBtn = document.getElementById('record-play-btn');
+const pauseBtn = document.getElementById('record-pause-btn');
+
+const player = document.getElementById('record-player');
+const slider = document.getElementById('record-slider');
+const currentSecond = document.getElementById('record-currentsecond');
+const duration = document.getElementById('record-duration');
+
+let playback = null;
+
+// record functions
+let mediaRecorder;
+let stream;
+let audioChunks = [];
+let audioLength = 0;
+
+async function startRecording() {
+    // TODO: very poor sound quality
+    stream = await navigator.mediaDevices.getUserMedia({ audio: { sampleRate: 44100, channelCount: 1 }});
+    const options = { mimeType: 'audio/ogg; codecs=opus', audioBitsPerSecond: 128000 };
+    if (!MediaRecorder.isTypeSupported(options.mimeType)) {
+        alert("Your browser doesn't support audio/ogg recording.");
+        return;
+    }
+    
+    audioLength = 0;
+      
+    mediaRecorder = new MediaRecorder(stream, options);
+    audioChunks = [];
+
+    mediaRecorder.ondataavailable = event => {
+        if (event.data.size > 0) {
+            audioChunks.push(event.data);
+            audioLength++;
+        }
+    };
+
+    mediaRecorder.start();
+    startBtn.style.display = 'none';
+    stopBtn.style.display = 'block';
+    player.style.display = 'none';
+    
+    setFormDetailsVisiblity(false);
+}
+
+function stopRecording() {
+    mediaRecorder.stop();
+    startBtn.style.display = 'block';
+    stopBtn.style.display = 'none';
+    
+    if (playback) {
+        form.removeChild(playback);
+        playback = null;
+    }
+    
+    mediaRecorder.onstop = () => {
+        const blob = new Blob(audioChunks, { type: 'audio/ogg; codecs=opus' });
+        const file = new File([blob], 'recording.ogg', { type: 'audio/ogg; codecs=opus' });
+        
+        const url = URL.createObjectURL(file);
+        
+        playback = document.createElement('audio');
+        playback.src = url;
+        
+        playback.addEventListener('loadedmetadata', () => {
+           const d = playback.duration;
+           slider.max = d;
+           slider.value = 0;
+           currentSecond.textContent = formatTimestamp(slider.getAttribute('value'));
+           duration.textContent = formatTimestamp(d);
+        });
+        
+        playback.addEventListener('timeupdate', () => {
+            currentSecond.textContent = formatTimestamp(playback.currentTime);
+            slider.value = playback.currentTime;
+        });
+        
+        playback.addEventListener('ended', () => {
+            playBtn.style.display = 'flex';
+            pauseBtn.style.display = 'none';
+            currentSecond.textContent = formatTimestamp(0);
+            slider.value = 0;
+        });
+        
+        form.appendChild(playback);
+        
+        playBtn.style.display = 'flex';
+        pauseBtn.style.display = 'none';
+        
+        startBtn.style.display = 'none';
+        stopBtn.style.display = 'none';
+        player.style.display = 'flex';
+        
+        setFormDetailsVisiblity(true);
+        
+        stream.getAudioTracks().forEach(track => {
+            track.stop();
+        });
+        
+        stream = null;
+        
+        // attaching the file
+        if (formFile) {
+            const dt = new DataTransfer();
+            dt.items.add(file);
+            formFile.files = dt.files;
+        }
+        
+        tabs.setAttribute('disabled', 'true');
+    };
+}
+
+function removeRecording() {
+    startBtn.style.display = 'block';
+    player.style.display = 'none';
+    form.removeChild(playback);
+    formFile.value = '';
+    setFormDetailsVisiblity(false);
+    
+    tabs.removeAttribute('disabled');
+}
+
+function playRecord() {
+    if (playback) playback.play();
+    
+    playBtn.style.display = 'none';
+    pauseBtn.style.display = 'flex';
+}
+
+function pauseRecord() {
+    if (playback) playback.pause();
+    
+    playBtn.style.display = 'flex';
+    pauseBtn.style.display = 'none';
+}
+
+function rewindRecord() {
+    currentSecond.textContent = formatTimestamp(slider.value);
+    if (playback) {
+        playback.currentTime = slider.value;
+        playRecord();
+    }
+}
+
+function formatTimestamp(timestamp) {
+    const m = Math.floor(timestamp / 60);
+    const s = Math.ceil(timestamp % 60);
+    
+    return (m < 10 ? '0' : '') + m + ':' + (s < 10 ? '0' : '') + s
+}
+
+// form
+document.getElementById('form-upload').addEventListener('submit', () => {
+    player.style.display = 'none';
+    startBtn.style.display = 'block';
+});
\ No newline at end of file