Speech to Text Search

This app uses Google Chrome language processing to listen with the microphone and return as a result a word. With that result the component redirects to the search page using it as a parameter.

speechlow

Configuration

Adding the app as a theme dependency in the manifest.json file;
Declaring the app's main block in a given theme template or inside another block from the theme. For example:

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

And then add the needed configuration:

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

`speech-to-text` props

Prop name	Type	Description	Default value
`lang`	`enum`	Defines the language that will be used by the Google Chrome NLP API	`en-EN`
`iconHeight`	`string`	Defines the icon height in px	`20px`
`iconWidth`	`string`	Defines the icon width in px	`20px`
`imgSrc`	`string`	Defines the link to the image to be shown	`none`

Customization

In order to apply CSS customizations in this and other blocks, follow the instructions given in the recipe on [Using CSS Handles for store customization](https://vtex.io/docs/recipes/style/using-css-handles-for-store-customization).

CSS Handles
`audioSearchContainer`
`audioSearchImg`
`audioSearchImgRecordingState`

Contributors ✨

Thanks goes to these wonderful people:

Fabricio Vagliente

_{Tomás Alfredo Mehdi}
💻

This project follows the all-contributors specification. Contributions of any kind are welcome!

Configuration

speech-to-text props

Customization

Contributors ✨

`speech-to-text` props