New to Kendo UI for jQuery? Start a free 30-day trial
Getting Started with the SpeechToTextButton
This guide demonstrates how to get up and running with the Kendo UI for jQuery SpeechToTextButton.
After the completion of this guide, you will be able to achieve the following end result:
Loading ...
1. Create a Button Element
Create a <button> element on the page and use it as an initialization element for the SpeechToTextButton.
html
<button id="speechButton"></button>
<div id="result"></div>2. Initialize the SpeechToTextButton
In this step, you will initialize the SpeechToTextButton from the <button> element. All settings will be provided in the script statement.
html
<button id="speechButton"></button>
<div id="result"></div>
<script>
$(document).ready(function() {
$("#speechButton").kendoSpeechToTextButton();
});
</script>3. Handle Speech Recognition Results
Use the result event to process speech recognition results.
html
<button id="speechButton"></button>
<div id="result"></div>
<script>
$(document).ready(function() {
$("#speechButton").kendoSpeechToTextButton({
result: function(e) {
$("#result").text("Result: " + transcript);
}
});
});
</script>4. Enable Continuous Recognition
For scenarios where longer dictation is required, enable the continuous option.
html
<button id="speechButton"></button>
<div id="result"></div>
<script>
$(document).ready(function() {
$("#speechButton").kendoSpeechToTextButton({
continuous: true,
result: function(e) {
$("#result").text("Result: " + transcript);
}
});
});
</script>