@@ -251,12 +296,24 @@
let chunkDuration = 1000;
let websocketUrl = "ws://localhost:8000/asr";
let userClosing = false;
+ let startTime = null;
+ let timerInterval = null;
+ let audioContext = null;
+ let analyser = null;
+ let microphone = null;
+ let waveCanvas = document.getElementById("waveCanvas");
+ let waveCtx = waveCanvas.getContext("2d");
+ let animationFrame = null;
+ waveCanvas.width = 60 * (window.devicePixelRatio || 1);
+ waveCanvas.height = 30 * (window.devicePixelRatio || 1);
+ waveCtx.scale(window.devicePixelRatio || 1, window.devicePixelRatio || 1);
const statusText = document.getElementById("status");
const recordButton = document.getElementById("recordButton");
const chunkSelector = document.getElementById("chunkSelector");
const websocketInput = document.getElementById("websocketInput");
const linesTranscriptDiv = document.getElementById("linesTranscript");
+ const timerElement = document.querySelector(".timer");
chunkSelector.addEventListener("change", () => {
chunkDuration = parseInt(chunkSelector.value);
@@ -344,14 +401,17 @@
}
let textContent = item.text;
+ if (idx === lines.length - 1) {
+ speakerLabel += `
Transcription lag ${remaining_time_transcription}s`
+ }
if (idx === lines.length - 1 && buffer_diarization) {
speakerLabel += `
Diarization lag${remaining_time_diarization}s`
textContent += `
${buffer_diarization}`;
}
- if (idx === lines.length - 1 && buffer_transcription) {
- speakerLabel += `
Transcription lag ${remaining_time_transcription}s`
+ if (idx === lines.length - 1) {
textContent += `
${buffer_transcription}`;
}
+
return textContent
? `
${speakerLabel}
${textContent}
`
@@ -361,9 +421,59 @@
linesTranscriptDiv.innerHTML = linesHtml;
}
+ function updateTimer() {
+ if (!startTime) return;
+
+ const elapsed = Math.floor((Date.now() - startTime) / 1000);
+ const minutes = Math.floor(elapsed / 60).toString().padStart(2, "0");
+ const seconds = (elapsed % 60).toString().padStart(2, "0");
+ timerElement.textContent = `${minutes}:${seconds}`;
+ }
+
+ function drawWaveform() {
+ if (!analyser) return;
+
+ const bufferLength = analyser.frequencyBinCount;
+ const dataArray = new Uint8Array(bufferLength);
+ analyser.getByteTimeDomainData(dataArray);
+
+ waveCtx.clearRect(0, 0, waveCanvas.width / (window.devicePixelRatio || 1), waveCanvas.height / (window.devicePixelRatio || 1));
+ waveCtx.lineWidth = 1;
+ waveCtx.strokeStyle = 'rgb(0, 0, 0)';
+ waveCtx.beginPath();
+
+ const sliceWidth = (waveCanvas.width / (window.devicePixelRatio || 1)) / bufferLength;
+ let x = 0;
+
+ for (let i = 0; i < bufferLength; i++) {
+ const v = dataArray[i] / 128.0;
+ const y = v * (waveCanvas.height / (window.devicePixelRatio || 1)) / 2;
+
+ if (i === 0) {
+ waveCtx.moveTo(x, y);
+ } else {
+ waveCtx.lineTo(x, y);
+ }
+
+ x += sliceWidth;
+ }
+
+ waveCtx.lineTo(waveCanvas.width / (window.devicePixelRatio || 1), waveCanvas.height / (window.devicePixelRatio || 1) / 2);
+ waveCtx.stroke();
+
+ animationFrame = requestAnimationFrame(drawWaveform);
+ }
+
async function startRecording() {
try {
const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+
+ audioContext = new (window.AudioContext || window.webkitAudioContext)();
+ analyser = audioContext.createAnalyser();
+ analyser.fftSize = 256;
+ microphone = audioContext.createMediaStreamSource(stream);
+ microphone.connect(analyser);
+
recorder = new MediaRecorder(stream, { mimeType: "audio/webm" });
recorder.ondataavailable = (e) => {
if (websocket && websocket.readyState === WebSocket.OPEN) {
@@ -371,10 +481,16 @@
}
};
recorder.start(chunkDuration);
+
+ startTime = Date.now();
+ timerInterval = setInterval(updateTimer, 1000);
+ drawWaveform();
+
isRecording = true;
updateUI();
} catch (err) {
statusText.textContent = "Error accessing microphone. Please allow microphone access.";
+ console.error(err);
}
}
@@ -384,6 +500,37 @@
recorder.stop();
recorder = null;
}
+
+ if (microphone) {
+ microphone.disconnect();
+ microphone = null;
+ }
+
+ if (analyser) {
+ analyser = null;
+ }
+
+ if (audioContext && audioContext.state !== 'closed') {
+ try {
+ audioContext.close();
+ } catch (e) {
+ console.warn("Could not close audio context:", e);
+ }
+ audioContext = null;
+ }
+
+ if (animationFrame) {
+ cancelAnimationFrame(animationFrame);
+ animationFrame = null;
+ }
+
+ if (timerInterval) {
+ clearInterval(timerInterval);
+ timerInterval = null;
+ }
+ timerElement.textContent = "00:00";
+ startTime = null;
+
isRecording = false;
if (websocket) {
@@ -402,6 +549,7 @@
await startRecording();
} catch (err) {
statusText.textContent = "Could not connect to WebSocket or access mic. Aborted.";
+ console.error(err);
}
} else {
stopRecording();