UI libraries / Vue InstantSearch / Widgets

ais-voice-search

Signature 
<ais-voice-search
  // Optional parameters
  :search-as-you-speak="boolean"
  :button-title="string"
  :disabled-button-title="string"
  :class-names="object"
/>
Import
Copy 
1
2
3
4
5
6
7
8
9

import { AisVoiceSearch } from 'vue-instantsearch';
// Use 'vue-instantsearch/vue3/es' for Vue 3

export default {
  components: {
    AisVoiceSearch
  },
  // ...
};

1. Follow additional steps in Optimize build size to ensure your code is correctly bundled.
2. This imports all the widgets, even the ones you don’t use. Read the Getting started guide for more information.

See code examples
See live example

About this widget

The ais-voice-search widget lets users perform a voice-based query.

It uses the Web Speech API, which only Chrome (from version 25) has implemented so far. This means the voiceSearch widget only works on desktop Chrome and Android Chrome. It doesn’t work on iOS Chrome, which uses the iOS WebKit.

Examples

Copy 
1

<ais-voice-search />

Props

Parameter Description
search-as-you-speak
type: boolean
default: false
Optional

Whether to trigger the search as you speak. If false, search is triggered only after speech is finished. If true, search is triggered whenever the engine delivers an interim transcript.
Copy 
1

<ais-voice-search search-as-you-speak />
button-title
type: string
default: 'Search by voice'
Optional

The title attribute on the button
Copy 
1

<ais-voice-search button-title="Voice Search" />
disabled-button-title
type: string
default: 'Search by voice (not supported on this browser)'
Optional

The title attribute on the button when it’s disabled on unsupported browsers
Copy 
1

<ais-voice-search disabled-button-title="Voice Search Disabled" />
class-names
type: object
default: {}
Optional

The CSS classes you can override:

  • ais-VoiceSearch: the root element of the widget.
  • ais-VoiceSearch-button: the button element.
  • ais-VoiceSearch-status: the status element.
Copy 
1
2
3
4
5
6
7

<ais-voice-search
  :class-names="{
    'ais-VoiceSearch': 'MyVoiceSearch',
    'ais-VoiceSearch-button': 'MyVoiceSearchButton',
    'ais-VoiceSearch-status': 'MyVoiceSearchStatus'
  }"
/>

Customize the UI

Parameter Description
default

The slot to override the complete DOM output of the widget.

Note that when you implement this slot, none of the other slots will change the output, as the default slot surrounds them.

Scope

  • isBrowserSupported: boolean: true if user’s browser supports voice search.
  • isListening: boolean: true if listening to user’s speech.
  • toggleListening: () => void: Starts listening to user’s speech, or stops it if already listening.
  • voiceListeningState: object: An object containing the following states regarding speech recognition:
    • status: string: current status (initial|askingPermission|waiting|recognizing|finished|error).
    • transcript: string: currently recognized transcript.
    • isSpeechFinal: boolean: true if speech recognition is finished.
    • errorCode: string|undefined: an error code (if any). Refer to the spec for more information.
Copy 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<ais-voice-search>
  <template v-slot="{
      isBrowserSupported,
      isListening,
      toggleListening,
      voiceListeningState,
  }">
    <button @click="toggleListening">click</button>
    <p>isListening: {{ isListening ? 'true' : 'false' }}</p>
    <p>isBrowserSupported: {{ isBrowserSupported ? 'true' : 'false' }}</p>
    <pre>voiceListeningState: {{
      JSON.stringify(voiceListeningState, null, 2)
    }}</pre>
  </template>
</ais-voice-search>
buttonText

The slot to override the DOM output inside the button.

Scope

  • isListening: boolean: true if listening to user’s speech.
  • isBrowserSupported: boolean: true if user’s browser supports voice search.
  • status: string: current status (initial|askingPermission|waiting|recognizing|finished|error).
  • errorCode: string|undefined: an error code (if any). Refer to the spec for more information.
  • transcript: string: currently recognized transcript.
  • isSpeechFinal: boolean: true if speech recognition is finished.
Copy 
1
2
3
4
5

<ais-voice-search>
  <template v-slot:buttonText="{ isListening }">
    {{ isListening ? 'Stop' : 'Start' }}
  </template>
</ais-voice-search>
status

The slot to override the DOM output of the status.

Scope

  • isListening: boolean: true if listening to user’s speech.
  • isBrowserSupported: boolean: true if user’s browser supports voice search.
  • status: string: current status (initial|askingPermission|waiting|recognizing|finished|error).
  • errorCode: string|undefined: an error code (if any). Refer to the spec for more information.
  • transcript: string: currently recognized transcript.
  • isSpeechFinal: boolean: true if speech recognition is finished.
Copy 
1
2
3
4
5
6
7
8
9
10

<ais-voice-search>
  <template v-slot:status="{ status, transcript }">
    <p v-if="status == 'initial'">
      Press the button to start speaking.
    </p>
    <p v-else>
      Searching for {{transcript}}
    </p>
  </template>
</ais-voice-search>

HTML output

Copy 
1
2
3
4
5
6
7
8

<div class="ais-VoiceSearch">
  <button class="ais-VoiceSearch-button" type="button" title="Search by voice">
    ...
  </button>
  <div class="ais-VoiceSearch-status">
    ...
  </div>
</div>
Did you find this page helpful?
Vue InstantSearch v4