handonweb-voice-widget

Browser voice input widget using the Web Speech API. Drop-in microphone button with pulsing animation and real-time transcript display. Zero dependencies.

Install

npm install handonweb-voice-widget

Or include directly:

<link rel="stylesheet" href="voice-widget.css">
<script src="index.js"></script>

Usage

const VoiceWidget = require('handonweb-voice-widget');

const voice = new VoiceWidget({
  container: document.getElementById('voice'),
  language: 'en-GB',
  onResult: (transcript, isFinal) => {
    if (isFinal) {
      console.log('You said:', transcript);
    }
  },
  onError: (error) => {
    console.error('Error:', error);
  }
});

Options

Option	Type	Default	Description
container	HTMLElement	required	DOM element to render into
language	string	'en-GB'	BCP 47 language code
onResult	Function	null	Called with (transcript, isFinal)
onError	Function	null	Called with (errorType)
continuous	boolean	false	Keep listening after getting a result
interimResults	boolean	true	Show words as they're spoken
showTranscript	boolean	true	Display transcript below the button

Methods

• voice.start() — Start listening
• voice.stop() — Stop listening
• voice.toggle() — Toggle on/off
• voice.isListening() — Returns true if active
• voice.isSupported() — Returns true if the browser supports speech recognition
• voice.destroy() — Remove the widget from the DOM

Browser Support

Works in Chrome, Edge, and other Chromium-based browsers. Safari has partial support. Firefox doesn't support the Web Speech API yet.

The widget shows a friendly message in unsupported browsers instead of breaking.

Styling

Include voice-widget.css for the default look, or target these classes:

• .vw-container — wrapper
• .vw-mic-btn — the microphone button
• .vw-listening — added to button while active
• .vw-transcript — the transcript display area
• .vw-status — status text below button

About Hand On Web

We build AI chatbots, voice agents, and automation tools for businesses.

• 🌐 handonweb.com
• 📧 outreach@handonweb.com
• 📍 Chester, UK

Licence

MIT