Setup Documentation
Everything you need to get Multi-Language Live Captions running — from opening the app in your browser to your first live session.
Requirements
Before you begin, make sure you have the following:
Chrome, Edge, or Safari. Firefox works for most features.
Any input device your browser can see will work.
The free F0 tier is enough for most events.
A wired connection is recommended for live events.
Launching the App
There's nothing to install. The full app runs in the browser.
1. Open the app
Visit the hosted app in any modern browser:
https://multi-language-captions.littlebigideas.ca2. Grant microphone access
Your browser will prompt you for microphone permission. Click Allow — the app needs audio access to transcribe speech in real time. If you accidentally deny it, update the permission in your browser's site settings and reload the page.
3. That's it
Once the page loads, you'll see a credentials panel. Enter your Azure keys there to enable transcription. No account, no install, no build step required.
Azure Speech Setup
The app uses Azure Cognitive Services Speech to transcribe audio in real time. You'll need a Speech resource key and its region to connect.
Create a Speech resource
Go to portal.azure.com and sign in.
Click Create a resource and search for Speech.
Select your subscription, create a resource group, choose a region, and select the Free F0 pricing tier.
Once deployed, go to Keys and Endpoint in the resource menu. Copy KEY 1 and the Location/Region.
Enter your credentials
Paste your key and region into the credentials panel when the app loads. The values are saved in localStorage — they stay on your device and are never sent anywhere other than Azure.
Tip: if you use the app on a shared computer, use the Clear credentials button in the settings menu when you're done.
Azure Translator Setup (optional)
By default the app transcribes in English and French. If you need a third language — or want to override the translation target — you can connect an Azure Translator resource. This step is optional.
Create a Translator resource
Follow the same steps as for Speech, but search for Translator instead. Once deployed, collect these three values from your resource:
Without this, the app runs in two-language mode (EN + FR). The Translator resource unlocks a configurable target language and can improve translation quality for specialized vocabulary.
Running a Session
Select your audio device
Use the dropdown at the top of the app to pick the microphone or audio interface you want to capture. When you're ready, press Start Captioning — transcription begins immediately.
Share the viewer URL
Send your audience to the viewer page:
https://multi-language-captions.littlebigideas.ca/viewerAnyone with the link can watch captions appear in real time. The viewer is read-only and requires no login. Open it on a second screen, a confidence monitor, or share it with remote attendees.
End the session
Press Stop Captioning to end transcription. The viewer will show a session-ended state. Your credentials remain saved for the next session.
Troubleshooting
No audio devices appear in the dropdown
Make sure your browser has microphone permission for this site. Check your OS audio settings to confirm the device is recognized system-wide, then reload the page.
Azure returns 401 Unauthorized
Double-check that your Speech key is correct and the region matches exactly — even a single character difference will cause auth to fail. Re-enter both values in the credentials panel.
Captions are delayed or choppy
Azure Speech works best on a stable network. Wi-Fi latency can introduce noticeable lag. Try a wired connection, or move closer to your router.
The browser tab freezes during a long session
Keep the app tab in the foreground. Some browsers throttle background tabs and may suspend audio processing. Disabling battery-saver mode can also help.
Viewer shows 'Waiting for captions…' but the app is running
Make sure the viewer is on the same session URL as the app. If you reloaded the app, a new session ID may have been generated — share the updated viewer link.
Still stuck? Get in touch and include your browser, OS, and any error messages shown in the browser console.