Documentation
Feedback
Guides

Speech to Text Search

The speech-to-text app uses Google Chrome language processing to listen to the user's microphone and convert speech-to-text. The recognized text is then used to redirect the user to the corresponding search page.

{"base64":"  ","img":{"width":640,"height":308,"type":"gif","mime":"image/gif","wUnits":"px","hUnits":"px","length":3758010,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtexarg-speech-to-text-0.gif"}}

Configuration

  1. Add the vtexarg.speech-to-text app to your theme's peer dependency in the manifest.json file.
  2. Add the text-speech block to the desired theme template or inside another block. For example:

_10
"flex-layout.col#text-speech": {
_10
"children": [
_10
"speech-to-text"
_10
]
_10
},

  1. Then, declare the speech-to-text block using the props stated in the Props table. For example

_10
"speech-to-text": {
_10
"props": {
_10
"lang": "es-ES",
_10
"iconHeight": "20px",
_10
"iconWidth": "20px",
_10
"imgSrc": "https://upload.wikimedia.org/wikipedia/commons/a/a7/Font_Awesome_5_solid_microphone.svg"
_10
}
_10
}

Props

Prop nameTypeDescriptionDefault value
langenumLanguage used by the Google Chrome NLP API.en-EN
iconHeightstringIcon height in px.20px
iconWidthstringIcon width in px.20px
imgSrcstringURL of the source image.none

Customization

To apply CSS customizations in this and other blocks, follow the Using CSS handles for store customization guide.

CSS Handles
audioSearchContainer
audioSearchImg
audioSearchImgRecordingState
Contributors
2
Photo of the contributor
Photo of the contributor
+ 2 contributors
Was this helpful?
Yes
No
Suggest edits (Github)
Contributors
2
Photo of the contributor
Photo of the contributor
+ 2 contributors
On this page