Turn on voice control in your website.
Handsfree for website allows users to interact with the web page just by speaking voice commands. Hundreds of voice commands are supported out of the box. e.g. "click", "select", "search text", "scroll up", "play" and "reload".
Check out this demo page to see how the voice control works.
Voice commands for HTML elements
- Links
- Buttons
- Texts
- Pictures
- Video and music players
- Form elements
Voice commands for the website
- Scrolling
- Navigation
- Text searching
Speech recognition
- Turn on/off microphone
- Display voice's volume
Multiple languages are supported
- English
- Spanish
- Portuguese
- Chinese (Cantonese)
Custom voice commands
- Build your own set of voice commands
Check out demo to see the full list of voice commands
Web Speech Recognition services are not supported by all the browsers. Here you can check the browser support https://caniuse.com/#feat=speech-recognition
Add handsfree for website as dependency
npm install handsfree-for-websiteInitialize and run the tool
import hansfreeForWebsite from 'handsfree-for-website';
const handsfree = hansfreeForWebsite.init();
handsfree.turnOn();Add the following script tag at the end of the <body>.
<script src="https://unpkg.com/handsfree-for-website/dist/handsfree-for-website.js" crossorigin></script>Initialize and run the tool
var handsfree = window.hansfreeForWebsite.init();
handsfree.turnOn();Requiring the module or the global variable gives you an object that defines one primary function.
Useful to initialize the speech recognition service.
(Object): An object with the following properties:
lang (String): Language code (ISO 639-1). Default to browser language. i.e. "en-US"turnedOn (Bool): Automatically start when calling theinitfunction. Default tofalse.continuesRecognition (Bool): When continues recognition mode is turned on, the service will be continuously listening and returning transcriptions for what was received. If the continues recognition mode is turned off, the service will start listening only after pressing theCtrlkey and will stop as soon as a voice command has been recognized. Default totrue.modules (Array): List of voice command modules. Default to modules implemented by Handsfree for website modules).
(Object): Handsfree for website client.
As result of executing the init function an object with the following methods is given to interact with the tool.
It makes the mic start listening for voice commands
It finishes the speech recogntion service and makes the mic stop listening
It switches the speech recognition to a continues mode.
It switches off the continues speech recognition. The user will need to press the Ctrl key before say any voice command.
It returns the list of voice commands modules.
It adds voice commands modules to the previously configured.
It replaces the list of voice commands modules with the provided ones.
It changes the language. A language code format (ISO 639-1) is expected. i.e. "en-US"
It returns the current language.
In order to support custom voice commands useful to allow the users tu execute website specific functionality it is required to add a module.
Here a simple module.
const myModule = {
name: 'Module name',
description: 'My first module',
contexts: [{
context: 'root',
commands: [{
name: 'say hi',
action: () => {
alert('hello master')
}
}]
}]
}
handsfree.addModules([myModule]);Much more complex modules can be implemented check out the docs to know how to do it.