webkit-speech-algolia-connector-instantsearch.js v0.3.5

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 :hearts: and isn't affiliated or supported by Google or Algolia.

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

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)