A Custom Component for Retool that adds Speech to Text capability.
Note
It requires, only the first time, the permission from the browser to use the microphone.
Warning
Please refer to the official documentation of the SpeechRecognition capability about browsers compatibility and different implementations between vendors. We've only tested successfully on Google Chrome.
Drag a Custom Component into your canvas in a Retool app.
Put this code into the IFrame Code
area of the Custom Component:
<script src="https://unpkg.com/@eloquentops/retool-plugin-speech2text"></script>
Allow the following checkbox in the interaction
section of the Custom Component:
- Microphone
- Storage and cookies
You can add options in the Model
such this example (values are the default).
Important
An empty object {}
is required! Do not leave empty.
{
lang: 'en-US',
continuous: false,
interimResults: true,
maxAlternatives: 1,
}
Please refer to this official documentation about the SpeechRecognition
options.
Further options are:
{
keepActive: true,
labelStart: 'Start',
labelStop: 'Stop'
}
keepActive
is a custom option that force the restart of the speech in case of silence. Otherwise the SpeechRecognition
will close automatically after few seconds of silence.
The component renders a single button, thus, you can configure labels of the two states.
Important
Right now, when you change an option in the Model, you need to reload the component, because SpeechRecognition
cannot be reset at runtime. If you need to set an option through another component at runtime, such as select the language, you can trigger a custom component reload during on-change event of the select component.
Fair question. The component exposes two additional properties in its model:
{
lastMessage: '', // String
messages: [] // Array of strings
}
So, you can bind them to your Retool components as you normally would do, such as:
Last message: {{customComponent2.model?.lastMessage}}
This plugin is released under the 3-Clause BSD license.
Copyright © 2023 Fabio Franchino, https://fabiofranchino.com