Speech to Text Search by vtexarg

${"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAABCAIAAAB2XpiaAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAFUlEQVR4nGPg4+Mz1Nfjl5T7f2c+AAzxA3lptuDWAAAAAElFTkSuQmCC","img":{"src":"https://img.shields.io/badge/all_contributors-0-orange.svg?style=flat-square","width":110,"height":20,"type":"svg"}}$

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://user-images.githubusercontent.com/23383993/127346535-62a7546b-accd-468b-adfa-3495cabe64b9.gif"}}

Configuration

Add the vtexarg.speech-to-text app to your theme's peer dependency in the manifest.json file.
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  \},

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 name	Type	Description	Default value
`lang`	`enum`	Language used by the Google Chrome NLP API.	`en-EN`
`iconHeight`	`string`	Icon height in px.	`20px`
`iconWidth`	`string`	Icon width in px.	`20px`
`imgSrc`	`string`	URL 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`