Spaces:

EnDevSols
/

ASR-Arabic-JS

Running

App Files Files Community

muzammil-eds commited on Sep 5, 2024

Commit

7b855af

verified ·

1 Parent(s): 1a93e1e

Update index.html

Browse files

Files changed (1) hide show

index.html +57 -14

index.html CHANGED Viewed

@@ -84,6 +84,15 @@
             display: inline-block;
             margin-top: 20px;
         }
     </style>
 </head>
 <body>
@@ -91,21 +100,23 @@
         <h1>Audio Transcription and Similarity Checker</h1>
         <div id="original-audio" class="audio-section">
-            <h2>Upload Original Audio</h2>
             <label class="upload-btn" for="originalFile">Choose Audio File</label>
             <input type="file" id="originalFile" accept="audio/*">
             <div id="originalRecorder" class="recorder">
-                <i class="fas fa-microphone"></i>
             </div>
         </div>
         <div id="user-audio" class="audio-section">
-            <h2>Upload User Audio</h2>
             <label class="upload-btn" for="userFile">Choose Audio File</label>
             <input type="file" id="userFile" accept="audio/*">
             <div id="userRecorder" class="recorder">
-                <i class="fas fa-microphone"></i>
             </div>
         </div>
         <button id="transcribeButton" class="button">Perform Transcription and Testing</button>
@@ -157,8 +168,12 @@
         }
         document.getElementById("transcribeButton").addEventListener("click", async () => {
-            if (!originalAudioBlob || !userAudioBlob) {
-                alert("Please upload or record both audio files.");
                 return;
             }
@@ -170,6 +185,13 @@
                 if (percentComplete >= 100) clearInterval(progressInterval);
             }, 200);
             const transcriptionOriginal = await transcribe(originalAudioBlob);
             const transcriptionUser = await transcribe(userAudioBlob);
@@ -218,21 +240,42 @@
                 });
                 mediaRecorder.start();
-                setTimeout(() => {
-                    mediaRecorder.stop();
-                }, 3000);  // Record for 3 seconds
             });
         };
         document.getElementById("originalRecorder").addEventListener("click", async () => {
-            originalAudioBlob = await recordAudio();
-            alert("Original audio recorded!");
         });
         document.getElementById("userRecorder").addEventListener("click", async () => {
-            userAudioBlob = await recordAudio();
-            alert("User audio recorded!");
         });
     </script>
 </body>

             display: inline-block;
             margin-top: 20px;
         }
+        .stop-button {
+            background-color: #ff5733;
+            color: white;
+            padding: 10px 20px;
+            cursor: pointer;
+            border-radius: 5px;
+            display: none;
+            margin: 10px;
+        }
     </style>
 </head>
 <body>
         <h1>Audio Transcription and Similarity Checker</h1>
         <div id="original-audio" class="audio-section">
+            <h2>Upload or Record Original Audio</h2>
             <label class="upload-btn" for="originalFile">Choose Audio File</label>
             <input type="file" id="originalFile" accept="audio/*">
             <div id="originalRecorder" class="recorder">
+                <i class="fas fa-microphone"></i> Record
             </div>
+            <button id="stopOriginalRecording" class="stop-button">Stop Recording</button>
         </div>
         <div id="user-audio" class="audio-section">
+            <h2>Upload or Record User Audio</h2>
             <label class="upload-btn" for="userFile">Choose Audio File</label>
             <input type="file" id="userFile" accept="audio/*">
             <div id="userRecorder" class="recorder">
+                <i class="fas fa-microphone"></i> Record
             </div>
+            <button id="stopUserRecording" class="stop-button">Stop Recording</button>
         </div>
         <button id="transcribeButton" class="button">Perform Transcription and Testing</button>
         }
         document.getElementById("transcribeButton").addEventListener("click", async () => {
+            if (!originalAudioBlob && !document.getElementById("originalFile").files[0]) {
+                alert("Please upload or record original audio.");
+                return;
+            }
+            if (!userAudioBlob && !document.getElementById("userFile").files[0]) {
+                alert("Please upload or record user audio.");
                 return;
             }
                 if (percentComplete >= 100) clearInterval(progressInterval);
             }, 200);
+            if (!originalAudioBlob) {
+                originalAudioBlob = document.getElementById("originalFile").files[0];
+            }
+            if (!userAudioBlob) {
+                userAudioBlob = document.getElementById("userFile").files[0];
+            }
             const transcriptionOriginal = await transcribe(originalAudioBlob);
             const transcriptionUser = await transcribe(userAudioBlob);
                 });
                 mediaRecorder.start();
+                return mediaRecorder;
             });
         };
+        let originalRecorderInstance, userRecorderInstance;
         document.getElementById("originalRecorder").addEventListener("click", async () => {
+            originalRecorderInstance = await recordAudio();
+            document.getElementById("stopOriginalRecording").style.display = "inline-block";
+            document.getElementById("originalRecorder").style.display = "none";
+        });
+        document.getElementById("stopOriginalRecording").addEventListener("click", () => {
+            originalRecorderInstance.stop();
+            originalRecorderInstance.addEventListener("stop", async () => {
+                originalAudioBlob = new Blob(originalRecorderInstance);
+                alert("Original audio recorded!");
+            });
+            document.getElementById("stopOriginalRecording").style.display = "none";
+            document.getElementById("originalRecorder").style.display = "inline-block";
         });
         document.getElementById("userRecorder").addEventListener("click", async () => {
+            userRecorderInstance = await recordAudio();
+            document.getElementById("stopUserRecording").style.display = "inline-block";
+            document.getElementById("userRecorder").style.display = "none";
+        });
+        document.getElementById("stopUserRecording").addEventListener("click", () => {
+            userRecorderInstance.stop();
+            userRecorderInstance.addEventListener("stop", async () => {
+                userAudioBlob = new Blob(userRecorderInstance);
+                alert("User audio recorded!");
+            });
+            document.getElementById("stopUserRecording").style.display = "none";
+            document.getElementById("userRecorder").style.display = "inline-block";
         });
     </script>
 </body>