Spaces:
Running
Running
muzammil-eds
commited on
Commit
•
7b855af
1
Parent(s):
1a93e1e
Update index.html
Browse files- 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
|
161 |
-
alert("Please upload or record
|
|
|
|
|
|
|
|
|
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 |
-
|
230 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
231 |
});
|
232 |
|
233 |
document.getElementById("userRecorder").addEventListener("click", async () => {
|
234 |
-
|
235 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
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>
|