muzammil-eds commited on
Commit
7b855af
1 Parent(s): 1a93e1e

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +57 -14
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>
@@ -157,8 +168,12 @@
157
  }
158
 
159
  document.getElementById("transcribeButton").addEventListener("click", async () => {
160
- if (!originalAudioBlob || !userAudioBlob) {
161
- alert("Please upload or record both audio files.");
 
 
 
 
162
  return;
163
  }
164
 
@@ -170,6 +185,13 @@
170
  if (percentComplete >= 100) clearInterval(progressInterval);
171
  }, 200);
172
 
 
 
 
 
 
 
 
173
  const transcriptionOriginal = await transcribe(originalAudioBlob);
174
  const transcriptionUser = await transcribe(userAudioBlob);
175
 
@@ -218,21 +240,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>
 
168
  }
169
 
170
  document.getElementById("transcribeButton").addEventListener("click", async () => {
171
+ if (!originalAudioBlob && !document.getElementById("originalFile").files[0]) {
172
+ alert("Please upload or record original audio.");
173
+ return;
174
+ }
175
+ if (!userAudioBlob && !document.getElementById("userFile").files[0]) {
176
+ alert("Please upload or record user audio.");
177
  return;
178
  }
179
 
 
185
  if (percentComplete >= 100) clearInterval(progressInterval);
186
  }, 200);
187
 
188
+ if (!originalAudioBlob) {
189
+ originalAudioBlob = document.getElementById("originalFile").files[0];
190
+ }
191
+ if (!userAudioBlob) {
192
+ userAudioBlob = document.getElementById("userFile").files[0];
193
+ }
194
+
195
  const transcriptionOriginal = await transcribe(originalAudioBlob);
196
  const transcriptionUser = await transcribe(userAudioBlob);
197
 
 
240
  });
241
 
242
  mediaRecorder.start();
243
+ return mediaRecorder;
 
 
 
244
  });
245
  };
246
 
247
+ let originalRecorderInstance, userRecorderInstance;
248
+
249
  document.getElementById("originalRecorder").addEventListener("click", async () => {
250
+ originalRecorderInstance = await recordAudio();
251
+ document.getElementById("stopOriginalRecording").style.display = "inline-block";
252
+ document.getElementById("originalRecorder").style.display = "none";
253
+ });
254
+
255
+ document.getElementById("stopOriginalRecording").addEventListener("click", () => {
256
+ originalRecorderInstance.stop();
257
+ originalRecorderInstance.addEventListener("stop", async () => {
258
+ originalAudioBlob = new Blob(originalRecorderInstance);
259
+ alert("Original audio recorded!");
260
+ });
261
+ document.getElementById("stopOriginalRecording").style.display = "none";
262
+ document.getElementById("originalRecorder").style.display = "inline-block";
263
  });
264
 
265
  document.getElementById("userRecorder").addEventListener("click", async () => {
266
+ userRecorderInstance = await recordAudio();
267
+ document.getElementById("stopUserRecording").style.display = "inline-block";
268
+ document.getElementById("userRecorder").style.display = "none";
269
+ });
270
+
271
+ document.getElementById("stopUserRecording").addEventListener("click", () => {
272
+ userRecorderInstance.stop();
273
+ userRecorderInstance.addEventListener("stop", async () => {
274
+ userAudioBlob = new Blob(userRecorderInstance);
275
+ alert("User audio recorded!");
276
+ });
277
+ document.getElementById("stopUserRecording").style.display = "none";
278
+ document.getElementById("userRecorder").style.display = "inline-block";
279
  });
280
  </script>
281
  </body>