Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Audio Recorder</title> | |
| </head> | |
| <body> | |
| <button id="startRecording" onclick="startRecording()">Start Recording</button> | |
| <button id="stopRecording" onclick="stopRecording()" disabled>Stop Recording</button> | |
| <script> | |
| let mediaRecorder; | |
| let audioChunks = []; | |
| function startRecording() { | |
| navigator.mediaDevices.getUserMedia({ audio: true }) | |
| .then(stream => { | |
| mediaRecorder = new MediaRecorder(stream); | |
| mediaRecorder.start(); | |
| mediaRecorder.addEventListener("dataavailable", event => { | |
| audioChunks.push(event.data); | |
| }); | |
| mediaRecorder.addEventListener("stop", () => { | |
| const audioBlob = new Blob(audioChunks); | |
| audioChunks = []; | |
| const reader = new FileReader(); | |
| reader.readAsDataURL(audioBlob); | |
| reader.onloadend = () => { | |
| const base64AudioMessage = reader.result.split(',')[1]; | |
| fetch('/process_audio', { | |
| method: 'POST', | |
| headers: { | |
| 'Content-Type': 'application/json' | |
| }, | |
| body: JSON.stringify({ audio_data: base64AudioMessage }) | |
| }).then(response => response.json()) | |
| .then(data => { | |
| const event = new CustomEvent('audioTranscription', { detail: data.transcription }); | |
| document.dispatchEvent(event); | |
| }); | |
| }; | |
| }); | |
| document.getElementById("startRecording").disabled = true; | |
| document.getElementById("stopRecording").disabled = false; | |
| }); | |
| } | |
| function stopRecording() { | |
| mediaRecorder.stop(); | |
| document.getElementById("startRecording").disabled = false; | |
| document.getElementById("stopRecording").disabled = true; | |
| } | |
| </script> | |
| </body> | |
| </html> | |