| 
 | 1 | +---  | 
 | 2 | +title: SpeechToTextButton  | 
 | 3 | +page_title: Configuration, methods and events of Kendo UI SpeechToTextButton  | 
 | 4 | +description: How to initialize a SpeechToTextButton UI component and configure its API.  | 
 | 5 | +res_type: api  | 
 | 6 | +---  | 
 | 7 | + | 
 | 8 | +# kendo.ui.SpeechToTextButton  | 
 | 9 | + | 
 | 10 | +Represents the Kendo UI SpeechToTextButton component. Inherits from [Button](/api/javascript/ui/button).  | 
 | 11 | + | 
 | 12 | +The SpeechToTextButton is an extension of the Kendo UI Button that provides a user-friendly interface for capturing audio and converting it to text. It can be configured to use the browser's built-in Web Speech API or integrated with other third-party speech recognition services.  | 
 | 13 | + | 
 | 14 | +As the SpeechToTextButton inherits from the Kendo UI Button, it supports the common button configuration options like `size`, `rounded`, `themeColor`, `fillMode`, and `disabled`.  | 
 | 15 | + | 
 | 16 | +## Configuration  | 
 | 17 | + | 
 | 18 | +### integrationMode `String` *(default: "webSpeech")*  | 
 | 19 | +Specifies which speech recognition engine or integration the component should use.  | 
 | 20 | +- `webSpeech` - Utilizes the browser's native Web Speech API.  | 
 | 21 | +- `none` - Disables the built-in speech recognition. Use this when integrating with a custom or third-party speech recognition service.  | 
 | 22 | + | 
 | 23 | +#### Example  | 
 | 24 | +    <button id="speechButton"></button>  | 
 | 25 | +    <script>  | 
 | 26 | +        $("#speechButton").kendoSpeechToTextButton({  | 
 | 27 | +            integrationMode: "none"  | 
 | 28 | +        });  | 
 | 29 | +    </script>  | 
 | 30 | + | 
 | 31 | +### icon `String` *(default: "microphone-outline")*  | 
 | 32 | +The name of the Kendo UI font icon to be displayed in the button when it is not active (not listening).  | 
 | 33 | + | 
 | 34 | +#### Example  | 
 | 35 | + | 
 | 36 | +    <button id="speechButton"></button>  | 
 | 37 | +    <script>  | 
 | 38 | +        $("#speechButton").kendoSpeechToTextButton({  | 
 | 39 | +            icon: "headset"  | 
 | 40 | +        });  | 
 | 41 | +    </script>  | 
 | 42 | + | 
 | 43 | +### stopIcon `String` *(default: "stop-sm")*  | 
 | 44 | +The name of the Kendo UI font icon to be displayed in the button when it is active (listening).  | 
 | 45 | + | 
 | 46 | +#### Example  | 
 | 47 | +    <button id="speechButton"></button>  | 
 | 48 | +    <script>  | 
 | 49 | +        $("#speechButton").kendoSpeechToTextButton({  | 
 | 50 | +            stopIcon: "stop-outline"  | 
 | 51 | +        });  | 
 | 52 | +    </script>  | 
 | 53 | + | 
 | 54 | +### lang `String` *(default: 'en-US')*  | 
 | 55 | +Specifies a BCP 47 language tag (e.g., 'en-US', 'fr-FR') used for speech recognition.  | 
 | 56 | + | 
 | 57 | +#### Example  | 
 | 58 | +    <button id="speechButton"></button>  | 
 | 59 | +    <script>  | 
 | 60 | +        $("#speechButton").kendoSpeechToTextButton({  | 
 | 61 | +            lang: 'fr-FR'  | 
 | 62 | +        });  | 
 | 63 | +    </script>  | 
 | 64 | + | 
 | 65 | +### continuous `Boolean` *(default: false)*  | 
 | 66 | +Controls whether continuous results are returned for each recognition, or only a single result once recognition stops.  | 
 | 67 | + | 
 | 68 | +#### Example  | 
 | 69 | +    <button id="speechButton"></button>  | 
 | 70 | +    <script>  | 
 | 71 | +        $("#speechButton").kendoSpeechToTextButton({  | 
 | 72 | +            continuous: true  | 
 | 73 | +        });  | 
 | 74 | +    </script>  | 
 | 75 | + | 
 | 76 | +### interimResults `Boolean` *(default: false)*  | 
 | 77 | +Controls whether interim results should be returned (true) or not (false). Interim results are results that are not yet final.  | 
 | 78 | + | 
 | 79 | +#### Example  | 
 | 80 | +    <button id="speechButton"></button>  | 
 | 81 | +    <script>  | 
 | 82 | +        $("#speechButton").kendoSpeechToTextButton({  | 
 | 83 | +            interimResults: true  | 
 | 84 | +        });  | 
 | 85 | +    </script>  | 
 | 86 | + | 
 | 87 | +### maxAlternatives `Number` *(default: 1)*  | 
 | 88 | +Represents the maximum number of alternative transcriptions to return for each result.  | 
 | 89 | + | 
 | 90 | +#### Example  | 
 | 91 | +    <button id="speechButton"></button>  | 
 | 92 | +    <script>  | 
 | 93 | +        $("#speechButton").kendoSpeechToTextButton({  | 
 | 94 | +            maxAlternatives: 5  | 
 | 95 | +        });  | 
 | 96 | +    </script>  | 
 | 97 | + | 
 | 98 | +### messages `Object`  | 
 | 99 | +Allows customization of the messages displayed by the widget.  | 
 | 100 | + | 
 | 101 | +### messages.unsupported `String` *(default: "Speech recognition is not supported in this browser.")*  | 
 | 102 | +The message shown when speech recognition is not supported by the browser.  | 
 | 103 | + | 
 | 104 | +#### Example  | 
 | 105 | +    <button id="speechButton"></button>  | 
 | 106 | +    <script>  | 
 | 107 | +        $("#speechButton").kendoSpeechToTextButton({  | 
 | 108 | +            messages: {  | 
 | 109 | +                unsupported: "Your browser does not support speech recognition."  | 
 | 110 | +            }  | 
 | 111 | +        });  | 
 | 112 | +    </script>  | 
 | 113 | + | 
 | 114 | +### messages.notInitialized `String` *(default: "Speech recognition engine not initialized.")*  | 
 | 115 | +The message for when the speech recognition engine is not initialized.  | 
 | 116 | + | 
 | 117 | +#### Example  | 
 | 118 | +    <button id="speechButton"></button>  | 
 | 119 | +    <script>  | 
 | 120 | +        $("#speechButton").kendoSpeechToTextButton({  | 
 | 121 | +            messages: {  | 
 | 122 | +                notInitialized: "The speech engine is not ready yet."  | 
 | 123 | +            }  | 
 | 124 | +        });  | 
 | 125 | +    </script>  | 
 | 126 | + | 
 | 127 | +### messages.start `String` *(default: "Start speech recognition")*  | 
 | 128 | +The aria-label for the button when it is not active (not listening).  | 
 | 129 | + | 
 | 130 | +#### Example  | 
 | 131 | +    <button id="speechButton"></button>  | 
 | 132 | +    <script>  | 
 | 133 | +        $("#speechButton").kendoSpeechToTextButton({  | 
 | 134 | +            messages: {  | 
 | 135 | +                start: "Click to start talking"  | 
 | 136 | +            }  | 
 | 137 | +        });  | 
 | 138 | +    </script>  | 
 | 139 | + | 
 | 140 | +### messages.stop `String` *(default: "Stop speech recognition")*  | 
 | 141 | +The aria-label for the button when it is active (listening).  | 
 | 142 | + | 
 | 143 | +#### Example  | 
 | 144 | +    <button id="speechButton"></button>  | 
 | 145 | +    <script>  | 
 | 146 | +        $("#speechButton").kendoSpeechToTextButton({  | 
 | 147 | +            messages: {  | 
 | 148 | +                stop: "Click to stop listening"  | 
 | 149 | +            }  | 
 | 150 | +        });  | 
 | 151 | +    </script>  | 
 | 152 | + | 
 | 153 | +## Methods  | 
 | 154 | + | 
 | 155 | +### startRecognition  | 
 | 156 | +Starts the speech recognition service.  | 
 | 157 | + | 
 | 158 | +#### Example  | 
 | 159 | +    <button id="speechButton"></button>  | 
 | 160 | +    <script>  | 
 | 161 | +        var speechButton = $("#speechButton").kendoSpeechToTextButton().data("kendoSpeechToTextButton");  | 
 | 162 | +        speechButton.startRecognition();  | 
 | 163 | +    </script>  | 
 | 164 | + | 
 | 165 | +### stopRecognition  | 
 | 166 | +Stops the speech recognition service.  | 
 | 167 | + | 
 | 168 | +#### Example  | 
 | 169 | +    <button id="speechButton"></button>  | 
 | 170 | +    <script>  | 
 | 171 | +        var speechButton = $("#speechButton").kendoSpeechToTextButton().data("kendoSpeechToTextButton");  | 
 | 172 | +        speechButton.startRecognition();  | 
 | 173 | +        setTimeout(function() {  | 
 | 174 | +            speechButton.stopRecognition();  | 
 | 175 | +        }, 5000);  | 
 | 176 | +    </script>  | 
 | 177 | + | 
 | 178 | +### abortRecognition  | 
 | 179 | +Aborts the speech recognition service immediately, discarding any current recognition results.  | 
 | 180 | + | 
 | 181 | +#### Example  | 
 | 182 | +    <button id="speechButton"></button>  | 
 | 183 | +    <script>  | 
 | 184 | +        var speechButton = $("#speechButton").kendoSpeechToTextButton().data("kendoSpeechToTextButton");  | 
 | 185 | +        speechButton.startRecognition();  | 
 | 186 | +        // Abort recognition before it completes  | 
 | 187 | +        speechButton.abortRecognition();  | 
 | 188 | +    </script>  | 
 | 189 | + | 
 | 190 | +### isListening  | 
 | 191 | +Returns `true` if the speech recognition is active (listening), otherwise `false`.  | 
 | 192 | + | 
 | 193 | +#### Returns  | 
 | 194 | +`Boolean` `true` if the widget is currently listening for speech input.  | 
 | 195 | + | 
 | 196 | +#### Example  | 
 | 197 | +    <button id="speechButton"></button>  | 
 | 198 | +    <script>  | 
 | 199 | +        var speechButton = $("#speechButton").kendoSpeechToTextButton().data("kendoSpeechToTextButton");  | 
 | 200 | +        speechButton.start();  | 
 | 201 | +        console.log(speechButton.isListening()); // logs true  | 
 | 202 | +    </script>  | 
 | 203 | + | 
 | 204 | +### destroy  | 
 | 205 | +Prepares the SpeechToTextButton for safe removal from DOM.  | 
 | 206 | + | 
 | 207 | +#### Example  | 
 | 208 | +    <button id="speechButton"></button>  | 
 | 209 | +    <script>  | 
 | 210 | +        var speechButton = $("#speechButton").kendoSpeechToTextButton().data("kendoSpeechToTextButton");  | 
 | 211 | +        speechButton.destroy();  | 
 | 212 | +    </script>  | 
 | 213 | + | 
 | 214 | +## Events  | 
 | 215 | + | 
 | 216 | +### start  | 
 | 217 | +Fires when the speech recognition service has begun listening to incoming audio.  | 
 | 218 | + | 
 | 219 | +#### Event Data  | 
 | 220 | +No event data.  | 
 | 221 | + | 
 | 222 | +#### Example  | 
 | 223 | +    <button id="speechButton"></button>  | 
 | 224 | +    <script>  | 
 | 225 | +        $("#speechButton").kendoSpeechToTextButton({  | 
 | 226 | +            start: function() {  | 
 | 227 | +                console.log("Speech recognition started.");  | 
 | 228 | +            }  | 
 | 229 | +        });  | 
 | 230 | +    </script>  | 
 | 231 | + | 
 | 232 | +### end  | 
 | 233 | +Fires when the speech recognition service has disconnected.  | 
 | 234 | + | 
 | 235 | +#### Event Data  | 
 | 236 | +No event data.  | 
 | 237 | + | 
 | 238 | +#### Example  | 
 | 239 | +    <button id="speechButton"></button>  | 
 | 240 | +    <script>  | 
 | 241 | +        $("#speechButton").kendoSpeechToTextButton({  | 
 | 242 | +            end: function() {  | 
 | 243 | +                console.log("Speech recognition ended.");  | 
 | 244 | +            }  | 
 | 245 | +        });  | 
 | 246 | +    </script>  | 
 | 247 | + | 
 | 248 | +### result  | 
 | 249 | +Fires when the speech recognition service returns a result - a word or phrase has been positively recognized.  | 
 | 250 | + | 
 | 251 | +#### Event Data  | 
 | 252 | +##### e.isFinal `Boolean`  | 
 | 253 | +A boolean indicating if the result is final.  | 
 | 254 | +##### e.alternatives `Array`  | 
 | 255 | +An array of alternative transcripts. Each object in the array has `transcript` and `confidence` fields.  | 
 | 256 | + | 
 | 257 | +#### Example  | 
 | 258 | +    <button id="speechButton"></button>  | 
 | 259 | +    <p id="result"></p>  | 
 | 260 | +    <script>  | 
 | 261 | +        $("#speechButton").kendoSpeechToTextButton({  | 
 | 262 | +            interimResults: true,  | 
 | 263 | +            result: function(e) {  | 
 | 264 | +                var transcript = e.alternatives[0].transcript;  | 
 | 265 | +                if (e.isFinal) {  | 
 | 266 | +                    $("#result").text("Final: " + transcript);  | 
 | 267 | +                } else {  | 
 | 268 | +                    $("#result").text("Interim: " + transcript);  | 
 | 269 | +                }  | 
 | 270 | +            }  | 
 | 271 | +        });  | 
 | 272 | +    </script>  | 
 | 273 | + | 
 | 274 | +### error  | 
 | 275 | +Fires when a speech recognition error occurs.  | 
 | 276 | + | 
 | 277 | +#### Event Data  | 
 | 278 | +##### e.error `String|Object`  | 
 | 279 | +The error itself, which may be a string message or an error object depending on the browser and speech recognition engine.  | 
 | 280 | + | 
 | 281 | +#### Example  | 
 | 282 | + | 
 | 283 | +    <button id="speechButton"></button>  | 
 | 284 | +    <script>  | 
 | 285 | +        $("#speechButton").kendoSpeechToTextButton({  | 
 | 286 | +            error: function(e) {  | 
 | 287 | +                console.log(e.error);  | 
 | 288 | +            }  | 
 | 289 | +        });  | 
 | 290 | +    </script>  | 
 | 291 | + | 
0 commit comments