Speech to Text Search

All ContributorsAll Contributors

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.

speechlowspeechlow

Configuration

  1. Adding the app as a theme dependency in the manifest.json file;
  2. 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 nameTypeDescriptionDefault value
langenumDefines the language that will be used by the Google Chrome NLP APIen-EN
iconHeightstringDefines the icon height in px20px
iconWidthstringDefines the icon width in px20px
imgSrcstringDefines the link to the image to be shownnone

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

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



Did this page help you?