youssefsoli
52 lines
2.1 KiB
HTML
52 lines
2.1 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Audio Recorder</title>
|
|
</head>
|
|
<body>
|
|
<h1>Record Audio and Send to Server</h1>
|
|
<button id="startRecord">Start Recording</button>
|
|
<button id="stopRecord" disabled>Stop Recording</button>
|
|
<button id="sendData" disabled>Send Data</button>
|
|
<script>
|
|
let mediaRecorder;
|
|
let audioChunks = [];
|
|
|
|
document.getElementById("startRecord").onclick = function() {
|
|
navigator.mediaDevices.getUserMedia({ audio: true })
|
|
.then(stream => {
|
|
mediaRecorder = new MediaRecorder(stream);
|
|
mediaRecorder.ondataavailable = e => {
|
|
audioChunks.push(e.data);
|
|
};
|
|
mediaRecorder.onstop = e => {
|
|
let audioBlob = new Blob(audioChunks, { 'type' : 'audio/wav; codecs=opus' });
|
|
audioChunks = [];
|
|
let formData = new FormData();
|
|
formData.append("audio_file", audioBlob, "audio.wav");
|
|
document.getElementById("sendData").onclick = function() {
|
|
fetch('https://localhost:8000/recognize', {
|
|
method: 'POST',
|
|
body: formData
|
|
}).then(response => response.json())
|
|
.then(data => console.log(data))
|
|
.catch(error => console.error(error));
|
|
};
|
|
};
|
|
mediaRecorder.start();
|
|
document.getElementById("startRecord").disabled = true;
|
|
document.getElementById("stopRecord").disabled = false;
|
|
document.getElementById("sendData").disabled = true;
|
|
});
|
|
};
|
|
|
|
document.getElementById("stopRecord").onclick = function() {
|
|
mediaRecorder.stop();
|
|
document.getElementById("startRecord").disabled = false;
|
|
document.getElementById("stopRecord").disabled = true;
|
|
document.getElementById("sendData").disabled = false;
|
|
};
|
|
</script>
|
|
</body>
|
|
</html>
|