[Suggestion] Vanilla JavaScript browser transcription with no bundler (CDN script tag) #27
Description
What to build
A single-file HTML example that demonstrates real-time microphone transcription using Deepgram, loaded entirely via CDN script tags with zero build tools. The example should include a minimal backend endpoint for secure API key handling.
Why this matters
Many developers prototyping voice features — especially those in hackathons, tutorials, or non-Node.js backend environments — want to add Deepgram to a web page without installing npm, configuring webpack, or setting up a build pipeline. A copy-paste HTML file that "just works" is the fastest path from zero to working transcription. This is especially valuable for developers coming from Python, PHP, or Ruby backends who want to add a browser voice UI.
Suggested scope
- Language: Vanilla JavaScript + HTML (no framework, no bundler)
- Deepgram APIs: Speech-to-Text (WebSocket streaming)
- Features:
getUserMedia()microphone capture, WebSocket connection to Deepgram, live transcript display, start/stop button - Backend: Minimal (a 10-line Express/Python/PHP endpoint that returns a short-lived API key or proxies the WebSocket)
- Complexity: Low — single HTML file + optional lightweight backend
Acceptance criteria
- Runnable with minimal setup (open HTML file, point to backend with API key)
- README explains the pattern clearly
- Uses current Deepgram WebSocket API directly (no SDK dependency in browser)
- Works in Chrome, Firefox, and Safari with
getUserMedia - Includes clear security note about not exposing API keys in client-side code
- Total browser code fits in a single HTML file under 100 lines
Raised by the DX intelligence system.