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.
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
speech-to-text
propsProp 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:
This project follows the all-contributors specification. Contributions of any kind are welcome!
Updated 27 days ago
Did this page help you?