Hugging Face's logo

Spaces:
EnDevSols
/
ASR-Arabic-JS
Running

App Files Community
muzammil-eds commited on
Commit
ddbbed9
·
verified ·
1 Parent(s): 9a9b4ca

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +44 -12
index.html CHANGED
@@ -84,6 +84,15 @@
84
  display: inline-block;
85
  margin-top: 20px;
86
  }
 
 
 
 
 
 
 
 
 
87
  </style>
88
  </head>
89
  <body>
@@ -91,21 +100,23 @@
91
  <h1>Audio Transcription and Similarity Checker</h1>
92
 
93
  <div id="original-audio" class="audio-section">
94
- <h2>Upload Original Audio</h2>
95
  <label class="upload-btn" for="originalFile">Choose Audio File</label>
96
  <input type="file" id="originalFile" accept="audio/*">
97
  <div id="originalRecorder" class="recorder">
98
- <i class="fas fa-microphone"></i>
99
  </div>
 
100
  </div>
101
 
102
  <div id="user-audio" class="audio-section">
103
- <h2>Upload User Audio</h2>
104
  <label class="upload-btn" for="userFile">Choose Audio File</label>
105
  <input type="file" id="userFile" accept="audio/*">
106
  <div id="userRecorder" class="recorder">
107
- <i class="fas fa-microphone"></i>
108
  </div>
 
109
  </div>
110
 
111
  <button id="transcribeButton" class="button">Perform Transcription and Testing</button>
@@ -218,21 +229,42 @@
218
  });
219
 
220
  mediaRecorder.start();
221
-
222
- setTimeout(() => {
223
- mediaRecorder.stop();
224
- }, 3000); // Record for 3 seconds
225
  });
226
  };
227
 
 
 
228
  document.getElementById("originalRecorder").addEventListener("click", async () => {
229
- originalAudioBlob = await recordAudio();
230
- alert("Original audio recorded!");
 
 
 
 
 
 
 
 
 
 
 
231
  });
232
 
233
  document.getElementById("userRecorder").addEventListener("click", async () => {
234
- userAudioBlob = await recordAudio();
235
- alert("User audio recorded!");
 
 
 
 
 
 
 
 
 
 
 
236
  });
237
  </script>
238
  </body>
 
84
  display: inline-block;
85
  margin-top: 20px;
86
  }
87
+ .stop-button {
88
+ background-color: #ff5733;
89
+ color: white;
90
+ padding: 10px 20px;
91
+ cursor: pointer;
92
+ border-radius: 5px;
93
+ display: none;
94
+ margin: 10px;
95
+ }
96
  </style>
97
  </head>
98
  <body>
 
100
  <h1>Audio Transcription and Similarity Checker</h1>
101
 
102
  <div id="original-audio" class="audio-section">
103
+ <h2>Upload or Record Original Audio</h2>
104
  <label class="upload-btn" for="originalFile">Choose Audio File</label>
105
  <input type="file" id="originalFile" accept="audio/*">
106
  <div id="originalRecorder" class="recorder">
107
+ <i class="fas fa-microphone"></i> Record
108
  </div>
109
+ <button id="stopOriginalRecording" class="stop-button">Stop Recording</button>
110
  </div>
111
 
112
  <div id="user-audio" class="audio-section">
113
+ <h2>Upload or Record User Audio</h2>
114
  <label class="upload-btn" for="userFile">Choose Audio File</label>
115
  <input type="file" id="userFile" accept="audio/*">
116
  <div id="userRecorder" class="recorder">
117
+ <i class="fas fa-microphone"></i> Record
118
  </div>
119
+ <button id="stopUserRecording" class="stop-button">Stop Recording</button>
120
  </div>
121
 
122
  <button id="transcribeButton" class="button">Perform Transcription and Testing</button>
 
229
  });
230
 
231
  mediaRecorder.start();
232
+ return mediaRecorder;
 
 
 
233
  });
234
  };
235
 
236
+ let originalRecorderInstance, userRecorderInstance;
237
+
238
  document.getElementById("originalRecorder").addEventListener("click", async () => {
239
+ originalRecorderInstance = await recordAudio();
240
+ document.getElementById("stopOriginalRecording").style.display = "inline-block";
241
+ document.getElementById("originalRecorder").style.display = "none";
242
+ });
243
+
244
+ document.getElementById("stopOriginalRecording").addEventListener("click", () => {
245
+ originalRecorderInstance.stop();
246
+ originalRecorderInstance.addEventListener("stop", async () => {
247
+ originalAudioBlob = await recordAudio();
248
+ alert("Original audio recorded!");
249
+ });
250
+ document.getElementById("stopOriginalRecording").style.display = "none";
251
+ document.getElementById("originalRecorder").style.display = "inline-block";
252
  });
253
 
254
  document.getElementById("userRecorder").addEventListener("click", async () => {
255
+ userRecorderInstance = await recordAudio();
256
+ document.getElementById("stopUserRecording").style.display = "inline-block";
257
+ document.getElementById("userRecorder").style.display = "none";
258
+ });
259
+
260
+ document.getElementById("stopUserRecording").addEventListener("click", () => {
261
+ userRecorderInstance.stop();
262
+ userRecorderInstance.addEventListener("stop", async () => {
263
+ userAudioBlob = await recordAudio();
264
+ alert("User audio recorded!");
265
+ });
266
+ document.getElementById("stopUserRecording").style.display = "none";
267
+ document.getElementById("userRecorder").style.display = "inline-block";
268
  });
269
  </script>
270
  </body>