Skip to main content
Signature
<ais-voice-search
  // Optional parameters
  :search-as-you-speak="boolean"
  :button-title="string"
  :disabled-button-title="string"
  :class-names="object"
/>

​
Import

  • Component
  • Plugin
To ensure optimal bundle sizes, see Optimize build size.
Vue
import { AisVoiceSearch } from "vue-instantsearch";
// Use "vue-instantsearch/vue3/es" for Vue 3

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

​
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

Vue
<ais-voice-search />

​
Props

​
search-as-you-speak
boolean
default:false
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.
Vue
<ais-voice-search search-as-you-speak />
​
button-title
string
default:"'Search by voice'"
The title attribute on the button.
Vue
<ais-voice-search button-title="Voice Search" />
​
disabled-button-title
string
The title attribute on the button when it’s disabled on unsupported browsers.
Vue
<ais-voice-search disabled-button-title="Voice Search Disabled" />
​
class-names
object
default:"{}"
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.
Vue
<ais-voice-search
  :class-names="{
    'ais-VoiceSearch': 'MyVoiceSearch',
    'ais-VoiceSearch-button': 'MyVoiceSearchButton',
    'ais-VoiceSearch-status': 'MyVoiceSearchStatus'
  }"
/>

​
Customize the UI

​
default
The slot to override the complete DOM output of the widget.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.
Vue
<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.
Vue
<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.
Vue
<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

HTML
<div class="ais-VoiceSearch">
  <button class="ais-VoiceSearch-button" type="button" title="Search by voice">
    ...
  </button>
  <div class="ais-VoiceSearch-status">...</div>
</div>
⌘I