New to Kendo UI for jQuery? Start a free 30-day trial

SpeechToTextButton

configuration

Configures the Speech to Text button in the end affix. The button is always visible. When null or not configured, the button is enabled by default. Use { enable: false } to disable it.

speechToTextButton

Boolean|Object

Default: true

<div id="promptbox"></div>
<script>
$("#promptbox").kendoPromptBox({
    speechToTextButton: {
        enable: true
    },
    placeholder: "Click the microphone to speak...",
    speechToTextResult: function(e) {
        console.log("Speech result:", e.transcript);
    }
});
</script>

<div id="promptbox"></div>
<script>
$("#promptbox").kendoPromptBox({
    speechToTextButton: {
        enable: false
    },
    placeholder: "Speech recognition disabled..."
});
</script>

speechToTextButton.continuous

Boolean

Enables continuous speech recognition mode. When enabled, recognition continues until manually stopped.

Default: false

<div id="promptbox"></div>
<script>
$("#promptbox").kendoPromptBox({
    speechToTextButton: {
        continuous: true
    },
    placeholder: "Continuous speech mode..."
});
</script>

speechToTextButton.enable

Boolean

Enables or disables the Speech to Text button.

Default: true

<div id="promptbox"></div>
<script>
$("#promptbox").kendoPromptBox({
    speechToTextButton: {
        enable: false
    },
    placeholder: "Speech recognition disabled..."
});
</script>

speechToTextButton.fillMode

String

Defines the fill mode for the Speech to Text button.

<div id="promptbox"></div>
<script>
$("#promptbox").kendoPromptBox({
    speechToTextButton: {
        fillMode: "flat"
    },
    placeholder: "Flat speech button..."
});
</script>

speechToTextButton.icon

String

Defines the font icon name for the Speech to Text button.

<div id="promptbox"></div>
<script>
$("#promptbox").kendoPromptBox({
    speechToTextButton: {
        icon: "microphone"
    },
    placeholder: "Custom speech icon..."
});
</script>

speechToTextButton.interimResults

Boolean

Enables interim (partial) speech recognition results.

Default: false

<div id="promptbox"></div>
<script>
$("#promptbox").kendoPromptBox({
    speechToTextButton: {
        interimResults: true
    },
    placeholder: "Shows interim results..."
});
</script>

speechToTextButton.lang

String

Sets the language for speech recognition. Use standard language codes.

Default: "en-US"

<div id="promptbox"></div>
<script>
$("#promptbox").kendoPromptBox({
    speechToTextButton: {
        lang: "es-ES"
    },
    placeholder: "Habla en espanol..."
});
</script>

speechToTextButton.maxAlternatives

Number

Sets the maximum number of alternative transcriptions to return.

Default: 1

<div id="promptbox"></div>
<script>
$("#promptbox").kendoPromptBox({
    speechToTextButton: {
        maxAlternatives: 3
    },
    placeholder: "Multiple alternatives..."
});
</script>

speechToTextButton.rounded

String

Defines the border radius for the Speech to Text button.

<div id="promptbox"></div>
<script>
$("#promptbox").kendoPromptBox({
    speechToTextButton: {
        rounded: "full"
    },
    placeholder: "Fully rounded speech button..."
});
</script>

speechToTextButton.size

String

Defines the size of the Speech to Text button.

<div id="promptbox"></div>
<script>
$("#promptbox").kendoPromptBox({
    speechToTextButton: {
        size: "large"
    },
    placeholder: "Large speech button..."
});
</script>

speechToTextButton.themeColor

String

Defines the theme color for the Speech to Text button.

<div id="promptbox"></div>
<script>
$("#promptbox").kendoPromptBox({
    speechToTextButton: {
        themeColor: "primary"
    },
    placeholder: "Primary colored speech button..."
});
</script>