Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Розпізнавання української мови</title> | |
| <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" | |
| integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> | |
| </head> | |
| <body> | |
| <h1>Audio Recording Test</h1> | |
| <p>Talk for 3 seconds, then you will hear your recording played back</p> | |
| <button class="btn btn-primary" id="action" onclick="handleAction()">Start recording...</button> | |
| <script> | |
| const recordAudio = () => | |
| new Promise(async resolve => { | |
| const stream = await navigator.mediaDevices.getUserMedia({ audio: true }); | |
| const mediaRecorder = new MediaRecorder(stream, { audioBitsPerSecond: 16000 }); | |
| const audioChunks = []; | |
| mediaRecorder.addEventListener("dataavailable", event => { | |
| audioChunks.push(event.data); | |
| }); | |
| const start = () => mediaRecorder.start(); | |
| const stop = () => | |
| new Promise(resolve => { | |
| mediaRecorder.addEventListener("stop", () => { | |
| const audioBlob = new Blob(audioChunks); | |
| const audioUrl = URL.createObjectURL(audioBlob); | |
| fetch(`./recognize`, { method: "POST", body: audioBlob }) | |
| .then(response => console.log(response.text())) | |
| const audio = new Audio(audioUrl); | |
| const play = () => audio.play(); | |
| resolve({ audioBlob, audioUrl, play }); | |
| }); | |
| mediaRecorder.stop(); | |
| }); | |
| resolve({ start, stop }); | |
| }); | |
| const sleep = time => new Promise(resolve => setTimeout(resolve, time)); | |
| const handleAction = async () => { | |
| const recorder = await recordAudio(); | |
| const actionButton = document.getElementById('action'); | |
| actionButton.disabled = true; | |
| recorder.start(); | |
| await sleep(3000); | |
| const audio = await recorder.stop(); | |
| audio.play(); | |
| await sleep(3000); | |
| actionButton.disabled = false; | |
| } | |
| </script> | |
| </body> | |
| </html> |