Website Voice-to-Text Integration

I have a custom HTML / JavaScript website that also runs as a Progressive Web App. I need to layer in real-time voice-to-text so users can speak and immediately see the transcription appear on screen in English.

Scope
• Plug-in a lightweight, browser-based solution—Web Speech API, Azure Speech SDK, or a similarly free tier-friendly library is fine as long as it stays client-side and keeps the PWA installable.
• Provide a simple JavaScript module I can call from any page to start, stop, and fetch the live transcript.
• Show the transcript in an existing <div> I will designate; no heavy UI overhaul required.
• Keep the code clean, commented, and compatible with modern Chromium-based browsers and Safari.

Deliverable
1. Working JS file(s) plus any CSS or service-worker tweaks.
2. Short README explaining setup and how to invoke the functions.
3. Quick demo page so I can test the feature before merging into production.

I’m aiming for a straightforward integration without server dependencies, so focus on clarity and small footprint.