Lupasearch Voice

Plugin for Lupa voice search component. It can be installed with the Lupa search plugin or seperately for a manual integration with Lupa.

Installation

Install package using npm or yarn:

npm install @getlupa/voice

yarn add @getlupa/voice

Configuration

Once the script is imported, you can start configuring it.

The configuration below would bind Lupa voice search button to the element of your page that has an id voiceButton. This element can be an existing input element in your page. The inputSelector element should already existing at the time of configuration.

import lupaSearchVoice from "@getlupa/voice";
import "@getlupa/voice/style";

const options = {
  inputSelector: "#voiceButton",
  mountingBehavior: "replace",
  language: "en-US",
};

lupaSearchVoice.voiceSearchButton(options);

Options

Voice search configuration usage, including default values for each property:

const options = {
  queryKey: "",
  inputSelector: "",
  mountingBehavior: "replace",
  allowedMountUrls: [],
  baseStyleLink: "",
  language: "lt",
  labels: {
    listening: "Listening...",
    microphoneOff: "Microphone is off. Try again.",
    serviceError: "Service error during transcription",
    microphoneNotFound:
      "No microphone found. Please connect a microphone and try again.",
    microphoneNotAllowed:
      "Microphone access denied. Please allow microphone access in your browser settings",
    connecting: "Connecting...",
  },
};

• queryKey - a reference to a search query in GetLupa. Required;

• inputSelector - CSS selector for the input element where the voice search button will be mounted;

• mountingBehavior - behavior for mounting the voice search button: 'replace', 'append' or 'prepend';

• allowedMountUrls - array of URLs where mounting is allowed;

• baseStyleLink - URL to a base stylesheet for the voice search component. Load using: lupaSearchVoice.init(options) command;

• language - language code for transcription;

• labels.listening - label shown when the microphone is active and listening;

• labels.microphoneOff - label shown when the microphone is turned off;

• labels.serviceError - label shown when there is a service error during transcription;

• labels.microphoneNotFound - label shown when no microphone is found;

• labels.microphoneNotAllowed - label shown when microphone access is denied;

• labels.connecting - label shown when connecting to the transcription service.

Event callbacks

Voice search can emit callbakcs on certain events:

const options = {
  // ... other configuration
  callbacks: {
    onTranscriptionResults: (context: SearchBoxResultCallbackContext) => {},
    onMounted: () => {},
    onClosed: () => {},
  },
};

• onTranscriptionResults - called when transcription results are received from the service. Receives a context object with transcription data.

• onMounted - called when the voice search component is mounted.

• onClosed - called when the voice search component is closed.

Styling

You can apply your own styles to existing Lupa voice component classes, or you can use a very basic default styling as a base:

import "@getlupa/voice/style";

Unmounting plugin

If for any reason you need to remove content and event listeners generated by the plugin (or to reload the plugin with new settings), use these commands to remove plugin from your page:

const lupaSearch = window.lupaSearch;

lupaSearch.clearVoiceSearchButton(); // unmount voice search dialog button