Override Microphone + Language Detection Template Guide

this example template enables users to speak with a unith digital human using a microphone button it is intended for developers who would like to create a create a bespoke microphone experience it includes voice activity detection (vad) azure speech sdk automatic language detection transcript preview message delivery via postmessage assumes the digital human is configured to accept external events as defined here 📦 features feature description 🎙️ click to activate mic manual start/stop mic via button 🧠 voice activity detection only triggers when real speech is detected 🌐 language detection auto detects up to 4 supported languages 🧾 live transcript displays recognized speech as text 🤖 sends message to dh final transcript sent to unith iframe 🚀 how it works 1\ embed unith iframe use mode=video if you would like to hide the unith chat widget and only leverage the video component unsert the appropriate api key for your org must include allow="microphone" for more information on video only mode, see this page 2\ azure speech key configuration step 1 get your credentials log in to azure portal https //portal azure com/ create a speech resource (cognitive services) copy your key region step 2 add to template replace these lines in your template (below) const speechkey = "your azure speech key"; const serviceregion = "your azure region"; // e g "eastus" do not expose real keys in production environments 3\ auto language detection configure your supported languages const autodetectsourcelanguageconfig = speechsdk autodetectsourcelanguageconfig fromlanguages(\[ "en us", "fr fr", "es es" ]); ✅ limit azure allows max 4 languages for auto detect 4\ transcript display (optional) live updates as you speak transcriptel innertext = "transcript " + transcriptbuffer; 5\ message delivery after recognition ends, this is called iframe contentwindow\ postmessage({ event "dh message", payload { message finalmessage } }, "https //chat unith ai"); configure the digital human to accept external events as defined here this can also be done directly via the advanced modification window in interface 🧪 silence handling after 2 seconds of silence, the recognizer will stop function resetsilencetimer() { silencetimer = settimeout(() => { status innertext = "status silence detected stopping recognition "; recognizer stopcontinuousrecognitionasync(); }, 2000); } modify this if you want always on behavior 🛠 customization options task how 🌐 change languages edit the fromlanguages array 🎯 change unith digital human modify iframe src 🎨 customize ui change button or layout 🛑 disable silence timeout remove resetsilencetimer() logic ✅ setup checklist task complete? embed iframe with correct url ⬜ add azure speechkey and region ⬜ configure languages ⬜ replace placeholder vad js ⬜ test in browser ⬜ template & examples files example template html vad js example template unith mic + language detection 🎧 activate mic status waiting transcript vad js // minimal vad mock for offline testing (replace with actual implementation if needed) function vad(stream, options) { console warn("⚠️ vad mock triggered replace with real vad js "); if (options && typeof options onvoicestart === 'function') { settimeout(() => { options onvoicestart(); // simulate voice start after delay }, 1000); } }