Spaces:
Running
on
Zero
Running
on
Zero
Create index.html
Browse files- index.html +78 -0
index.html
ADDED
|
@@ -0,0 +1,78 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
<!DOCTYPE html>
|
| 2 |
+
<html>
|
| 3 |
+
<body>
|
| 4 |
+
<div id="gradio-container"></div>
|
| 5 |
+
|
| 6 |
+
<script>
|
| 7 |
+
window.addEventListener('DOMContentLoaded', (event) => {
|
| 8 |
+
let recorder;
|
| 9 |
+
let chunks =[];
|
| 10 |
+
let audioComponent;
|
| 11 |
+
let recognition; // Speech recognition object
|
| 12 |
+
|
| 13 |
+
window.addEventListener('DOMContentLoaded', (event) => {
|
| 14 |
+
audioComponent = document.getElementById("mic_audio");
|
| 15 |
+
|
| 16 |
+
// Initialize speech recognition
|
| 17 |
+
recognition = new webkitSpeechRecognition() || new SpeechRecognition(); // Cross-browser compatibility
|
| 18 |
+
recognition.continuous = true; // Keep listening
|
| 19 |
+
recognition.interimResults = false; // Don't return partial results
|
| 20 |
+
|
| 21 |
+
recognition.onresult = event => {
|
| 22 |
+
const transcript = event.results.transcript.toLowerCase(); // Get the recognized text
|
| 23 |
+
console.log("Recognized:", transcript); // For debugging
|
| 24 |
+
|
| 25 |
+
if (transcript.includes("start recording")) { // Your "start" command
|
| 26 |
+
startRecording();
|
| 27 |
+
} else if (transcript.includes("stop recording")) { // Your "stop" command
|
| 28 |
+
stopRecording();
|
| 29 |
+
}
|
| 30 |
+
};
|
| 31 |
+
|
| 32 |
+
recognition.onerror = event => {
|
| 33 |
+
console.error("Speech recognition error:", event.error);
|
| 34 |
+
};
|
| 35 |
+
|
| 36 |
+
recognition.start(); // Start listening for voice commands immediately
|
| 37 |
+
|
| 38 |
+
});
|
| 39 |
+
|
| 40 |
+
function startRecording() {
|
| 41 |
+
navigator.mediaDevices.getUserMedia({ audio: true })
|
| 42 |
+
.then(stream => {
|
| 43 |
+
recorder = new MediaRecorder(stream);
|
| 44 |
+
recorder.ondataavailable = e => {
|
| 45 |
+
if (e.data.size > 0) {
|
| 46 |
+
chunks.push(e.data);
|
| 47 |
+
}
|
| 48 |
+
};
|
| 49 |
+
recorder.start();
|
| 50 |
+
console.log("Recording started.");
|
| 51 |
+
})
|
| 52 |
+
.catch(err => console.error('Error accessing microphone:', err));
|
| 53 |
+
}
|
| 54 |
+
|
| 55 |
+
function stopRecording() {
|
| 56 |
+
if (recorder && recorder.state === "recording") {
|
| 57 |
+
recorder.stop();
|
| 58 |
+
recorder.onstop = async () => {
|
| 59 |
+
const blob = new Blob(chunks, { type: 'audio/wav' }); // Or appropriate type
|
| 60 |
+
const file = new File([blob], "recording.wav", { type: 'audio/wav' }); // Create a File object
|
| 61 |
+
|
| 62 |
+
const dataTransfer = new DataTransfer();
|
| 63 |
+
dataTransfer.items.add(file);
|
| 64 |
+
audioComponent.files = dataTransfer.files; // Set the files property
|
| 65 |
+
|
| 66 |
+
audioComponent.dispatchEvent(new Event('change')); // Trigger change to send data
|
| 67 |
+
|
| 68 |
+
chunks =;
|
| 69 |
+
console.log("Recording stopped and data sent.");
|
| 70 |
+
};
|
| 71 |
+
}
|
| 72 |
+
}
|
| 73 |
+
|
| 74 |
+
});
|
| 75 |
+
|
| 76 |
+
</script>
|
| 77 |
+
</body>
|
| 78 |
+
</html>
|