Spaces:

EnDevSols
/

ASR-Arabic-JS

Running

App Files Files Community

muzammil-eds commited on Sep 5, 2024

Commit

1a93e1e

verified ·

1 Parent(s): ddbbed9

Update index.html

Browse files

Files changed (1) hide show

index.html +12 -44

index.html CHANGED Viewed

@@ -84,15 +84,6 @@
             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>
@@ -100,23 +91,21 @@
         <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>
@@ -229,42 +218,21 @@
                 });
                 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 = await recordAudio();
-                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 = await recordAudio();
-                alert("User audio recorded!");
-            });
-            document.getElementById("stopUserRecording").style.display = "none";
-            document.getElementById("userRecorder").style.display = "inline-block";
         });
     </script>
 </body>

             display: inline-block;
             margin-top: 20px;
         }
     </style>
 </head>
 <body>
         <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>
                 });
                 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>