Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>SoundScripter</title> | |
| <!-- Add Bootstrap CSS link here --> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.3.0/css/bootstrap.min.css"> | |
| <style> | |
| * { | |
| margin: 10px; | |
| } | |
| </style> | |
| </head> | |
| <body style="background-color:#daeaf7";> | |
| <nav class="navbar" style="background-color:whitesmoke; height:98px; border-radius:30px" > | |
| <div> | |
| <img src="wave.png" alt="SoundScripter" width="60" height="70" style="margin-top:-5px"> | |
| <span class="navbar-brand" style="font-size:35px;"><b>SoundScripter</b></span> | |
| </div> | |
| <h5>Automatic Speech Recognition</h5> | |
| </nav> | |
| <div class="container mt-5"> | |
| <div class="form-group"> | |
| <input type="file" class="form-control" id="audioUpload" style="height: 40px; width: 50%; max-width: 300px;"> | |
| <div><h6><b>OR</b></h6></div> | |
| <button class="btn" id="recordButton" style="background-color: white; border-radius:30px; height:50px; width:150px;"><h3>Record</h3></button> | |
| </div> | |
| <div class="form-group" style="text-align: center;"> | |
| <button class="btn btn-danger" id="submitButton" style="border-radius:30px;"><b>UPLOAD</b></button> | |
| </div> | |
| <div class="form-group"> | |
| <textarea class="form-control" id="outputText" rows="5" style="border-radius:15px; margin-top:5%" readonly></textarea> | |
| </div> | |
| </div> | |
| <!-- Add Bootstrap JS link and any other required scripts here --> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.3.0/js/bootstrap.min.js"></script> | |
| <script> | |
| let isRecording = false; | |
| let recordedChunks = []; | |
| let uploadedFile; | |
| let recordedAudioBlob; | |
| let mediaRecorder; | |
| const recordButton = document.getElementById("recordButton"); | |
| const submitButton = document.getElementById("submitButton"); | |
| const outputText = document.getElementById("outputText"); | |
| const audioUpload = document.getElementById("audioUpload"); | |
| let mediaStream; // Store the media stream to stop it later | |
| recordButton.addEventListener("click", function () { | |
| if (!isRecording) { | |
| navigator.mediaDevices.getUserMedia({ audio: true }) | |
| .then(function (stream) { | |
| mediaStream = stream; // Save the stream for stopping later | |
| mediaRecorder = new MediaRecorder(stream); | |
| recordedChunks = []; | |
| mediaRecorder.ondataavailable = function (e) { | |
| if (e.data.size > 0) { | |
| recordedChunks.push(e.data); | |
| } | |
| }; | |
| mediaRecorder.onstop = function () { | |
| recordedAudioBlob = new Blob(recordedChunks, { type: "audio/wav" }); | |
| }; | |
| mediaRecorder.start(); | |
| isRecording = true; | |
| recordButton.innerText = "Stop Recording"; | |
| }) | |
| .catch(function (err) { | |
| console.error("Error Accessing Microphone", err); | |
| }); | |
| } else { | |
| mediaRecorder.stop(); | |
| mediaStream.getTracks().forEach(track => track.stop()); // Stop the media stream | |
| isRecording = false; | |
| recordButton.innerText = "RECORD"; | |
| } | |
| }); | |
| audioUpload.addEventListener("change", function (event) { | |
| uploadedFile = event.target.files[0]; | |
| if (uploadedFile) { | |
| console.error("File uploading") | |
| const fileReader = new FileReader(); | |
| fileReader.onload = function () { | |
| uploadedArrayBuffer = fileReader.result; | |
| }; | |
| fileReader.readAsArrayBuffer(uploadedFile); | |
| } | |
| }); | |
| submitButton.addEventListener("click", function () { | |
| if (recordedAudioBlob || uploadedFile) { | |
| const formData = new FormData(); | |
| if (recordedAudioBlob) { | |
| formData.append("audio", recordedAudioBlob, "recorded_audio.wav"); | |
| } else if (uploadedFile) { | |
| formData.append("audio", uploadedFile, uploadedFile.name); | |
| } | |
| fetch("http://localhost:8000/asr", { | |
| method: "POST", | |
| body: formData, | |
| }) | |
| .then((response) => response.json()) | |
| .then((data) => { | |
| if (data.Text) { | |
| outputText.value = data.text; | |
| } else { | |
| outputText.value = "No text recognized."; | |
| } | |
| }) | |
| .catch((error) => { | |
| console.error("Error while connecting with backend", error); | |
| outputText.value = "Backend communication failed."; | |
| }); | |
| if (recordedAudioBlob) { | |
| const downloadLink = document.createElement("a"); | |
| downloadLink.href = URL.createObjectURL(recordedAudioBlob); | |
| downloadLink.download = "recorded_audio.wav"; | |
| downloadLink.style.display = "none"; | |
| document.body.appendChild(downloadLink); | |
| downloadLink.click(); | |
| URL.revokeObjectURL(downloadLink.href); | |
| document.body.removeChild(downloadLink); | |
| } | |
| } else { | |
| outputText.value = "Please upload an audio file or record."; | |
| } | |
| }); | |
| </script> | |
| </body> | |
| </html> | |