83 lines
2.7 KiB
HTML
83 lines
2.7 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Real-time Speech-to-Text</title>
|
|
<style>
|
|
.recording {
|
|
background-color: red;
|
|
color: white;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>Real-time Speech-to-Text</h1>
|
|
<p id="connection-status">WebSocket disconnected</p>
|
|
<button id="record-button" disabled > Start Recording</button>
|
|
<p id="transcription"></p>
|
|
<script>
|
|
let socket = new WebSocket('ws://localhost:8081');
|
|
let audioRecorder;
|
|
let recording = false;
|
|
let recordButton;
|
|
let connectionStatus;
|
|
|
|
function connect(socket) {
|
|
console.log("trying to connect to server");
|
|
socket.onopen = () => {
|
|
console.log("WebSocket connection opened.");
|
|
connectionStatus.innerHTML = "Connected";
|
|
recordButton.disabled = false;
|
|
};
|
|
socket.onmessage = (event) => {
|
|
transcription.innerHTML = event.data;
|
|
};
|
|
socket.onclose = () => {
|
|
console.log("WebSocket connection closed");
|
|
connectionStatus.innerHTML = "Disconnected";
|
|
recordButton.disabled = true;
|
|
setTimeout(connect, 5000);
|
|
};
|
|
}
|
|
|
|
function startRecording() {
|
|
recording = true;
|
|
navigator.mediaDevices.getUserMedia({ audio: true })
|
|
.then((stream) => {
|
|
audioRecorder = new MediaRecorder(stream);
|
|
audioRecorder.start();
|
|
audioRecorder.addEventListener('dataavailable', (event) => {
|
|
console.log("Sent some audio data to server.");
|
|
socket.send(event.data);
|
|
});
|
|
});
|
|
recordButton.classList.add("recording");
|
|
recordButton.innerHTML = "Stop Recording";
|
|
}
|
|
|
|
function stopRecording() {
|
|
recording = false;
|
|
audioRecorder.stop();
|
|
recordButton.classList.remove("recording");
|
|
recordButton.innerHTML = "Start Recording";
|
|
}
|
|
|
|
function toggleRecording() {
|
|
if (recording) {
|
|
stopRecording();
|
|
} else {
|
|
startRecording();
|
|
}
|
|
}
|
|
|
|
window.onload = () => {
|
|
recordButton = document.getElementById("record-button");
|
|
recordButton.addEventListener('click', toggleRecording);
|
|
connectionStatus = document.getElementById("connection-status");
|
|
connect(socket);
|
|
};
|
|
</script>
|
|
<script src="https://cdn.webrtc-experiment.com/MediaStreamRecorder.js"></script>
|
|
</body>
|
|
</html>
|