Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Voice Activity Detection Demo</title> | |
| <script src="https://cdn.jsdelivr.net/npm/onnxruntime-web/dist/ort.min.js"></script> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script> | |
| ort.env.wasm.wasmPaths = 'https://cdn.jsdelivr.net/npm/onnxruntime-web/dist/'; | |
| </script> | |
| </head> | |
| <body> | |
| <main class="flex min-h-screen flex-col items-center justify-between p-24"> | |
| <div class="text-center"> | |
| <div id="status" class="text-4xl mb-4">🔇 Not Listening</div> | |
| <div id="audioList" class="space-y-4"></div> | |
| </div> | |
| </main> | |
| <script type="module"> | |
| import { SpeechChunks } from './SpeechChunks.js'; | |
| let speechChunks; | |
| function updateStatus(isListening) { | |
| document.getElementById('status').textContent = isListening ? "🎙️ Listening..." : "🔇 Not Listening"; | |
| } | |
| function addAudioToList(blob) { | |
| const audioList = document.getElementById('audioList'); | |
| const audio = document.createElement('audio'); | |
| audio.controls = true; | |
| audio.src = URL.createObjectURL(blob); | |
| audio.onended = () => URL.revokeObjectURL(audio.src); | |
| audioList.appendChild(audio); | |
| } | |
| async function initializeSpeechChunks() { | |
| try { | |
| speechChunks = new SpeechChunks( | |
| () => { | |
| console.log("speech start"); | |
| updateStatus(true); | |
| }, | |
| (blob) => { | |
| console.log("speech end"); | |
| updateStatus(false); | |
| addAudioToList(blob); | |
| } | |
| ); | |
| await speechChunks.start(); | |
| } catch (error) { | |
| console.error("Error initializing SpeechChunks:", error); | |
| updateStatus(false); | |
| document.getElementById('status').textContent = "Error: " + error.message; | |
| } | |
| } | |
| initializeSpeechChunks(); | |
| </script> | |
| </body> | |
| </html> |