Webkit Speech connector for Algolia InstantSearch.js

Webkit Speech connector for Algolia InstantSearch.js allows you to easily add Speech to Text (STT) as a widget to your Algolia search .

This repo is initially developed by Lextenso, open to the community ♥️ and isn't affiliated or supported by Google or Algolia.

As of July 1, 2019, this project is no longer being maintained. Feel free to fork it!

Built with Web Speech API

This is a middleware between Algolia InstantSearch.js and Google Chrome's Web Speech API. This Algolia connector is bundled with the NPM package instantsearch.js/es/connectors/connectSearchBox.

The connector handle :

• Microphone browser authorization
• Output text results in search input
• Refine Algolia search with new values in realtime

Requirements

This connector doesn't inject any templates, you have to develop your own HTML elements to trigger this connector.

You also need Algolia credentials.

Dependencies

• instantsearch.js : 2.10.0

Installation

Standalone

Pre-compiled bundle is available on jsdelivr.com CDN :

<script src="https://cdn.jsdelivr.net/gh/Lextenso/webkit-speech-algolia-connector-instantsearch.js@0.3/dist/webkitSpeechAlgoliaConnector.js"></script>

Or build the connector with Webpack :

lext:webkit-speech-algolia-connector-instantsearch.js$ npm run build

ES Module with Webpack

Import the webkitSpeechAlgoliaConnector module which is available in the /src directory.

import webkitSpeechAlgoliaConnector from './webkitSpeechAlgoliaConnector';

Configuration

All attributes are listed and detailed in the specifications section.

Standalone

<script type="text/javascript">
const search = instantsearch(config);

// [...]

search.addWidget(
    webkitSpeechAlgoliaConnector({
        container: {
            searchInput: [string],
            voiceButton: [string]
        },
        template: {
            onActiveClass: [string],
            onInactiveClass: [string],
            // OR
            onStateChange: [function (state => 'active' || 'inactive')]
        },
        recognitionConfig: {
            lang: [string],
            continuous: [boolean]
        }
    })
);

// [...]

search.start();
</script>

NPM - Webpack

import InstantSearch from 'instantsearch.js/es/';
import webkitSpeechAlgoliaConnector from './webkitSpeechAlgoliaConnector';

const search = InstantSearch(config);

// [...]

search.addWidget(
    webkitSpeechAlgoliaConnector({
        container: {
            searchInput: [string],
            voiceButton: [string],
        },
        template: {
            onActiveClass: [string],
            onInactiveClass: [string],
            // OR
            onStateChange: [function (state => 'active' || 'inactive')]
        },
        recognitionConfig: {
            lang: [string],
            continuous: [boolean]
        }
    })
);

// [...]

search.start();

Build examples

Two examples are available : Standalone and ES Module. Each example require Google Chrome (> version 25) to work properly.

Execute this command to build examples.

lext:webkit-speech-algolia-connector-instantsearch.js$ npm run build-example

Specifications

Attributes			Required ?	Comment
container
	searchInput	[string]	Yes	This string must be a valid CSS selector string.
	voiceButton	[string]	Yes	This string must be a valid CSS selector string.
template
	onActiveClass	[string]	Yes (except if `onStateChange` is set)
	onInactiveClass	[string]	Yes (except if `onStateChange` is set)
	onErrorClass	[string]	No (if NOT set `onInactiveClass` will be used)
	onStateChange	[function (state => active || inactive || error)]	Yes (Only if `on{state}Class` are not enouth for your needs)	This callback will be triggered every time the state change. Possible values: active OR inactive OR error NOTE : This callback function override `onInactiveClass`, `onActiveClass` and `onErrorClass`
autoHideContainer		[boolean || string]	No	Hide the container voiceButton if Web Speech APi isn't supported by the browser. It can be a valid CSS selector string, if you want to hide parent container.
recognitionConfig			No	Web Speech API configuration (see doc)
	lang	[string]	No	By default it detect the language with the user-agent but it can be define manually.
	continuous	[boolean]	No	STT stop listening when it detects final sentence

Todo

• NPM publish
• Improve documentation

Author

• Julien Madiot (@Madi-Ji)

---

Google™ and Google Chrome™ are registered trademarks of Google LLC. and might also be trademarks or registered trademarks in other countries. (Copyright and trademark information)

Algolia and all other trademarks, service marks, graphics and logos used are trademarks or registered trademarks of Algolia or Algolia’s licensors. (Acceptable use policy)