Spaces:

yasserrmd
/

ggwave

Sleeping

App Files Files Community

yasserrmd commited on Feb 27

Commit

5944eb7

verified ·

1 Parent(s): 5f40ba9

Update static/index.html

Browse files

Files changed (1) hide show

static/index.html +19 -12

static/index.html CHANGED Viewed

@@ -1,7 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
-<head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Data-over-Sound Interface</title>
@@ -104,9 +102,7 @@
                 <div class="col-md-6">
                     <div class="d-grid">
                         <p class="control-label text-center">Listen for Data</p>
-                        <button id="recordButton" class="btn btn-record btn-lg text-white">
-                            <i class="bi bi-mic-fill icon-spacing"></i> Start Listening
-                        </button>
                     </div>
                 </div>
                 <div class="col-md-6">
@@ -121,8 +117,8 @@
             <div class="audio-container">
                 <p class="control-label mb-2">Audio Control</p>
-                <audio id="audioPlayer" controls></audio>
-                <div id="statusMessage" class="status-indicator text-center text-secondary"></div>
             </div>
             <div class="response-container">
@@ -145,6 +141,7 @@
     <script>
         let mediaRecorder;
         let audioChunks = [];
         const recordButton = document.getElementById("recordButton");
         const generateButton = document.getElementById("generateButton");
         const statusMessage = document.getElementById("statusMessage");
@@ -157,8 +154,13 @@
         recordButton.addEventListener("click", async () => {
             if (!mediaRecorder || mediaRecorder.state === "inactive") {
                 try {
-                    const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
-                    mediaRecorder = new MediaRecorder(stream, { mimeType: "audio/webm" });
                     mediaRecorder.ondataavailable = event => audioChunks.push(event.data);
@@ -205,6 +207,11 @@
                             console.error("Error:", error);
                             statusMessage.textContent = "Error processing audio data. Please try again.";
                         }
                     };
                     audioChunks = [];
@@ -337,5 +344,5 @@
             return bufferArray;
         }
     </script>
-</body>
-</html>

 <!DOCTYPE html>
+<html lang="en"><head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Data-over-Sound Interface</title>
                 <div class="col-md-6">
                     <div class="d-grid">
                         <p class="control-label text-center">Listen for Data</p>
+                        <button id="recordButton" class="btn btn-lg text-white btn-record"><i class="bi bi-mic-fill icon-spacing"></i> Start Listening</button>
                     </div>
                 </div>
                 <div class="col-md-6">
             <div class="audio-container">
                 <p class="control-label mb-2">Audio Control</p>
+                <audio id="audioPlayer" controls=""></audio>
+                <div id="statusMessage" class="status-indicator text-center text-secondary">Error processing audio data. Please try again.</div>
             </div>
             <div class="response-container">
     <script>
         let mediaRecorder;
         let audioChunks = [];
+        let audioStream;
         const recordButton = document.getElementById("recordButton");
         const generateButton = document.getElementById("generateButton");
         const statusMessage = document.getElementById("statusMessage");
         recordButton.addEventListener("click", async () => {
             if (!mediaRecorder || mediaRecorder.state === "inactive") {
                 try {
+                    // Stop any existing stream tracks before requesting a new one
+                    if (audioStream) {
+                        audioStream.getTracks().forEach(track => track.stop());
+                    }
+                    audioStream = await navigator.mediaDevices.getUserMedia({ audio: true });
+                    mediaRecorder = new MediaRecorder(audioStream, { mimeType: "audio/webm" });
                     mediaRecorder.ondataavailable = event => audioChunks.push(event.data);
                             console.error("Error:", error);
                             statusMessage.textContent = "Error processing audio data. Please try again.";
                         }
+                        // Clean up the audio tracks after processing is complete
+                        if (audioStream) {
+                            audioStream.getTracks().forEach(track => track.stop());
+                        }
                     };
                     audioChunks = [];
             return bufferArray;
         }
     </script>
+</body></html>