Syncfusion Blazor Speech To Text

Syncfusion Blazor Speech To Text

A comprehensive guide for implementing voice input and speech recognition using the Syncfusion Blazor SpeechToText component. This component captures audio from the user's microphone and converts it to text in real time.

Component Overview

The SpeechToText component provides voice input capabilities by leveraging the browser's Speech Recognition API. It automatically handles microphone access, captures audio, transcribes speech, and manages the listening lifecycle.

Key Features:

• Real-time speech-to-text conversion
• Multi-language support (en-US, fr-FR, de-DE, and 100+ languages)
• Listening state management (Inactive, Listening, Stopped)
• Interim results for real-time feedback
• Error handling for various microphone/network issues
• Browser compatibility detection
• Customizable tooltips and disabled states
• Event callbacks for lifecycle hooks

Documentation and Navigation Guide

Getting Started

📄 Read: references/getting-started.md

• Installation via NuGet package
• Basic component setup and configuration
• Property binding and two-way data binding
• CSS styling and theming
• Integration with TextArea for display
• Minimal working example

Transcript and Language

📄 Read: references/transcript-and-language.md

• Retrieving transcribed text with Transcript property
• Binding transcript to input fields
• Setting language preferences (en-US, fr-FR, etc.)
• Supported language codes and locales
• Real-world multi-language examples
• Language switching patterns

Button Customization

📄 Read: references/button-customization.md

• SpeechToTextButtonSettings configuration
• Button text customization (start and stop states)
• Icon CSS classes and icon positioning
• Icon position values (Left, Right, Top, Bottom)
• Primary button styling (IsPrimary property)
• Dynamic button customization patterns
• Icon library integration (Syncfusion, Font Awesome, Bootstrap)
• Multi-language button text examples

Tooltip Configuration

📄 Read: references/tooltip-configuration.md

• SpeechToTextTooltipSettings configuration
• Tooltip text customization for different states
• Tooltip positioning (12 position options available)
• Position reference guide and best practices
• ShowTooltip property control
• Dynamic tooltip enabling/disabling
• Multi-language tooltip support
• Accessibility considerations for tooltips

Listening States

📄 Read: references/listening-states.md

• Understanding ListeningState property
• State values: Inactive, Listening, Stopped
• Event handling: SpeechRecognitionStarted, SpeechRecognitionStopped
• State-based UI updates and visual feedback
• Waveform animations during listening
• Status indicators and user guidance

Interim Results and Configuration

📄 Read: references/interim-results-and-options.md

• AllowInterimResults property for real-time updates
• Difference between interim and final results
• ShowTooltip property and tooltip customization
• Disabled state configuration
• HTML attributes for custom styling
• Control panel options and UI customization

Public Methods

📄 Read: references/methods.md

• StartListeningAsync() - Start speech recognition
• StopListeningAsync() - Stop speech recognition
• Method signatures and return types
• Exception handling patterns
• Complete control examples with start/stop buttons
• State management and button disabling

Error Handling and Troubleshooting

📄 Read: references/error-handling.md

• Error types: no-speech, aborted, audio-capture, not-allowed, network, etc.
• Error handling patterns and recovery
• User feedback mechanisms for errors
• Network and service availability issues
• Microphone permission troubleshooting
• Browser compatibility checking

Browser Support and API Limitations

📄 Read: references/browser-support.md

• Browser compatibility matrix
• Version requirements for Chrome, Edge, Safari, Opera
• Unsupported browsers (Firefox)
• Feature detection and polyfills
• Graceful degradation for unsupported browsers

Quick Start Example

Here's a minimal example to get started with SpeechToText:

@using Syncfusion.Blazor.Inputs

<div style="display: flex; flex-direction: column; gap: 20px; align-items: center; padding: 20px;">
    <h3>Voice to Text Converter</h3>
    
    <SfSpeechToText @bind-Transcript="@transcript"></SfSpeechToText>
    
    <SfTextArea 
        RowCount="5" 
        ColumnCount="50" 
        @bind-Value="@transcript" 
        ResizeMode="Resize.None" 
        Placeholder="Transcribed text will appear here...">
    </SfTextArea>
</div>

@code {
    private string transcript = "";
}

What this does: 1. Renders a microphone button from SpeechToText 2. Binds the transcribed text to the transcript variable 3. Displays the transcript in a TextArea for editing 4. Uses two-way binding to keep both in sync

Common Patterns

Pattern 1: Real-Time Transcription Display

Display interim results as the user speaks (not just final results):

<SfSpeechToText 
    AllowInterimResults="true"
    @bind-Transcript="@transcript">
</SfSpeechToText>
<p>@transcript</p>

Pattern 2: Multi-Language Support

Allow users to switch between languages:

<select @onchange="@((ChangeEventArgs e) => selectedLanguage = e.Value.ToString())">
    <option value="en-US">English</option>
    <option value="fr-FR">French</option>
    <option value="de-DE">German</option>
</select>

<SfSpeechToText 
    Language="@selectedLanguage"
    @bind-Transcript="@transcript">
</SfSpeechToText>

@code {
    private string selectedLanguage = "en-US";
    private string transcript = "";
}

Pattern 3: Listen for State Changes

Provide visual feedback based on listening state:

<SfSpeechToText 
    ListeningState="@listeningState"
    SpeechRecognitionStarted="@OnListeningStarted"
    SpeechRecognitionStopped="@OnListeningStopped">
</SfSpeechToText>

<div style="margin-top: 15px;">
    @if (listeningState == SpeechToTextState.Listening)
    {
        <span style="color: green;">🎤 Listening...</span>
    }
    else if (listeningState == SpeechToTextState.Stopped)
    {
        <span style="color: orange;">⏸ Stopped</span>
    }
    else
    {
        <span style="color: gray;">○ Ready to listen</span>
    }
</div>

@code {
    private SpeechToTextState listeningState = SpeechToTextState.Inactive;

    private void OnListeningStarted(SpeechRecognitionStartedEventArgs args)
    {
        listeningState = args.State;
    }

    private void OnListeningStopped(SpeechRecognitionStoppedEventArgs args)
    {
        listeningState = args.State;
    }
}

Pattern 4: Error Handling

Gracefully handle errors and inform users:

<SfSpeechToText 
    SpeechRecognitionError="@OnSpeechError"
    @bind-Transcript="@transcript">
</SfSpeechToText>

@if (!string.IsNullOrEmpty(errorMessage))
{
    <div style="color: red; margin-top: 10px;">
        ⚠️ @errorMessage
    </div>
}

@code {
    private string transcript = "";
    private string errorMessage = "";

    private void OnSpeechError(SpeechRecognitionErrorEventArgs args)
    {
        errorMessage = args.Error switch
        {
            "no-speech" => "No speech detected. Please try again.",
            "audio-capture" => "No microphone found. Check your device.",
            "not-allowed" => "Microphone access denied. Check browser permissions.",
            "network" => "Network error. Check your connection.",
            _ => $"Error: {args.Error}"
        };
    }
}

Key Properties

Common Use Cases

1. Voice Search: Add voice input to a search box for hands-free searching 2. Form Filling: Populate form fields using voice input instead of typing 3. Notes Application: Capture voice notes and convert to text 4. Accessibility: Enable voice input for users with typing limitations 5. Multilingual Chat: Support speech input in multiple languages for chat applications 6. Dictation Feature: Create a dictation tool for long-form text entry 7. Customer Support: Record and transcribe customer feedback or support calls 8. Accessibility Compliance: Meet WCAG requirements for voice-enabled interfaces

---

Next Steps

• Start with Getting Started reference for installation
• Explore Transcript and Language for basic usage
• Check Browser Support to ensure compatibility
• Review Error Handling for production-ready implementation

Browser Support and API Limitations

Table of Contents

• Browser Compatibility Matrix
• Version Requirements
• Unsupported Browsers
• Feature Detection
• Graceful Degradation
• Performance Considerations

Browser Compatibility Matrix

The SpeechToText component relies on the Web Speech API for speech recognition. Support varies significantly across browsers.

Supported Browsers

Version Requirements

Chrome/Chromium Browsers

Minimum version: 25+

Recommended version: Latest (v90+)

What changed:

• v25-v70: Basic Web Speech API support
• v70+: Improved recognition accuracy
• v80+: Better error handling
• v90+: Enhanced interim results handling

Edge

Minimum version: 79+ (Chromium-based)

Note: Legacy Edge (pre-Chromium) does not support speech recognition.

Check current Edge version:

• Edge menu → Help and feedback → About Microsoft Edge
• Version should show 79 or higher

Safari

Mac:

• Minimum version: 12+
• Recommended: 14.1+ for best support

iOS:

• Minimum version: 12+ (iPhone, iPad)
• Requires: Microphone permission

Limitations on Safari:

• Interim results may be less frequent
• Some error codes behave differently
• Performance varies on older iOS devices

Opera

Minimum version: 30+

Status: Chromium-based, similar support to Chrome

Unsupported Browsers

Firefox

Status: ❌ Not Supported

Why: Firefox has not implemented the Web Speech API standard, though it's been proposed.

User experience:

@if (browserType == "Firefox")
{
    <div style="background: #fff3e0; padding: 15px; border-radius: 4px;">
        <p>Firefox doesn't support voice input. Please use Chrome, Edge, or Safari.</p>
    </div>
}

Internet Explorer

Status: ❌ Not Supported

Why: IE is obsolete and no longer maintained

Alternative: Encourage users to use modern browsers

Legacy Browsers

• Opera < 30
• Safari < 12
• Chrome < 25

Feature Detection

Browser Support Check

Before using the component, detect browser support:

@using Syncfusion.Blazor.Inputs

<div>
    @if (isSpeechRecognitionSupported)
    {
        <SfSpeechToText @bind-Transcript="@transcript"></SfSpeechToText>
    }
    else
    {
        <div style="background: #ffebee; padding: 15px; border-radius: 4px;">
            <p style="color: #c62828;">
                <strong>Speech recognition is not supported in your browser.</strong><br/>
                Please upgrade to Chrome, Edge, Safari, or Opera.
            </p>
        </div>
        
        <textarea @bind="@transcript" rows="4" style="width: 100%; margin-top: 10px;"></textarea>
    }
</div>

@code {
    private string transcript = "";
    private bool isSpeechRecognitionSupported = true;
    
    // Note: This requires JavaScript interop in production
    // The detection happens client-side via interop
}

JavaScript Interop for Feature Detection

In a real implementation, use JavaScript interop:

// speechRecognition.js
window.SpeechRecognitionHelper = {
    isSupported: function() {
        const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
        return SpeechRecognition !== undefined;
    },
    
    getBrowserInfo: function() {
        const ua = navigator.userAgent;
        if (ua.indexOf('Firefox') > -1) return 'Firefox';
        if (ua.indexOf('Safari') > -1 && ua.indexOf('Chrome') === -1) return 'Safari';
        if (ua.indexOf('Chrome') > -1) return 'Chrome';
        if (ua.indexOf('Edg') > -1) return 'Edge';
        if (ua.indexOf('OPR') > -1) return 'Opera';
        return 'Unknown';
    }
};

Graceful Degradation

Approach 1: Show Fallback UI

When speech recognition is not supported, provide a text input fallback:

@using Syncfusion.Blazor.Inputs

<div style="max-width: 500px;">
    <h3>Feedback Form</h3>
    
    @if (isSupportedByBrowser)
    {
        <div style="display: flex; gap: 10px; align-items: center; margin-bottom: 15px;">
            <SfSpeechToText @bind-Transcript="@feedback"></SfSpeechToText>
            <span style="color: #999;">or type below</span>
        </div>
    }
    
    <SfTextArea 
        @bind-Value="@feedback"
        RowCount="4"
        Placeholder="Share your feedback..."
        style="width: 100%;">
    </SfTextArea>
    
    <button @onclick="SubmitFeedback" style="margin-top: 15px; padding: 10px 20px; background: #4CAF50; color: white; border: none; border-radius: 4px; cursor: pointer;">
        Submit
    </button>
</div>

@code {
    private string feedback = "";
    private bool isSupportedByBrowser = true;
    
    protected override void OnInitialized()
    {
        // Detect browser support here
        // For now, assume supported
    }
    
    private void SubmitFeedback()
    {
        Console.WriteLine($"Feedback submitted: {feedback}");
    }
}

Approach 2: Display Browser Recommendation

@using Syncfusion.Blazor.Inputs

<div style="max-width: 600px;">
    @if (!isSupportedByBrowser)
    {
        <div style="background: #fce4ec; border: 1px solid #f48fb1; border-radius: 4px; padding: 15px; margin-bottom: 20px;">
            <p style="margin: 0; color: #880e4f;">
                <strong>Browser Update Recommended</strong>
            </p>
            <p style="margin: 10px 0 0 0; color: #ad1457; font-size: 14px;">
                Speech recognition requires Chrome 25+, Edge 79+, Safari 12+, or Opera 30+.
            </p>
            <p style="margin: 10px 0 0 0; font-size: 13px;">
                <a href="https://www.google.com/chrome/" style="color: #1976d2; text-decoration: none;">
                    Download Chrome →
                </a>
            </p>
        </div>
    }
    
    <SfSpeechToText @bind-Transcript="@transcript"></SfSpeechToText>
</div>

@code {
    private string transcript = "";
    private bool isSupportedByBrowser = true;
}

Performance Considerations

Network Requirements

The SpeechToText component requires an internet connection for most browsers because recognition is performed server-side. Verify connection before use:

@using Syncfusion.Blazor.Inputs

<div>
    <SfSpeechToText 
        SpeechError="@OnSpeechError"
        @bind-Transcript="@transcript">
    </SfSpeechToText>
    
    @if (!isOnline)
    {
        <p style="color: #f44336;">⚠️ No internet connection. Speech recognition requires internet access.</p>
    }
</div>

@code {
    private string transcript = "";
    private bool isOnline = true;
    
    protected override void OnInitialized()
    {
        // Check internet connectivity
        // Could use JavaScript interop for navigator.onLine
    }
    
    private void OnSpeechError(SpeechErrorEventArgs args)
    {
        if (args.Error == "network")
        {
            isOnline = false;
        }
    }
}

Microphone Access Latency

Consider that microphone permission requests cause UI delays:

<div>
    <p style="color: #666; font-size: 13px;">
        Note: First use will request microphone permission (one-time).
    </p>
    <SfSpeechToText @bind-Transcript="@transcript"></SfSpeechToText>
</div>

@code {
    private string transcript = "";
}

Device-Specific Notes

iOS/iPad:

• May require app to be installed via home screen
• Some background limitations apply
• Battery consumption is higher

Android (Chrome):

• Good support on Android 4.4+
• May require Play Services update
• Battery consumption varies by device

macOS/Safari:

• Excellent support on recent versions
• Very stable and fast
• No known limitations

Windows:

• Full support across Chrome, Edge
• Ensure Windows is updated
• May affect recognition with mixed languages

Best Practices

1. Always check support first:

• Use feature detection
• Provide fallback UI
• Don't assume browser support

2. Test on target browsers:

• Test on Chrome, Edge, Safari
• Verify on actual devices
• Check latest browser versions

3. Inform users about requirements:

• Browser compatibility note
• Microphone permission requirement
• Internet connection needed

4. Implement fallback strategies:

• Text input alternative
• Display error messages
• Suggest browser upgrade

5. Monitor compatibility:

• Track browser versions used
• Update as new versions release
• Log unsupported browser usage

6. Document limitations:

• Note Firefox non-support
• Mention iOS restrictions
• Document network requirements

Sample Browser Compatibility Page

<div style="max-width: 800px; margin: 20px auto;">
    <h2>Browser Support Information</h2>
    
    <div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px;">
        <div style="background: #e8f5e9; padding: 15px; border-radius: 4px;">
            <h4 style="margin: 0; color: #1b5e20;">✅ Fully Supported</h4>
            <ul style="margin: 10px 0; padding-left: 20px;">
                <li>Chrome 25+</li>
                <li>Edge 79+</li>
                <li>Safari 12+</li>
                <li>Opera 30+</li>
            </ul>
        </div>
        
        <div style="background: #ffebee; padding: 15px; border-radius: 4px;">
            <h4 style="margin: 0; color: #b71c1c;">❌ Not Supported</h4>
            <ul style="margin: 10px 0; padding-left: 20px;">
                <li>Firefox</li>
                <li>Internet Explorer</li>
                <li>Old browser versions</li>
            </ul>
        </div>
    </div>
    
    <div style="background: #fff3e0; padding: 15px; border-radius: 4px; margin-top: 20px;">
        <h4 style="margin: 0;">⚠️ Requirements</h4>
        <ul style="margin: 10px 0; padding-left: 20px;">
            <li>Internet connection required</li>
            <li>Microphone must be connected</li>
            <li>Browser microphone permission required</li>
            <li>HTTPS recommended (HTTP limited)</li>
        </ul>
    </div>
</div>

Button Customization

Table of Contents

• ButtonSettings Overview
• Text Configuration
• Icon Configuration
• Icon Position
• Primary Button Styling
• Complete Customization Examples
• Advanced Patterns

ButtonSettings Overview

The ButtonSettings property in SfSpeechToText allows you to customize the microphone button's appearance, text, icons, and behavior. This provides control over how the voice input button is presented to users.

Key Properties

Text Configuration

Basic Text Example

@using Syncfusion.Blazor.Inputs

<div style="padding: 20px;">
    <h3>Custom Button Text</h3>
    
    <SfSpeechToText>
        <SpeechToTextButtonSettings
            Text="🎤 Start Recording"
            StopStateText="⏹️ Stop Recording">
        </SpeechToTextButtonSettings>
    </SfSpeechToText>
</div>

@code {
    // Button displays "🎤 Start Recording" by default
    // Changes to "⏹️ Stop Recording" when listening
}

Empty Text (Icon Only)

@using Syncfusion.Blazor.Inputs

<div style="padding: 20px;">
    <h3>Icon-Only Button</h3>
    
    <SfSpeechToText>
        <SpeechToTextButtonSettings
            IconCss="e-icons e-microphone"
            StopIconCss="e-icons e-stop">
        </SpeechToTextButtonSettings>
    </SfSpeechToText>
</div>

@code {
    // Button displays only icons, no text
}

Icon Configuration

Using Syncfusion Icon Classes

@using Syncfusion.Blazor.Inputs

<div style="padding: 20px;">
    <h3>Syncfusion Icons</h3>
    
    <SfSpeechToText>
        <SpeechToTextButtonSettings
            Text="Listen"
            IconCss="e-icons e-microphone"
            StopStateText="Stop"
            StopIconCss="e-icons e-stop">
        </SpeechToTextButtonSettings>
    </SfSpeechToText>
</div>

@code {
    // Uses Syncfusion's built-in icon library
    // Microphone icon in start state, stop icon in listening state
}

Using Font Awesome Icons

@using Syncfusion.Blazor.Inputs

<div style="padding: 20px;">
    <h3>Font Awesome Icons</h3>
    
    <SfSpeechToText>
        <SpeechToTextButtonSettings
            Text="Record"
            IconCss="fas fa-microphone"
            StopStateText="Stop"
            StopIconCss="fas fa-stop">
        </SpeechToTextButtonSettings>
    </SfSpeechToText>
</div>

@code {
    // Requires Font Awesome CSS to be included in the application
    // FontAwesome icons provide a different visual style
}

Using Bootstrap Icons

@using Syncfusion.Blazor.Inputs

<div style="padding: 20px;">
    <h3>Bootstrap Icons</h3>
    
    <SfSpeechToText>
        <SpeechToTextButtonSettings
            Text="Voice"
            IconCss="bi bi-mic"
            StopStateText="Stop"
            StopIconCss="bi bi-stop">
        </SpeechToTextButtonSettings>
    </SfSpeechToText>
</div>

@code {
    // Requires Bootstrap Icons CSS to be included
    // Bootstrap icons are lightweight and modern
}

Icon Position

The IconPosition enum controls where the icon appears relative to the button text.

Icon Position Values

Left Position (Default)

@using Syncfusion.Blazor.Inputs

<div style="padding: 20px;">
    <h3>Icon Left (Default)</h3>
    
    <SfSpeechToText>
        <SpeechToTextButtonSettings
            Text="Listen"
            IconCss="e-icons e-microphone"
            IconPosition="Syncfusion.Blazor.Buttons.IconPosition.Left">
        </SpeechToTextButtonSettings>
    </SfSpeechToText>
</div>

@code {
    // Button displays: [microphone icon] Listen
}

Right Position

@using Syncfusion.Blazor.Inputs

<div style="padding: 20px;">
    <h3>Icon Right</h3>
    
    <SfSpeechToText>
        <SpeechToTextButtonSettings
            Text="Listen"
            IconCss="e-icons e-microphone"
            IconPosition="Syncfusion.Blazor.Buttons.IconPosition.Right">
        </SpeechToTextButtonSettings>
    </SfSpeechToText>
</div>

@code {
    // Button displays: Listen [microphone icon]
}

Top Position

@using Syncfusion.Blazor.Inputs

<div style="padding: 20px;">
    <h3>Icon Top</h3>
    
    <SfSpeechToText>
        <SpeechToTextButtonSettings
            Text="Listen"
            IconCss="e-icons e-microphone"
            IconPosition="Syncfusion.Blazor.Buttons.IconPosition.Top">
        </SpeechToTextButtonSettings>
    </SfSpeechToText>
</div>

@code {
    // Button displays icon above text (stacked vertically)
}

Bottom Position

@using Syncfusion.Blazor.Inputs

<div style="padding: 20px;">
    <h3>Icon Bottom</h3>
    
    <SfSpeechToText>
        <SpeechToTextButtonSettings
            Text="Listen"
            IconCss="e-icons e-microphone"
            IconPosition="Syncfusion.Blazor.Buttons.IconPosition.Bottom">
        </SpeechToTextButtonSettings>
    </SfSpeechToText>
</div>

@code {
    // Button displays text above icon (stacked vertically)
}

Primary Button Styling

The IsPrimary property applies primary button styling to make the SpeechToText button stand out.

Primary Button Example

@using Syncfusion.Blazor.Inputs

<div style="padding: 20px; display: flex; gap: 20px;">
    <div>
        <h4>Default Button</h4>
        <SfSpeechToText>
            <SpeechToTextButtonSettings
                Text="Listen"
                IconCss="e-icons e-microphone"
                IsPrimary="false">
            </SpeechToTextButtonSettings>
        </SfSpeechToText>
    </div>
    
    <div>
        <h4>Primary Button</h4>
        <SfSpeechToText>
            <SpeechToTextButtonSettings
                Text="Listen"
                IconCss="e-icons e-microphone"
                IsPrimary="true">
            </SpeechToTextButtonSettings>
        </SfSpeechToText>
    </div>
</div>

@code {
    // Primary button has distinct color/styling to draw attention
}

Complete Customization Examples

Example 1: Professional Voice Input Button

@using Syncfusion.Blazor.Inputs

<div style="padding: 20px; max-width: 500px;">
    <h3>Professional Voice Input</h3>
    
    <SfSpeechToText 
        @bind-Transcript="@transcript"
        ShowTooltip="true">
        <SpeechToTextButtonSettings
            Text="🎤 Speak Now"
            StopStateText="⏸️ Recording..."
            IconCss="e-icons e-microphone"
            StopIconCss="e-icons e-stop"
            IconPosition="Syncfusion.Blazor.Buttons.IconPosition.Left"
            IsPrimary="true">
        </SpeechToTextButtonSettings>
        <SpeechToTextTooltipSettings
            Text="Click to start speaking"
            StopStateText="Click to stop recording">
        </SpeechToTextTooltipSettings>
    </SfSpeechToText>
    
    <div style="margin-top: 20px; padding: 10px; border: 1px solid #ddd; border-radius: 4px; min-height: 50px;">
        <strong>Transcript:</strong>
        <p>@transcript</p>
    </div>
</div>

@code {
    private string transcript = "";
}

Example 2: Compact Icon-Only Button

@using Syncfusion.Blazor.Inputs

<div style="padding: 20px;">
    <h3>Compact Icon Button</h3>
    
    <SfSpeechToText 
        @bind-Transcript="@transcript">
        <SpeechToTextButtonSettings
            IconCss="e-icons e-microphone"
            StopIconCss="e-icons e-stop"
            IconPosition="Syncfusion.Blazor.Buttons.IconPosition.Left">
        </SpeechToTextButtonSettings>
    </SfSpeechToText>
    
    <div style="margin-top: 15px;">
        <span>You said: @transcript</span>
    </div>
</div>

@code {
    private string transcript = "";
}

Example 3: Vertical Stack Layout

@using Syncfusion.Blazor.Inputs

<div style="padding: 20px; display: flex; gap: 30px;">
    <div style="text-align: center;">
        <h4>Vertical Icon Top</h4>
        <SfSpeechToText>
            <SpeechToTextButtonSettings
                Text="Record"
                StopStateText="Stop"
                IconCss="e-icons e-microphone"
                StopIconCss="e-icons e-stop"
                IconPosition="Syncfusion.Blazor.Buttons.IconPosition.Top"
                IsPrimary="true">
            </SpeechToTextButtonSettings>
        </SfSpeechToText>
    </div>
    
    <div style="text-align: center;">
        <h4>Vertical Icon Bottom</h4>
        <SfSpeechToText>
            <SpeechToTextButtonSettings
                Text="Record"
                StopStateText="Stop"
                IconCss="e-icons e-microphone"
                StopIconCss="e-icons e-stop"
                IconPosition="Syncfusion.Blazor.Buttons.IconPosition.Bottom">
            </SpeechToTextButtonSettings>
        </SfSpeechToText>
    </div>
</div>

@code {
}

Example 4: Disabled State

@using Syncfusion.Blazor.Inputs

<div style="padding: 20px;">
    <div style="margin-bottom: 20px;">
        <label>
            <input type="checkbox" @onchange="@((ChangeEventArgs e) => isDisabled = (bool)e.Value)" />
            Disable Speech-to-Text
        </label>
    </div>
    
    <SfSpeechToText 
        @bind-Transcript="@transcript"
        Disabled="@isDisabled">
        <SpeechToTextButtonSettings
            Text="🎤 Speak"
            StopStateText="⏹️ Stop"
            IconCss="e-icons e-microphone"
            StopIconCss="e-icons e-stop"
            IsPrimary="true">
        </SpeechToTextButtonSettings>
    </SfSpeechToText>
    
    <div style="margin-top: 15px;">
        <span>Status: @(isDisabled ? "Disabled" : "Enabled")</span>
    </div>
</div>

@code {
    private string transcript = "";
    private bool isDisabled = false;
}

Advanced Patterns

Pattern 1: Conditional Button Styling Based on State

@using Syncfusion.Blazor.Inputs

<div style="padding: 20px;">
    <h3>Conditional Styling</h3>
    
    <SfSpeechToText 
        @bind-Transcript="@transcript"
        ListeningState="@listeningState"
        SpeechRecognitionStarted="@OnListeningStarted"
        SpeechRecognitionStopped="@OnListeningStopped">
        <SpeechToTextButtonSettings
            Text="@(listeningState == SpeechToTextState.Listening ? "🔴 Recording" : "🎤 Record")"
            StopStateText="⏹️ Stop"
            IconCss="e-icons e-microphone"
            StopIconCss="e-icons e-stop"
            IsPrimary="@(listeningState == SpeechToTextState.Listening)">
        </SpeechToTextButtonSettings>
    </SfSpeechToText>
    
    <div style="margin-top: 15px; color: @(listeningState == SpeechToTextState.Listening ? "red" : "green");">
        <strong>State: @listeningState</strong>
    </div>
</div>

@code {
    private string transcript = "";
    private SpeechToTextState listeningState = SpeechToTextState.Inactive;
    
    private void OnListeningStarted(SpeechRecognitionStartedEventArgs args)
    {
        listeningState = args.State;
    }
    
    private void OnListeningStopped(SpeechRecognitionStoppedEventArgs args)
    {
        listeningState = args.State;
    }
}

Pattern 2: Dynamic Icon Classes

@using Syncfusion.Blazor.Inputs

<div style="padding: 20px;">
    <h3>Dynamic Icons</h3>
    
    <div style="margin-bottom: 20px;">
        <label>Select Icon Library:</label>
        <select @onchange="@((ChangeEventArgs e) => selectedLibrary = e.Value?.ToString())" style="padding: 8px;">
            <option value="syncfusion">Syncfusion</option>
            <option value="fontawesome">Font Awesome</option>
            <option value="bootstrap">Bootstrap</option>
        </select>
    </div>
    
    <SfSpeechToText 
        @bind-Transcript="@transcript">
        <SpeechToTextButtonSettings
            Text="Listen"
            IconCss="@GetIconClass()"
            StopStateText="Stop"
            StopIconCss="@GetStopIconClass()"
            IsPrimary="true">
        </SpeechToTextButtonSettings>
    </SfSpeechToText>
</div>

@code {
    private string transcript = "";
    private string selectedLibrary = "syncfusion";
    
    private string GetIconClass()
    {
        return selectedLibrary switch
        {
            "fontawesome" => "fas fa-microphone",
            "bootstrap" => "bi bi-mic",
            _ => "e-icons e-microphone"
        };
    }
    
    private string GetStopIconClass()
    {
        return selectedLibrary switch
        {
            "fontawesome" => "fas fa-stop",
            "bootstrap" => "bi bi-stop",
            _ => "e-icons e-stop"
        };
    }
}

Pattern 3: Multi-Language Button Text

@using Syncfusion.Blazor.Inputs

<div style="padding: 20px;">
    <h3>Multi-Language Support</h3>
    
    <div style="margin-bottom: 20px;">
        <label>Language:</label>
        <select @onchange="@((ChangeEventArgs e) => selectedLanguage = e.Value?.ToString())" style="padding: 8px;">
            <option value="en">English</option>
            <option value="es">Español</option>
            <option value="fr">Français</option>
            <option value="de">Deutsch</option>
        </select>
    </div>
    
    <SfSpeechToText 
        Language="@selectedLanguage"
        @bind-Transcript="@transcript">
        <SpeechToTextButtonSettings
            Text="@GetButtonText()"
            StopStateText="@GetStopButtonText()"
            IconCss="e-icons e-microphone"
            StopIconCss="e-icons e-stop">
        </SpeechToTextButtonSettings>
    </SfSpeechToText>
    
    <div style="margin-top: 15px;">
        <span>Transcript: @transcript</span>
    </div>
</div>

@code {
    private string transcript = "";
    private string selectedLanguage = "en";
    
    private string GetButtonText()
    {
        return selectedLanguage switch
        {
            "es" => "Hablar",
            "fr" => "Parler",
            "de" => "Sprechen",
            _ => "Listen"
        };
    }
    
    private string GetStopButtonText()
    {
        return selectedLanguage switch
        {
            "es" => "Parar",
            "fr" => "Arrêter",
            "de" => "Stoppen",
            _ => "Stop"
        };
    }
}

Key Takeaways

✅ Use `ButtonSettings` to:

• Customize button text for different states
• Add icons from various icon libraries
• Control icon positioning relative to text
• Apply primary styling for emphasis
• Support multiple languages
• Create responsive, user-friendly interfaces

❌ Avoid:

• Using overly long text that might break button layout
• Mixing icon libraries without proper CSS
• Ignoring accessibility (always include text labels)
• Complex icon positioning without testing on different screen sizes

---

Error Handling and Troubleshooting

Table of Contents

• Error Types
• Error Handling Patterns
• User Feedback Mechanisms
• Recovery Strategies
• Debugging

Error Types

The SpeechToText component can encounter various errors during speech recognition. Understanding these helps you handle them appropriately.

no-speech

Cause: The microphone did not detect any speech input.

When it occurs:

• User clicked but didn't speak
• Audio too quiet to detect
• Long silence without vocalization

Error code: "no-speech"

Handling:

private void OnSpeechError(SpeechRecognitionErrorEventArgs args)
{
    if (args.Error == "no-speech")
    {
        errorMessage = "No speech detected. Please speak clearly into your microphone.";
    }
}

aborted

Cause: The speech recognition process was intentionally terminated.

When it occurs:

• User clicked the stop button
• Component unmounted during recording
• Another speech recognition started

Error code: "aborted"

Handling:

private void OnSpeechError(SpeechRecognitionErrorEventArgs args)
{
    if (args.Error == "aborted")
    {
        errorMessage = "Recording was cancelled.";
    }
}

audio-capture

Cause: The system was unable to access a microphone device.

When it occurs:

• No microphone connected
• Microphone drivers missing
• System audio issues

Error code: "audio-capture"

Handling:

private void OnSpeechError(SpeechRecognitionErrorEventArgs args)
{
    if (args.Error == "audio-capture")
    {
        errorMessage = "No microphone found. Please check that your microphone is connected.";
    }
}

not-allowed

Cause: Access to the microphone was denied by the user or browser settings.

When it occurs:

• User clicked "Deny" on permission prompt
• Microphone permission revoked in browser settings
• HTTPS required (HTTP not allowed)

Error code: "not-allowed"

Handling:

private void OnSpeechError(SpeechRecognitionErrorEventArgs args)
{
    if (args.Error == "not-allowed")
    {
        errorMessage = "Microphone access denied. Please allow microphone access in your browser settings.";
    }
}

service-not-allowed

Cause: The current context does not permit the use of the speech recognition service.

When it occurs:

• Running on HTTP instead of HTTPS
• Private browsing mode restrictions
• Sandboxed context

Error code: "service-not-allowed"

Handling:

private void OnSpeechError(SpeechRecognitionErrorEventArgs args)
{
    if (args.Error == "service-not-allowed")
    {
        errorMessage = "Speech recognition service not available in this context. Ensure you're using HTTPS.";
    }
}

network

Cause: A network issue is preventing the speech recognition service from functioning.

When it occurs:

• No internet connection
• Connection timeout
• Server unreachable
• DNS resolution failed

Error code: "network"

Handling:

private void OnSpeechError(SpeechRecognitionErrorEventArgs args)
{
    if (args.Error == "network")
    {
        errorMessage = "Network error. Please check your internet connection and try again.";
    }
}

unsupported-browser

Cause: The browser being used does not support the SpeechRecognition API.

When it occurs:

• Using Firefox (not supported)
• Older browser versions
• IE or very old Edge versions

Error code: "unsupported-browser"

Handling:

private void OnSpeechError(SpeechRecognitionErrorEventArgs args)
{
    if (args.Error == "unsupported-browser")
    {
        errorMessage = "Your browser doesn't support speech recognition. Please use Chrome, Edge, Safari, or Opera.";
    }
}

default

Cause: An unidentified error occurred during the speech recognition process.

When it occurs:

• Unknown system error
• Unexpected condition

Error code: "default"

Handling:

private void OnSpeechError(SpeechRecognitionErrorEventArgs args)
{
    if (args.Error == "default")
    {
        errorMessage = "An unexpected error occurred. Please try again.";
    }
}

Error Handling Patterns

Pattern 1: Simple Error Message Display

@using Syncfusion.Blazor.Inputs

<div style="max-width: 500px;">
    <SfSpeechToText 
        SpeechRecognitionError="@OnSpeechError"
        @bind-Transcript="@transcript">
    </SfSpeechToText>
    
    @if (!string.IsNullOrEmpty(errorMessage))
    {
        <div style="background: #ffebee; color: #c62828; padding: 12px; margin-top: 15px; border-radius: 4px; border-left: 4px solid #c62828;">
            <strong>⚠️ Error:</strong> @errorMessage
        </div>
    }
</div>

@code {
    private string transcript = "";
    private string errorMessage = "";
    
    private void OnSpeechError(SpeechRecognitionErrorEventArgs args)
    {
        errorMessage = args.Error switch
        {
            "no-speech" => "No speech detected. Please try again.",
            "audio-capture" => "No microphone found.",
            "not-allowed" => "Microphone access denied.",
            "network" => "Network error occurred.",
            "unsupported-browser" => "Your browser doesn't support voice input.",
            _ => $"Error: {args.Error}"
        };
    }
}

Pattern 2: Comprehensive Error Handling with Details

@using Syncfusion.Blazor.Inputs

<div style="max-width: 600px;">
    <SfSpeechToText 
        SpeechRecognitionError="@OnSpeechError"
        @bind-Transcript="@transcript">
    </SfSpeechToText>
    
    @if (!string.IsNullOrEmpty(errorMessage))
    {
        <div style="background: #fff3e0; border: 1px solid #ffb74d; border-radius: 4px; padding: 15px; margin-top: 20px;">
            <div style="display: flex; gap: 10px; margin-bottom: 10px;">
                <span style="font-size: 20px;">⚠️</span>
                <div>
                    <strong style="color: #e65100;">@errorTitle</strong>
                    <p style="margin: 5px 0 0 0; color: #666;">@errorMessage</p>
                </div>
            </div>
            
            @if (!string.IsNullOrEmpty(errorSolution))
            {
                <div style="background: #e3f2fd; padding: 10px; border-radius: 4px; margin-top: 10px; font-size: 13px;">
                    <strong>💡 Solution:</strong>
                    <p style="margin: 5px 0 0 0;">@errorSolution</p>
                </div>
            }
            
            <button @onclick="ClearError" style="margin-top: 10px; padding: 8px 12px; background: #ff9800; color: white; border: none; border-radius: 4px; cursor: pointer;">
                Dismiss
            </button>
        </div>
    }
</div>

@code {
    private string transcript = "";
    private string errorMessage = "";
    private string errorTitle = "";
    private string errorSolution = "";
    
    private void OnSpeechError(SpeechRecognitionErrorEventArgs args)
    {
        (errorTitle, errorMessage, errorSolution) = args.Error switch
        {
            "no-speech" => (
                "No Speech Detected",
                "The microphone didn't pick up any speech.",
                "Make sure you're speaking clearly into your microphone and try again."
            ),
            "audio-capture" => (
                "Microphone Not Found",
                "The system couldn't detect a microphone.",
                "Check that your microphone is connected and working properly."
            ),
            "not-allowed" => (
                "Microphone Access Denied",
                "Browser permission for microphone was denied.",
                "Allow microphone access in your browser settings and try again."
            ),
            "network" => (
                "Network Error",
                "Connection issue with speech recognition service.",
                "Check your internet connection and try again."
            ),
            "unsupported-browser" => (
                "Browser Not Supported",
                "Your browser doesn't support speech recognition.",
                "Use Chrome, Edge, Safari, or Opera browser instead."
            ),
            _ => (
                "Unknown Error",
                $"An unexpected error occurred: {args.Error}",
                "Try refreshing the page or using a different browser."
            )
        };
    }
    
    private void ClearError()
    {
        errorMessage = "";
        errorTitle = "";
        errorSolution = "";
    }
}

User Feedback Mechanisms

Feedback with Retry Options

@using Syncfusion.Blazor.Inputs

<div style="max-width: 500px;">
    <SfSpeechToText 
        SpeechRecognitionError="@OnSpeechError"
        @bind-Transcript="@transcript">
    </SfSpeechToText>
    
    @if (!string.IsNullOrEmpty(errorMessage))
    {
        <div style="background: #ffebee; padding: 15px; border-radius: 4px; margin-top: 15px;">
            <p style="margin: 0 0 15px 0;">@errorMessage</p>
            
            <div style="display: flex; gap: 10px;">
                <button @onclick="RetryRecognition" style="padding: 8px 16px; background: #4CAF50; color: white; border: none; border-radius: 4px; cursor: pointer;">
                    🔄 Retry
                </button>
                <button @onclick="ClearError" style="padding: 8px 16px; background: #f44336; color: white; border: none; border-radius: 4px; cursor: pointer;">
                    ✕ Cancel
                </button>
            </div>
        </div>
    }
</div>

@code {
    private string transcript = "";
    private string errorMessage = "";
    private int retryCount = 0;
    
    private void OnSpeechError(SpeechRecognitionErrorEventArgs args)
    {
        retryCount++;
        
        errorMessage = args.Error switch
        {
            "no-speech" => "No speech detected. Please speak clearly.",
            "audio-capture" => "Microphone not detected. Check connections.",
            "not-allowed" => "Allow microphone access in browser settings.",
            _ => $"Error occurred: {args.Error}"
        };
        
        if (retryCount > 3)
        {
            errorMessage += " (Multiple attempts failed. Please check your system.)";
        }
    }
    
    private void RetryRecognition()
    {
        ClearError();
        // Component will retry on next click
    }
    
    private void ClearError()
    {
        errorMessage = "";
        retryCount = 0;
    }
}

Recovery Strategies

Graceful Degradation

@using Syncfusion.Blazor.Inputs

<div style="max-width: 500px;">
    @if (isBrowserSupported)
    {
        <SfSpeechToText 
            SpeechRecognitionError="@OnSpeechError"
            @bind-Transcript="@transcript">
        </SfSpeechToText>
    }
    else
    {
        <div style="background: #fce4ec; padding: 15px; border-radius: 4px; border-left: 4px solid #c2185b;">
            <p style="margin: 0; color: #880e4f;">
                <strong>Speech recognition not supported.</strong><br/>
                Please type your message instead or use a supported browser (Chrome, Edge, Safari).
            </p>
        </div>
    }
    
    <textarea 
        @bind="@transcript" 
        placeholder="Type or speak your message..."
        rows="4"
        style="width: 100%; padding: 10px; margin-top: 10px; border: 1px solid #ddd; border-radius: 4px;">
    </textarea>
</div>

@code {
    private string transcript = "";
    private bool isBrowserSupported = true;
    
    protected override void OnInitialized()
    {
        // Check browser support
        // In real implementation, use JavaScript interop
    }
    
    private void OnSpeechError(SpeechRecognitionErrorEventArgs args)
    {
        if (args.Error == "unsupported-browser")
        {
            isBrowserSupported = false;
        }
    }
}

Fallback UI

@using Syncfusion.Blazor.Inputs

<div style="max-width: 500px;">
    <div style="display: flex; gap: 10px; align-items: center;">
        <SfSpeechToText 
            SpeechRecognitionError="@OnSpeechError"
            @bind-Transcript="@transcript">
        </SfSpeechToText>
        
        <span style="color: #999;">OR</span>
        
        <input 
            type="text" 
            @bind="@manualInput" 
            @onkeyup="@OnManualInput"
            placeholder="Type instead..." 
            style="flex: 1; padding: 8px; border: 1px solid #ddd; border-radius: 4px;" />
    </div>
    
    @if (!string.IsNullOrEmpty(errorMessage))
    {
        <p style="color: #f44336; font-size: 12px; margin-top: 10px;">⚠️ @errorMessage</p>
    }
</div>

@code {
    private string transcript = "";
    private string manualInput = "";
    private string errorMessage = "";
    
    private void OnManualInput(KeyboardEventArgs e)
    {
        transcript = manualInput;
    }
    
    private void OnSpeechError(SpeechRecognitionErrorEventArgs args)
    {
        errorMessage = "Voice input unavailable. Use text input instead.";
    }
}

Debugging

Logging Errors

@using Syncfusion.Blazor.Inputs

<div>
    <SfSpeechToText 
        SpeechRecognitionError="@OnSpeechError"
        @bind-Transcript="@transcript">
    </SfSpeechToText>
    
    @if (debugMode && errors.Any())
    {
        <div style="background: #263238; color: #aed581; padding: 15px; border-radius: 4px; margin-top: 20px; font-family: monospace; font-size: 12px;">
            <strong>Debug Log:</strong>
            <div>
                @foreach (var error in errors)
                {
                    <div>[@error.Timestamp.ToString("HH:mm:ss")] @error.ErrorCode - @error.Message</div>
                }
            </div>
        </div>
    }
</div>

@code {
    private string transcript = "";
    private bool debugMode = false;
    private List<ErrorLog> errors = new();
    
    public class ErrorLog
    {
        public DateTime Timestamp { get; set; }
        public string ErrorCode { get; set; }
        public string Message { get; set; }
    }
    
    private void OnSpeechError(SpeechRecognitionErrorEventArgs args)
    {
        errors.Add(new ErrorLog
        {
            Timestamp = DateTime.Now,
            ErrorCode = args.Error,
            Message = $"Speech recognition error: {args.Error}"
        });
    }
}

Best Practices

1. Always handle errors - Never ignore SpeechRecognitionError events 2. Provide clear feedback - Users need to know what went wrong 3. Offer solutions - Include tips for fixing common errors 4. Implement retry logic - Allow users to try again 5. Have a fallback - Provide text input as alternative 6. Log errors - Track issues for debugging 7. Test on target browsers - Verify behavior in Chrome, Edge, Safari 8. Check permissions - Inform users about microphone access requirements

Getting Started with SpeechToText

This guide covers the essential setup steps to install and use the Syncfusion Blazor SpeechToText component in your project.

Installation

Step 1: Install NuGet Package

The SpeechToText component is part of the Syncfusion.Blazor.Inputs package. Install it via the .NET CLI or Package Manager:

Using .NET CLI:

dotnet add package Syncfusion.Blazor.Inputs

Using Package Manager:

Install-Package Syncfusion.Blazor.Inputs

Step 2: Import Namespaces

Add the required namespaces to your _Imports.razor file:

@using Syncfusion.Blazor
@using Syncfusion.Blazor.Inputs

Step 3: Register Syncfusion Service

In your Program.cs, register the Syncfusion Blazor service:

builder.Services.AddSyncfusionBlazor();

Step 4: Add Theme and Scripts

In your App.razor or main layout file, include the Syncfusion theme and core scripts:

<!-- Add this in the <head> section -->
<link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />

<!-- Add this before the closing </body> tag -->
<script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js"></script>

Available Themes:

• bootstrap5.css (recommended)
• material.css
• fluent.css
• tailwind.css
• fabric.css

Basic Implementation

Here's a minimal example to display the SpeechToText component:

@using Syncfusion.Blazor.Inputs

<SfSpeechToText></SfSpeechToText>

@code {
    // Component renders with default settings
}

This renders a microphone button that users can click to start voice input.

Binding Transcript

To capture and display the transcribed text, use two-way binding with the Transcript property:

@using Syncfusion.Blazor.Inputs

<div style="display: flex; gap: 20px;">
    <div>
        <h4>Voice Input</h4>
        <SfSpeechToText @bind-Transcript="@speechText"></SfSpeechToText>
    </div>
    
    <div>
        <h4>Transcribed Text</h4>
        <p>@speechText</p>
    </div>
</div>

@code {
    private string speechText = "";
}

What happens: 1. User clicks the microphone button 2. Component captures audio and transcribes speech 3. speechText variable updates automatically 4. Transcribed text displays in the <p> tag

Integration with TextArea

A common pattern is to display the transcript in a SfTextArea for editing:

@using Syncfusion.Blazor.Inputs

<div style="display: flex; flex-direction: column; gap: 20px; align-items: center;">
    <h3>Speech to Text Converter</h3>
    
    <SfSpeechToText @bind-Transcript="@transcript"></SfSpeechToText>
    
    <SfTextArea 
        RowCount="5" 
        ColumnCount="50" 
        @bind-Value="@transcript" 
        ResizeMode="Resize.None" 
        Placeholder="Transcribed text will appear here...">
    </SfTextArea>
    
    <button @onclick="ClearTranscript" style="padding: 10px 20px; background: #f44336; color: white; border: none; border-radius: 4px; cursor: pointer;">
        Clear
    </button>
</div>

@code {
    private string transcript = "";
    
    private void ClearTranscript()
    {
        transcript = "";
    }
}

Benefits of this pattern:

• User can speak to populate the text area
• Text is editable for corrections
• Both controls stay synchronized
• Clear button resets everything

Styling and CSS

By default, SpeechToText integrates with your Syncfusion theme. To customize appearance, apply CSS classes:

<style>
    .custom-speech-container {
        display: flex;
        flex-direction: column;
        gap: 15px;
        padding: 20px;
        border: 1px solid #ddd;
        border-radius: 8px;
        max-width: 500px;
    }
    
    .custom-speech-container h3 {
        margin: 0 0 10px 0;
        color: #333;
    }
</style>

<div class="custom-speech-container">
    <h3>Voice Input Form</h3>
    <SfSpeechToText @bind-Transcript="@transcript"></SfSpeechToText>
    <p>Your text: @transcript</p>
</div>

@code {
    private string transcript = "";
}

Checking Browser Support

Before implementing, consider checking browser compatibility. The component uses the Web Speech API, which is not supported in all browsers:

@code {
    private bool isSupported = true;

    protected override void OnInitialized()
    {
        // Note: In production, you'd typically check this client-side
        // For now, we proceed assuming support. See browser-support.md for details.
    }
}

Common Properties

Next Steps

• Read Transcript and Language to learn about language support
• Explore Listening States for state management
• Check Error Handling for production-ready code
• Review Browser Support to ensure compatibility

Interim Results and Configuration Options

Table of Contents

• AllowInterimResults Property
• ShowTooltip Property
• Disabled State
• HTML Attributes
• Configuration Combinations
• Advanced Customization

AllowInterimResults Property

The AllowInterimResults property controls whether the component shows intermediate recognition results as the user speaks.

What Are Interim Results?

With AllowInterimResults="true":

• Transcript updates in real time while user speaks
• Shows partial, incomplete text
• Useful for live feedback and interactive applications
• More responsive user experience

With AllowInterimResults="false":

• Only final results are shown
• Waits until speech recognition completes
• Provides clean, complete transcripts
• Better for forms that expect final text

Real-Time Interim Results Example

@using Syncfusion.Blazor.Inputs

<div style="max-width: 600px; margin: 20px auto;">
    <h3>Live Transcription</h3>
    
    <div style="background: #f5f5f5; padding: 15px; border-radius: 4px; margin-bottom: 20px;">
        <p style="margin: 0; color: #666;">Real-time transcript as you speak:</p>
        <p style="font-size: 18px; margin: 10px 0 0 0;">@transcript</p>
    </div>
    
    <SfSpeechToText 
        AllowInterimResults="true"
        @bind-Transcript="@transcript">
    </SfSpeechToText>
</div>

@code {
    private string transcript = "";
}

Result: Text appears character by character as the user speaks.

Final Results Only Example

@using Syncfusion.Blazor.Inputs

<div style="max-width: 600px; margin: 20px auto;">
    <h3>Final Transcription</h3>
    
    <div style="background: #e8f5e9; padding: 15px; border-radius: 4px; margin-bottom: 20px;">
        <p style="margin: 0; color: #666;">Final transcript (appears after you stop speaking):</p>
        <p style="font-size: 18px; margin: 10px 0 0 0;">@transcript</p>
    </div>
    
    <SfSpeechToText 
        AllowInterimResults="false"
        @bind-Transcript="@transcript">
    </SfSpeechToText>
    
    @if (string.IsNullOrEmpty(transcript))
    {
        <p style="color: #999; margin-top: 10px; font-size: 12px;">Result will appear after you finish speaking.</p>
    }
</div>

@code {
    private string transcript = "";
}

Result: Text only appears after the user stops speaking.

Comparison Table

ShowTooltip Property

The ShowTooltip property controls whether a tooltip appears when hovering over the microphone button.

Tooltip Enabled (Default)

@using Syncfusion.Blazor.Inputs

<SfSpeechToText ShowTooltip="true" @bind-Transcript="@transcript"></SfSpeechToText>
<p>Hover over the microphone button to see the tooltip.</p>

@code {
    private string transcript = "";
}

Tooltip text: "Click to start recording" (default behavior)

Tooltip Disabled

@using Syncfusion.Blazor.Inputs

<SfSpeechToText ShowTooltip="false" @bind-Transcript="@transcript"></SfSpeechToText>
<p>No tooltip appears on hover.</p>

@code {
    private string transcript = "";
}

Use case: When you have explicit instructions or want minimal UI clutter.

Conditional Tooltip

@using Syncfusion.Blazor.Inputs

<div style="margin-bottom: 20px;">
    <label>
        <input type="checkbox" @onchange="@((ChangeEventArgs e) => showTooltip = (bool)e.Value)" />
        Show tooltip on hover
    </label>
</div>

<SfSpeechToText ShowTooltip="@showTooltip" @bind-Transcript="@transcript"></SfSpeechToText>

@code {
    private string transcript = "";
    private bool showTooltip = true;
}

Disabled State

The Disabled property prevents user interaction when set to true.

Basic Disabled Example

@using Syncfusion.Blazor.Inputs

<SfSpeechToText Disabled="true" @bind-Transcript="@transcript"></SfSpeechToText>
<p>The microphone button is disabled and cannot be clicked.</p>

@code {
    private string transcript = "";
}

Conditional Disabled State

Disable based on conditions like loading, permissions, or validation:

@using Syncfusion.Blazor.Inputs

<div style="padding: 20px;">
    <div style="margin-bottom: 20px;">
        <label>
            <input type="checkbox" @onchange="@((ChangeEventArgs e) => isProcessing = (bool)e.Value)" />
            Simulate processing (disables speech input)
        </label>
    </div>
    
    <SfSpeechToText 
        Disabled="@isProcessing" 
        @bind-Transcript="@transcript"
        style="@(isProcessing ? "opacity: 0.5;" : "")">
    </SfSpeechToText>
    
    @if (isProcessing)
    {
        <p style="color: #FF9800; margin-top: 10px;">⏳ Processing... Please wait.</p>
    }
    
    @if (!string.IsNullOrEmpty(transcript))
    {
        <p style="margin-top: 20px; padding: 10px; background: #e3f2fd; border-radius: 4px;">
            Transcript: @transcript
        </p>
    }
</div>

@code {
    private string transcript = "";
    private bool isProcessing = false;
}

Disable When Conditions Met

@using Syncfusion.Blazor.Inputs

<div style="max-width: 500px;">
    <div style="margin-bottom: 20px;">
        <input 
            type="text" 
            @bind="@characterLimit" 
            placeholder="Max characters allowed"
            style="padding: 8px; width: 100%;" />
        <small>Current: @transcript.Length / @characterLimit</small>
    </div>
    
    <SfSpeechToText 
        Disabled="@(transcript.Length >= int.Parse(characterLimit))"
        @bind-Transcript="@transcript"
        style="@(transcript.Length >= int.Parse(characterLimit) ? "opacity: 0.5;" : "")">
    </SfSpeechToText>
    
    @if (transcript.Length >= int.Parse(characterLimit))
    {
        <p style="color: #f44336; margin-top: 10px;">Character limit reached.</p>
    }
</div>

@code {
    private string transcript = "";
    private string characterLimit = "500";
}

HTML Attributes

The HtmlAttributes property allows you to add custom HTML attributes to the microphone button element.

Adding CSS Classes

@using Syncfusion.Blazor.Inputs

<style>
    .custom-mic-button {
        background-color: #2196F3 !important;
        padding: 10px 20px !important;
    }
    
    .custom-mic-button:hover {
        background-color: #1976D2 !important;
    }
</style>

<SfSpeechToText 
    @bind-Transcript="@transcript"
    HtmlAttributes="@(new Dictionary<string, object> { { "class", "custom-mic-button" } })">
</SfSpeechToText>

@code {
    private string transcript = "";
}

Adding ARIA Attributes for Accessibility

@using Syncfusion.Blazor.Inputs

<SfSpeechToText 
    @bind-Transcript="@transcript"
    HtmlAttributes="@htmlAttrs">
</SfSpeechToText>

@code {
    private string transcript = "";
    
    private Dictionary<string, object> htmlAttrs = new()
    {
        { "aria-label", "Microphone button for voice input" },
        { "aria-describedby", "mic-help-text" },
        { "role", "button" }
    };
}

Adding Data Attributes

@using Syncfusion.Blazor.Inputs

<SfSpeechToText 
    @bind-Transcript="@transcript"
    HtmlAttributes="@(new Dictionary<string, object> 
    { 
        { "data-testid", "voice-input-microphone" },
        { "data-component", "speech-to-text" }
    })">
</SfSpeechToText>

@code {
    private string transcript = "";
}

Configuration Combinations

Combination 1: Strict Data Entry

• Disable interim results for clean data
• Show tooltip for guidance
• Enable by default

@using Syncfusion.Blazor.Inputs

<SfSpeechToText 
    AllowInterimResults="false"
    ShowTooltip="true"
    Disabled="false"
    @bind-Transcript="@transcript">
</SfSpeechToText>

@code {
    private string transcript = "";
}

Combination 2: Real-Time Communication

• Enable interim results for live feedback
• Hide tooltip for minimal UI
• Allow disable during processing

@using Syncfusion.Blazor.Inputs

<SfSpeechToText 
    AllowInterimResults="true"
    ShowTooltip="false"
    Disabled="@isProcessing"
    @bind-Transcript="@transcript">
</SfSpeechToText>

@code {
    private string transcript = "";
    private bool isProcessing = false;
}

Combination 3: Accessibility Focused

• Show tooltip for guidance
• Final results for clarity
• Custom ARIA attributes

@using Syncfusion.Blazor.Inputs

<SfSpeechToText 
    AllowInterimResults="false"
    ShowTooltip="true"
    @bind-Transcript="@transcript"
    HtmlAttributes="@(new Dictionary<string, object> 
    { 
        { "aria-label", "Voice input microphone button" },
        { "aria-live", "polite" }
    })">
</SfSpeechToText>

@code {
    private string transcript = "";
}

Advanced Customization

Create a Wrapper Component

<!-- VoiceInput.razor -->
@using Syncfusion.Blazor.Inputs

<div class="voice-input-wrapper" style="@WrapperStyle">
    <div class="voice-input-header">
        <h4>@Label</h4>
        @if (ShowHint)
        {
            <small style="color: #666;">@Hint</small>
        }
    </div>
    
    <SfSpeechToText 
        AllowInterimResults="@AllowInterim"
        ShowTooltip="@ShowTooltip"
        Disabled="@Disabled"
        Language="@Language"
        @bind-Transcript="@Transcript">
    </SfSpeechToText>
    
    @if (ShowCharCount)
    {
        <small style="color: #999;">@Transcript.Length characters</small>
    }
</div>

@code {
    [Parameter]
    public string Label { get; set; } = "Voice Input";
    
    [Parameter]
    public string Hint { get; set; } = "";
    
    [Parameter]
    public bool ShowHint { get; set; } = true;
    
    [Parameter]
    public bool AllowInterim { get; set; } = true;
    
    [Parameter]
    public bool ShowTooltip { get; set; } = true;
    
    [Parameter]
    public bool Disabled { get; set; } = false;
    
    [Parameter]
    public bool ShowCharCount { get; set; } = false;
    
    [Parameter]
    public string Language { get; set; } = "en-US";
    
    [Parameter]
    public string Transcript { get; set; } = "";
    
    [Parameter]
    public EventCallback<string> TranscriptChanged { get; set; }
    
    [Parameter]
    public string WrapperStyle { get; set; } = "padding: 15px; border: 1px solid #ddd; border-radius: 4px;";
}

Usage:

<VoiceInput 
    Label="Customer Feedback"
    Hint="Speak your feedback clearly"
    AllowInterim="false"
    Language="en-US"
    @bind-Transcript="@feedback">
</VoiceInput>

Best Practices

1. Choose AllowInterimResults based on use case:

• true for chat, real-time feedback
• false for forms, data entry

2. Provide visual feedback:

• Use tooltips or help text
• Show character limits
• Indicate disabled state

3. Consider accessibility:

• Add ARIA labels
• Use semantic HTML attributes
• Test with screen readers

4. Disable appropriately:

• When processing results
• When form is submitted
• When permissions are missing

5. Customize responsibly:

• Maintain usability with styling
• Keep button recognizable
• Ensure sufficient contrast

Listening States and Status Management

Table of Contents

• Understanding Listening States
• State Values
• Managing State
• Event Handling
• Visual Feedback
• State-Based UI Patterns

Understanding Listening States

The ListeningState property represents the current state of the speech recognition process. This allows you to:

• Provide visual feedback to users
• Disable/enable form fields based on listening status
• Track when recording starts and stops
• Implement conditional logic based on state

State Values

The SpeechToTextState enum has three values:

1. Inactive (Default)

The component is idle with no active speech recognition.

Characteristics:

• Initial state when the component loads
• No audio is being captured
• User can click to start listening
• Button appears ready/enabled

Use case: Show a default icon or "Click to speak" message

@if (listeningState == SpeechToTextState.Inactive)
{
    <span style="color: gray; font-weight: bold;">○ Ready to speak</span>
}

2. Listening

The component is actively capturing audio and transcribing speech in real time.

Characteristics:

• User clicked the microphone button
• Audio is being captured from the microphone
• Interim results are displayed (if enabled)
• Visual indicator shows active recording
• A stop icon appears to allow cancellation

Use case: Show a "Recording..." message or animated icon

@if (listeningState == SpeechToTextState.Listening)
{
    <span style="color: #4CAF50; font-weight: bold;">🎤 Listening...</span>
}

3. Stopped

Speech recognition has ended, and no further audio is being processed.

Characteristics:

• Speech recognition completed
• Final transcript is ready
• User may have clicked stop or stopped speaking
• Component returns to idle after this state
• May move back to Inactive automatically

Use case: Show a "Processing complete" message

@if (listeningState == SpeechToTextState.Stopped)
{
    <span style="color: #FF9800; font-weight: bold;">⏸ Stopped</span>
}

Managing State

Binding ListeningState

To track the listening state, bind the ListeningState property:

@using Syncfusion.Blazor.Inputs

<SfSpeechToText ListeningState="@listeningState" @bind-Transcript="@transcript"></SfSpeechToText>

<p>Current state: @listeningState</p>

@code {
    private SpeechToTextState listeningState = SpeechToTextState.Inactive;
    private string transcript = "";
}

State Transitions

Understanding how states transition helps you predict behavior:

Inactive → (user clicks) → Listening → (speech ends or user clicks stop) → Stopped → (automatic) → Inactive

Event Handling

Use event callbacks to react when state changes:

SpeechRecognitionStarted Event

Fires when listening begins:

@using Syncfusion.Blazor.Inputs

<SfSpeechToText 
    SpeechRecognitionStarted="@OnListeningStarted"
    @bind-Transcript="@transcript">
</SfSpeechToText>

@code {
    private string transcript = "";
    
    private void OnListeningStarted(SpeechRecognitionStartedEventArgs args)
    {
        Console.WriteLine($"Listening started. State: {args.State}");
        // Disable form fields, show recording indicator, etc.
    }
}

SpeechRecognitionStopped Event

Fires when listening ends:

@using Syncfusion.Blazor.Inputs

<SfSpeechToText 
    SpeechRecognitionStopped="@OnListeningStopped"
    @bind-Transcript="@transcript">
</SfSpeechToText>

@code {
    private string transcript = "";
    
    private void OnListeningStopped(SpeechRecognitionStoppedEventArgs args)
    {
        Console.WriteLine($"Listening stopped. State: {args.State}");
        // Re-enable form fields, hide recording indicator, etc.
    }
}

Complete Event Handling Example

@using Syncfusion.Blazor.Inputs

<div style="padding: 20px; max-width: 500px;">
    <h3>Voice Recording with State Tracking</h3>
    
    <div style="margin-bottom: 20px; padding: 15px; background: #f5f5f5; border-radius: 4px;">
        <strong>State:</strong> @listeningState
        <br />
        <strong>Status:</strong> @GetStatusMessage()
    </div>
    
    <SfSpeechToText 
        ListeningState="@listeningState"
        SpeechRecognitionStarted="@OnListeningStarted"
        SpeechRecognitionStopped="@OnListeningStopped"
        @bind-Transcript="@transcript">
    </SfSpeechToText>
    
    @if (!string.IsNullOrEmpty(transcript))
    {
        <div style="margin-top: 20px; padding: 15px; background: #e3f2fd; border-radius: 4px;">
            <strong>Transcript:</strong>
            <p>@transcript</p>
        </div>
    }
</div>

@code {
    private SpeechToTextState listeningState = SpeechToTextState.Inactive;
    private string transcript = "";
    
    private void OnListeningStarted(SpeechRecognitionStartedEventArgs args)
    {
        listeningState = args.State;
    }
    
    private void OnListeningStopped(SpeechRecognitionStoppedEventArgs args)
    {
        listeningState = args.State;
    }
    
    private string GetStatusMessage()
    {
        return listeningState switch
        {
            SpeechToTextState.Listening => "Recording audio...",
            SpeechToTextState.Stopped => "Processing speech...",
            _ => "Ready to record"
        };
    }
}

Visual Feedback

Provide clear visual indicators of the listening state:

Status Indicator with Colors

@using Syncfusion.Blazor.Inputs

<div>
    <div style="margin-bottom: 20px; padding: 15px; border-radius: 4px; @GetStatusStyle()">
        <strong>@GetStatusEmoji() @GetStatusText()</strong>
    </div>
    
    <SfSpeechToText 
        ListeningState="@listeningState"
        SpeechRecognitionStarted="@(args => listeningState = args.State)"
        SpeechRecognitionStopped="@(args => listeningState = args.State)"
        @bind-Transcript="@transcript">
    </SfSpeechToText>
</div>

@code {
    private SpeechToTextState listeningState = SpeechToTextState.Inactive;
    private string transcript = "";
    
    private string GetStatusStyle()
    {
        return listeningState switch
        {
            SpeechToTextState.Listening => "background: #d1e7dd; color: #0f5132;",
            SpeechToTextState.Stopped => "background: #f8d7da; color: #842029;",
            _ => "background: #e2e3e5; color: #6c757d;"
        };
    }
    
    private string GetStatusText()
    {
        return listeningState switch
        {
            SpeechToTextState.Listening => "Recording in progress",
            SpeechToTextState.Stopped => "Speech recognized, processing...",
            _ => "Click microphone to start"
        };
    }
    
    private string GetStatusEmoji()
    {
        return listeningState switch
        {
            SpeechToTextState.Listening => "🔴",
            SpeechToTextState.Stopped => "⏹",
            _ => "⭕"
        };
    }
}

Waveform Animation

Show a visual representation of active listening:

@using Syncfusion.Blazor.Inputs

<style>
    .waveform {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 40px;
        gap: 5px;
        margin: 20px 0;
    }

    .waveform span {
        display: block;
        width: 6px;
        height: 20px;
        background: #28a745;
        animation: wave-animation 1.2s infinite ease-in-out;
    }

    .waveform span:nth-child(1) { animation-delay: 0s; }
    .waveform span:nth-child(2) { animation-delay: 0.2s; }
    .waveform span:nth-child(3) { animation-delay: 0.4s; }
    .waveform span:nth-child(4) { animation-delay: 0.6s; }
    .waveform span:nth-child(5) { animation-delay: 0.8s; }

    @@keyframes wave-animation {
        0%, 100% {
            height: 10px;
        }
        50% {
            height: 30px;
        }
    }
</style>

<div style="text-align: center;">
    <SfSpeechToText 
        ListeningState="@listeningState"
        SpeechRecognitionStarted="@(args => listeningState = args.State)"
        SpeechRecognitionStopped="@(args => listeningState = args.State)"
        @bind-Transcript="@transcript">
    </SfSpeechToText>

    @if (listeningState == SpeechToTextState.Listening)
    {
        <div class="waveform">
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </div>
        <p style="color: #28a745; font-weight: bold;">Listening... Speak now!</p>
    }
    else if (listeningState == SpeechToTextState.Stopped)
    {
        <p style="color: #FF9800;">Processing...</p>
    }
</div>

@code {
    private SpeechToTextState listeningState = SpeechToTextState.Inactive;
    private string transcript = "";
}

State-Based UI Patterns

Pattern 1: Disable Form During Recording

Prevent user from modifying data while recording:

@using Syncfusion.Blazor.Inputs

<div style="max-width: 500px;">
    <SfSpeechToText 
        ListeningState="@listeningState"
        SpeechRecognitionStarted="@(args => listeningState = args.State)"
        SpeechRecognitionStopped="@(args => listeningState = args.State)"
        @bind-Transcript="@transcript">
    </SfSpeechToText>
    
    <div style="margin-top: 20px;">
        <input 
            type="text" 
            @bind="@name" 
            placeholder="Name"
            disabled="@(listeningState == SpeechToTextState.Listening)"
            style="width: 100%; padding: 8px; opacity: @(listeningState == SpeechToTextState.Listening ? 0.5 : 1);" />
        
        <textarea 
            @bind="@transcript" 
            placeholder="Transcript"
            disabled="@(listeningState == SpeechToTextState.Listening)"
            rows="4"
            style="width: 100%; padding: 8px; margin-top: 10px; opacity: @(listeningState == SpeechToTextState.Listening ? 0.5 : 1);"></textarea>
    </div>
</div>

@code {
    private SpeechToTextState listeningState = SpeechToTextState.Inactive;
    private string transcript = "";
    private string name = "";
}

Pattern 2: Show Different UI Based on State

@using Syncfusion.Blazor.Inputs

<div style="padding: 20px;">
    <SfSpeechToText 
        ListeningState="@listeningState"
        SpeechRecognitionStarted="@(args => listeningState = args.State)"
        SpeechRecognitionStopped="@(args => listeningState = args.State)"
        @bind-Transcript="@transcript">
    </SfSpeechToText>

    @if (listeningState == SpeechToTextState.Inactive)
    {
        <p style="color: #666; margin-top: 20px;">Click the microphone to start recording your message.</p>
    }
    else if (listeningState == SpeechToTextState.Listening)
    {
        <div style="background: #d1e7dd; padding: 15px; border-radius: 4px; margin-top: 20px;">
            <p style="margin: 0; color: #0f5132; font-weight: bold;">🎤 Recording... Please speak clearly.</p>
        </div>
    }
    else if (listeningState == SpeechToTextState.Stopped)
    {
        <div style="background: #fff3cd; padding: 15px; border-radius: 4px; margin-top: 20px;">
            <p style="margin: 0; color: #856404; font-weight: bold;">⏹ Processed. Review your message below.</p>
        </div>
        <div style="background: #e3f2fd; padding: 15px; border-radius: 4px; margin-top: 10px;">
            <p>@transcript</p>
        </div>
    }
</div>

@code {
    private SpeechToTextState listeningState = SpeechToTextState.Inactive;
    private string transcript = "";
}

Best Practices

1. Always initialize state - Start with Inactive to ensure predictable behavior 2. Provide visual feedback - Show users what state the component is in 3. Update UI based on state - Disable/enable controls appropriately 4. Handle all state transitions - Plan for Inactive → Listening → Stopped cycles 5. Consider accessibility - Announce state changes for screen reader users

Public Methods

Overview

The SpeechToText component provides two public methods to control speech recognition functionality.

---

📋 Public Methods

1. StartListeningAsync()

Signature:

public Task StartListeningAsync()

Description: Starts the speech recognition process. Once called, the component begins listening for audio input from the user's microphone.

Returns: Task - A task that completes when the listening has started

Usage:

@using Syncfusion.Blazor.Inputs

<SfSpeechToText @ref="speechComponent"></SfSpeechToText>

<button @onclick="StartListening">Start Listening</button>

@code {
    private SfSpeechToText speechComponent;
    
    private async Task StartListening()
    {
        await speechComponent.StartListeningAsync();
    }
}

Example with Button Integration:

@using Syncfusion.Blazor.Inputs

<SfSpeechToText @ref="speechComponent" @bind-Transcript="@transcript"></SfSpeechToText>

<button @onclick="async () => await speechComponent.StartListeningAsync()" 
        style="padding: 10px 20px; background: #007bff; color: white; border: none; border-radius: 4px; cursor: pointer;">
    🎤 Start Listening
</button>

<p>@transcript</p>

@code {
    private SfSpeechToText speechComponent;
    private string transcript = "";
}

Exception Handling:

@using Syncfusion.Blazor.Inputs

<SfSpeechToText @ref="speechComponent"></SfSpeechToText>

<button @onclick="SafeStartListening">Start with Error Handling</button>

@code {
    private SfSpeechToText speechComponent;
    private string errorMessage = "";
    
    private async Task SafeStartListening()
    {
        try
        {
            await speechComponent.StartListeningAsync();
            errorMessage = "";
        }
        catch (Exception ex)
        {
            errorMessage = $"Failed to start listening: {ex.Message}";
        }
    }
}

---

2. StopListeningAsync()

Signature:

public Task StopListeningAsync()

Description: Stops the speech recognition process. The component will stop listening for audio input and finalize the transcription.

Returns: Task - A task that completes when listening has stopped

Usage:

@using Syncfusion.Blazor.Inputs

<SfSpeechToText @ref="speechComponent"></SfSpeechToText>

<button @onclick="StopListening">Stop Listening</button>

@code {
    private SfSpeechToText speechComponent;
    
    private async Task StopListening()
    {
        await speechComponent.StopListeningAsync();
    }
}

Example with Button Integration:

@using Syncfusion.Blazor.Inputs

<SfSpeechToText @ref="speechComponent" @bind-Transcript="@transcript"></SfSpeechToText>

<button @onclick="async () => await speechComponent.StopListeningAsync()" 
        style="padding: 10px 20px; background: #dc3545; color: white; border: none; border-radius: 4px; cursor: pointer;">
    ⏹️ Stop Listening
</button>

<p>Final Transcript: @transcript</p>

@code {
    private SfSpeechToText speechComponent;
    private string transcript = "";
}

Exception Handling:

@using Syncfusion.Blazor.Inputs

<SfSpeechToText @ref="speechComponent"></SfSpeechToText>

<button @onclick="SafeStopListening">Stop with Error Handling</button>

@code {
    private SfSpeechToText speechComponent;
    private string errorMessage = "";
    
    private async Task SafeStopListening()
    {
        try
        {
            await speechComponent.StopListeningAsync();
            errorMessage = "";
        }
        catch (Exception ex)
        {
            errorMessage = $"Failed to stop listening: {ex.Message}";
        }
    }
}

---

🎯 Complete Example: Start and Stop

@using Syncfusion.Blazor.Inputs

<div style="padding: 20px;">
    <h3>Speech Recognition Control</h3>
    
    <SfSpeechToText 
        @ref="speechComponent"
        @bind-Transcript="@transcript"
        ListeningState="@listeningState"
        SpeechRecognitionStarted="@OnStarted"
        SpeechRecognitionStopped="@OnStopped"
        SpeechRecognitionError="@OnError">
    </SfSpeechToText>
    
    <div style="margin-top: 20px;">
        <button @onclick="HandleStart" 
                disabled="@(listeningState == SpeechToTextState.Listening)"
                style="padding: 10px 20px; margin-right: 10px; background: #28a745; color: white; border: none; border-radius: 4px; cursor: pointer;">
            🎤 Start Listening
        </button>
        
        <button @onclick="HandleStop" 
                disabled="@(listeningState != SpeechToTextState.Listening)"
                style="padding: 10px 20px; background: #dc3545; color: white; border: none; border-radius: 4px; cursor: pointer;">
            ⏹️ Stop Listening
        </button>
    </div>
    
    <div style="margin-top: 20px;">
        <strong>Status:</strong> @GetStatusText()
    </div>
    
    <div style="margin-top: 20px; padding: 15px; background: #f5f5f5; border-radius: 4px;">
        <strong>Transcript:</strong>
        <p>@transcript</p>
    </div>
    
    @if (!string.IsNullOrEmpty(errorMessage))
    {
        <div style="margin-top: 20px; padding: 15px; background: #f8d7da; border: 1px solid #f5c6cb; border-radius: 4px; color: #721c24;">
            <strong>Error:</strong> @errorMessage
        </div>
    }
</div>

@code {
    private SfSpeechToText speechComponent;
    private string transcript = "";
    private SpeechToTextState listeningState = SpeechToTextState.Stopped;
    private string errorMessage = "";
    
    private async Task HandleStart()
    {
        try
        {
            errorMessage = "";
            await speechComponent.StartListeningAsync();
        }
        catch (Exception ex)
        {
            errorMessage = $"Failed to start: {ex.Message}";
        }
    }
    
    private async Task HandleStop()
    {
        try
        {
            errorMessage = "";
            await speechComponent.StopListeningAsync();
        }
        catch (Exception ex)
        {
            errorMessage = $"Failed to stop: {ex.Message}";
        }
    }
    
    private void OnStarted(SpeechRecognitionStartedEventArgs args)
    {
        listeningState = SpeechToTextState.Listening;
        Console.WriteLine("Speech recognition started");
    }
    
    private void OnStopped(SpeechRecognitionStoppedEventArgs args)
    {
        listeningState = SpeechToTextState.Stopped;
        Console.WriteLine("Speech recognition stopped");
    }
    
    private void OnError(SpeechRecognitionErrorEventArgs args)
    {
        errorMessage = args.ErrorMessage;
        listeningState = SpeechToTextState.Stopped;
    }
    
    private string GetStatusText() => listeningState switch
    {
        SpeechToTextState.Listening => "🎤 Listening...",
        SpeechToTextState.Stopped => "⏹️ Stopped",
        _ => "Unknown"
    };
}

---

⚠️ Best Practices

✅ DO

• Call StartListeningAsync() when ready to capture speech
• Call StopListeningAsync() to finalize transcription
• Await the async methods properly
• Handle potential exceptions
• Disable buttons appropriately based on listening state

❌ DON'T

• Call both methods simultaneously
• Forget to check listening state before calling methods
• Ignore error handling
• Call StartListeningAsync() twice without stopping first
• Assume the microphone is always available

---

🔗 Related Topics

• Getting Started
• Listening States
• Error Handling
• Events

---

Last Updated: March 24, 2026 Component: Syncfusion Blazor SpeechToText Namespace: Syncfusion.Blazor.Inputs

Tooltip Configuration

Table of Contents

• TooltipSettings Overview
• Tooltip Text Configuration
• Tooltip Position
• Enabling and Disabling Tooltips
• Position Reference Guide
• Complete Examples
• Best Practices

TooltipSettings Overview

The TooltipSettings property in SfSpeechToText allows you to customize the tooltip displayed when hovering over the microphone button. Tooltips provide helpful guidance to users and can be positioned in various locations around the button.

Key Properties

ShowTooltip Control

The main component has a ShowTooltip property that enables/disables tooltips globally:

<SfSpeechToText ShowTooltip="true">  <!-- Enables tooltips -->
</SfSpeechToText>

<SfSpeechToText ShowTooltip="false"> <!-- Disables tooltips -->
</SfSpeechToText>

Tooltip Text Configuration

Basic Tooltip Text

@using Syncfusion.Blazor.Inputs

<div style="padding: 20px;">
    <h3>Custom Tooltip Text</h3>
    
    <SfSpeechToText ShowTooltip="true">
        <SpeechToTextTooltipSettings
            Text="Click here to start recording your voice"
            StopStateText="Click to stop the recording">
        </SpeechToTextTooltipSettings>
    </SfSpeechToText>
</div>

@code {
    // Hovering shows: "Click here to start recording your voice"
    // While listening shows: "Click to stop the recording"
}

Multi-Language Tooltips

@using Syncfusion.Blazor.Inputs

<div style="padding: 20px;">
    <h3>Multi-Language Tooltips</h3>
    
    <div style="margin-bottom: 20px;">
        <label>Language:</label>
        <select @onchange="@((ChangeEventArgs e) => language = e.Value?.ToString())" style="padding: 8px;">
            <option value="en">English</option>
            <option value="es">Español</option>
            <option value="fr">Français</option>
        </select>
    </div>
    
    <SfSpeechToText Language="@language" ShowTooltip="true">
        <SpeechToTextTooltipSettings
            Text="@GetTooltipText()"
            StopStateText="@GetStopTooltipText()">
        </SpeechToTextTooltipSettings>
    </SfSpeechToText>
</div>

@code {
    private string language = "en";
    
    private string GetTooltipText()
    {
        return language switch
        {
            "es" => "Haz clic para grabar tu voz",
            "fr" => "Cliquez pour enregistrer votre voix",
            _ => "Click to record your voice"
        };
    }
    
    private string GetStopTooltipText()
    {
        return language switch
        {
            "es" => "Haz clic para detener la grabación",
            "fr" => "Cliquez pour arrêter l'enregistrement",
            _ => "Click to stop recording"
        };
    }
}

Emoji and Special Characters in Tooltips

@using Syncfusion.Blazor.Inputs

<div style="padding: 20px;">
    <h3>Rich Tooltip Text</h3>
    
    <SfSpeechToText ShowTooltip="true">
        <SpeechToTextTooltipSettings
            Text="🎤 Click to start recording"
            StopStateText="⏹️ Click to stop recording">
        </SpeechToTextTooltipSettings>
    </SfSpeechToText>
</div>

@code {
    // Emojis can be used to provide visual context
}

Tooltip Position

The Position property controls where the tooltip appears relative to the microphone button.

Position Values Reference

Top Positions

@using Syncfusion.Blazor.Inputs

<div style="padding: 40px; display: flex; gap: 30px; justify-content: flex-start;">
    <div>
        <h4>Top-Left</h4>
        <SfSpeechToText ShowTooltip="true">
            <SpeechToTextTooltipSettings
                Position="Syncfusion.Blazor.Inputs.TooltipPosition.TopLeft"
                Text="Start Speaking">
            </SpeechToTextTooltipSettings>
        </SfSpeechToText>
    </div>
    
    <div>
        <h4>Top-Center (Default)</h4>
        <SfSpeechToText ShowTooltip="true">
            <SpeechToTextTooltipSettings
                Position="Syncfusion.Blazor.Inputs.TooltipPosition.TopCenter"
                Text="Start Speaking">
            </SpeechToTextTooltipSettings>
        </SfSpeechToText>
    </div>
    
    <div>
        <h4>Top-Right</h4>
        <SfSpeechToText ShowTooltip="true">
            <SpeechToTextTooltipSettings
                Position="Syncfusion.Blazor.Inputs.TooltipPosition.TopRight"
                Text="Start Speaking">
            </SpeechToTextTooltipSettings>
        </SfSpeechToText>
    </div>
</div>

@code {
}

Bottom Positions

@using Syncfusion.Blazor.Inputs

<div style="padding: 40px; display: flex; gap: 30px; justify-content: flex-start;">
    <div>
        <h4>Bottom-Left</h4>
        <SfSpeechToText ShowTooltip="true">
            <SpeechToTextTooltipSettings
                Position="Syncfusion.Blazor.Inputs.TooltipPosition.BottomLeft"
                Text="Start Speaking">
            </SpeechToTextTooltipSettings>
        </SfSpeechToText>
    </div>
    
    <div>
        <h4>Bottom-Center</h4>
        <SfSpeechToText ShowTooltip="true">
            <SpeechToTextTooltipSettings
                Position="Syncfusion.Blazor.Inputs.TooltipPosition.BottomCenter"
                Text="Start Speaking">
            </SpeechToTextTooltipSettings>
        </SfSpeechToText>
    </div>
    
    <div>
        <h4>Bottom-Right</h4>
        <SfSpeechToText ShowTooltip="true">
            <SpeechToTextTooltipSettings
                Position="Syncfusion.Blazor.Inputs.TooltipPosition.BottomRight"
                Text="Start Speaking">
            </SpeechToTextTooltipSettings>
        </SfSpeechToText>
    </div>
</div>

@code {
}

Left Positions

@using Syncfusion.Blazor.Inputs

<div style="padding: 40px; display: flex; gap: 50px; justify-content: flex-start;">
    <div>
        <h4>Left-Top</h4>
        <SfSpeechToText ShowTooltip="true">
            <SpeechToTextTooltipSettings
                Position="Syncfusion.Blazor.Inputs.TooltipPosition.LeftTop"
                Text="Listen">
            </SpeechToTextTooltipSettings>
        </SfSpeechToText>
    </div>
    
    <div style="margin-top: 20px;">
        <h4>Left-Center</h4>
        <SfSpeechToText ShowTooltip="true">
            <SpeechToTextTooltipSettings
                Position="Syncfusion.Blazor.Inputs.TooltipPosition.LeftCenter"
                Text="Listen">
            </SpeechToTextTooltipSettings>
        </SfSpeechToText>
    </div>
    
    <div>
        <h4>Left-Bottom</h4>
        <SfSpeechToText ShowTooltip="true">
            <SpeechToTextTooltipSettings
                Position="Syncfusion.Blazor.Inputs.TooltipPosition.LeftBottom"
                Text="Listen">
            </SpeechToTextTooltipSettings>
        </SfSpeechToText>
    </div>
</div>

@code {
}

Right Positions

@using Syncfusion.Blazor.Inputs

<div style="padding: 40px; display: flex; gap: 50px; justify-content: flex-start;">
    <div>
        <h4>Right-Top</h4>
        <SfSpeechToText ShowTooltip="true">
            <SpeechToTextTooltipSettings
                Position="Syncfusion.Blazor.Inputs.TooltipPosition.RightTop"
                Text="Record">
            </SpeechToTextTooltipSettings>
        </SfSpeechToText>
    </div>
    
    <div style="margin-top: 20px;">
        <h4>Right-Center</h4>
        <SfSpeechToText ShowTooltip="true">
            <SpeechToTextTooltipSettings
                Position="Syncfusion.Blazor.Inputs.TooltipPosition.RightCenter"
                Text="Record">
            </SpeechToTextTooltipSettings>
        </SfSpeechToText>
    </div>
    
    <div>
        <h4>Right-Bottom</h4>
        <SfSpeechToText ShowTooltip="true">
            <SpeechToTextTooltipSettings
                Position="Syncfusion.Blazor.Inputs.TooltipPosition.RightBottom"
                Text="Record">
            </SpeechToTextTooltipSettings>
        </SfSpeechToText>
    </div>
</div>

@code {
}

Enabling and Disabling Tooltips

Disable Tooltips Globally

@using Syncfusion.Blazor.Inputs

<div style="padding: 20px;">
    <h3>Tooltips Disabled</h3>
    
    <SfSpeechToText ShowTooltip="false">
        <SpeechToTextTooltipSettings
            Text="This won't show"
            StopStateText="Neither will this">
        </SpeechToTextTooltipSettings>
    </SfSpeechToText>
    
    <p style="color: #999; font-size: 12px;">Hover over button - no tooltip appears</p>
</div>

@code {
}

Dynamic Tooltip Control

@using Syncfusion.Blazor.Inputs

<div style="padding: 20px;">
    <h3>Dynamic Tooltip Control</h3>
    
    <div style="margin-bottom: 20px;">
        <label>
            <input type="checkbox" @onchange="@((ChangeEventArgs e) => showTooltips = (bool)e.Value)" />
            Show Tooltips
        </label>
    </div>
    
    <SfSpeechToText ShowTooltip="@showTooltips">
        <SpeechToTextTooltipSettings
            Text="Click to start recording"
            StopStateText="Click to stop">
        </SpeechToTextTooltipSettings>
    </SfSpeechToText>
    
    <p style="margin-top: 15px; color: #666;">
        Tooltips: @(showTooltips ? "Enabled ✓" : "Disabled ✗")
    </p>
</div>

@code {
    private bool showTooltips = true;
}

Position Reference Guide

Choosing the Right Position

Responsive Tooltip Position Selection

@using Syncfusion.Blazor.Inputs

<div style="padding: 20px;">
    <h3>Responsive Tooltip Positioning</h3>
    
    <div style="margin-bottom: 20px;">
        <label>Button Position:</label>
        <select @onchange="@((ChangeEventArgs e) => buttonPosition = e.Value?.ToString())" style="padding: 8px;">
            <option value="top-left">Top-Left</option>
            <option value="top-right">Top-Right</option>
            <option value="bottom-left">Bottom-Left</option>
            <option value="bottom-right">Bottom-Right</option>
        </select>
    </div>
    
    <div style="@GetButtonPositionStyle()">
        <SfSpeechToText ShowTooltip="true">
            <SpeechToTextTooltipSettings
                Position="@GetTooltipPosition()"
                Text="Start Recording">
            </SpeechToTextTooltipSettings>
        </SfSpeechToText>
    </div>
</div>

@code {
    private string buttonPosition = "top-left";
    
    private string GetButtonPositionStyle()
    {
        return buttonPosition switch
        {
            "top-right" => "position: absolute; top: 50px; right: 20px;",
            "bottom-left" => "position: absolute; bottom: 50px; left: 20px;",
            "bottom-right" => "position: absolute; bottom: 50px; right: 20px;",
            _ => "position: absolute; top: 50px; left: 20px;"
        };
    }
    
    private Syncfusion.Blazor.Inputs.TooltipPosition GetTooltipPosition()
    {
        return buttonPosition switch
        {
            "top-right" => Syncfusion.Blazor.Inputs.TooltipPosition.TopLeft,
            "bottom-left" => Syncfusion.Blazor.Inputs.TooltipPosition.TopCenter,
            "bottom-right" => Syncfusion.Blazor.Inputs.TooltipPosition.TopLeft,
            _ => Syncfusion.Blazor.Inputs.TooltipPosition.TopRight
        };
    }
}

Complete Examples

Example 1: Professional Setup

@using Syncfusion.Blazor.Inputs

<div style="padding: 20px; max-width: 600px;">
    <h3>Professional Voice Input</h3>
    
    <SfSpeechToText 
        @bind-Transcript="@transcript"
        ShowTooltip="true"
        AllowInterimResults="true">
        <SpeechToTextButtonSettings
            Text="🎤 Listen"
            StopStateText="⏹️ Stop"
            IconCss="e-icons e-microphone"
            StopIconCss="e-icons e-stop"
            IsPrimary="true">
        </SpeechToTextButtonSettings>
        <SpeechToTextTooltipSettings
            Text="Click to start speaking clearly"
            StopStateText="Click to stop recording"
            Position="Syncfusion.Blazor.Inputs.TooltipPosition.TopCenter">
        </SpeechToTextTooltipSettings>
    </SfSpeechToText>
    
    <div style="margin-top: 20px; padding: 15px; border: 1px solid #ddd; border-radius: 4px;">
        <strong>Transcribed Text:</strong>
        <p style="margin: 10px 0 0 0;">@transcript</p>
    </div>
</div>

@code {
    private string transcript = "";
}

Example 2: Compact Inline Button

@using Syncfusion.Blazor.Inputs

<div style="padding: 20px;">
    <h3>Quick Voice Input</h3>
    
    <div style="display: flex; align-items: center; gap: 10px;">
        <input type="text" @bind="@transcript" style="padding: 8px; flex: 1; border: 1px solid #ccc; border-radius: 4px;" />
        
        <SfSpeechToText 
            @bind-Transcript="@transcript"
            ShowTooltip="true">
            <SpeechToTextButtonSettings
                IconCss="e-icons e-microphone"
                StopIconCss="e-icons e-stop">
            </SpeechToTextButtonSettings>
            <SpeechToTextTooltipSettings
                Text="Voice input"
                Position="Syncfusion.Blazor.Inputs.TooltipPosition.TopCenter">
            </SpeechToTextTooltipSettings>
        </SfSpeechToText>
    </div>
</div>

@code {
    private string transcript = "";
}

Example 3: Multi-Position Showcase

@using Syncfusion.Blazor.Inputs

<div style="padding: 40px;">
    <h3>Tooltip Position Showcase</h3>
    
    <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px;">
        @foreach(var pos in new[] { 
            ("TopCenter", Syncfusion.Blazor.Inputs.TooltipPosition.TopCenter),
            ("BottomCenter", Syncfusion.Blazor.Inputs.TooltipPosition.BottomCenter),
            ("LeftCenter", Syncfusion.Blazor.Inputs.TooltipPosition.LeftCenter),
            ("RightCenter", Syncfusion.Blazor.Inputs.TooltipPosition.RightCenter)
        })
        {
            <div style="text-align: center; padding: 20px; border: 1px solid #eee; border-radius: 4px;">
                <p style="font-weight: bold; margin-bottom: 15px;">@pos.Item1</p>
                <SfSpeechToText ShowTooltip="true">
                    <SpeechToTextTooltipSettings
                        Position="@pos.Item2"
                        Text="@pos.Item1">
                    </SpeechToTextTooltipSettings>
                </SfSpeechToText>
            </div>
        }
    </div>
</div>

@code {
}

Best Practices

✅ DO

• Provide clear, concise tooltip text - Users should understand the action at a glance
• Use consistent positioning - Keep tooltips in the same position throughout your app
• Position tooltips away from screen edges - Tooltips should be fully visible
• Keep tooltip text short - Single line messages are best
• Use tooltips for additional context - Don't repeat button text verbatim
• Test on different screen sizes - Ensure tooltips fit on mobile devices
• Use emojis strategically - Add visual context without cluttering

❌ DON'T

• Use overly long tooltip text - Breaks layout and hides important information
• Change tooltip position dynamically - Creates confusing UX
• Use tooltips as primary instructions - Users may not discover hover tooltips
• Disable tooltips without good reason - They improve usability
• Use same text for tooltip and button - Provides no additional value
• Ignore accessibility - Ensure tooltips are readable
• Use tooltips on touch devices exclusively - Touch users can't hover

Accessibility Considerations

@using Syncfusion.Blazor.Inputs

<div style="padding: 20px;">
    <h3>Accessible Tooltip Setup</h3>
    
    <SfSpeechToText 
        ID="speechToTextControl"
        ShowTooltip="true"
        @bind-Transcript="@transcript">
        <SpeechToTextButtonSettings
            Text="🎤 Listen"
            StopStateText="⏹️ Stop"
            IconCss="e-icons e-microphone"
            StopIconCss="e-icons e-stop"
            IsPrimary="true">
        </SpeechToTextButtonSettings>
        <SpeechToTextTooltipSettings
            Text="Press to start voice recording"
            StopStateText="Press to stop recording"
            Position="Syncfusion.Blazor.Inputs.TooltipPosition.TopCenter">
        </SpeechToTextTooltipSettings>
    </SfSpeechToText>
    
    <ul style="margin-top: 20px; color: #666; font-size: 12px;">
        <li>Tooltips help keyboard-only users</li>
        <li>Clear text benefits screen readers</li>
        <li>Proper positioning improves mobile UX</li>
    </ul>
</div>

@code {
    private string transcript = "";
}

---

Transcript and Language Configuration

Table of Contents

• Retrieving Transcripts
• Two-Way Binding
• Setting Language
• Supported Languages
• Language Switching
• Multi-Language Examples

Retrieving Transcripts

The Transcript property allows you to access the transcribed text from speech recognition. This property is updated automatically as the user speaks or completes their speech.

Basic Transcript Access

@using Syncfusion.Blazor.Inputs

<SfSpeechToText @bind-Transcript="@transcript"></SfSpeechToText>
<p>You said: @transcript</p>

@code {
    private string transcript = "";
}

How it works: 1. User clicks the microphone button 2. Speaks into the microphone 3. transcript variable updates automatically with recognized text 4. Display updates to show the transcribed text

Reading Transcript from Template

You can display the transcript in various ways:

@using Syncfusion.Blazor.Inputs

<div style="padding: 20px;">
    <SfSpeechToText @bind-Transcript="@transcript"></SfSpeechToText>
    
    @if (string.IsNullOrEmpty(transcript))
    {
        <p style="color: gray;">No speech recognized yet. Click the microphone to start.</p>
    }
    else
    {
        <div style="background: #f5f5f5; padding: 15px; margin-top: 20px; border-radius: 4px;">
            <h4>Transcribed Text:</h4>
            <p>@transcript</p>
            <small>Length: @transcript.Length characters</small>
        </div>
    }
</div>

@code {
    private string transcript = "";
}

Two-Way Binding

The @bind-Transcript directive creates a two-way binding, meaning:

• Changes from speech recognition update the transcript variable
• Changes to the transcript variable (programmatically) would reflect in the component

Practical Two-Way Binding Example

@using Syncfusion.Blazor.Inputs

<div style="max-width: 600px;">
    <h3>Voice-Enabled Form</h3>
    
    <div style="margin-bottom: 20px;">
        <label>Name (or speak):</label>
        <SfSpeechToText @bind-Transcript="@formData.Name" Language="en-US"></SfSpeechToText>
        <input type="text" @bind="@formData.Name" placeholder="Or type here..." style="width: 100%; padding: 8px; margin-top: 5px;" />
    </div>
    
    <div style="margin-bottom: 20px;">
        <label>Email:</label>
        <input type="email" @bind="@formData.Email" placeholder="Email address..." style="width: 100%; padding: 8px;" />
    </div>
    
    <div style="margin-bottom: 20px;">
        <label>Message (or speak):</label>
        <SfSpeechToText @bind-Transcript="@formData.Message" Language="en-US"></SfSpeechToText>
        <textarea @bind="@formData.Message" rows="4" placeholder="Or type here..." style="width: 100%; padding: 8px; margin-top: 5px;"></textarea>
    </div>
    
    <button @onclick="SubmitForm" style="padding: 10px 20px; background: #4CAF50; color: white; border: none; border-radius: 4px; cursor: pointer;">Submit</button>
</div>

@code {
    private FormData formData = new FormData();
    
    private void SubmitForm()
    {
        Console.WriteLine($"Name: {formData.Name}");
        Console.WriteLine($"Email: {formData.Email}");
        Console.WriteLine($"Message: {formData.Message}");
    }
    
    public class FormData
    {
        public string Name { get; set; } = "";
        public string Email { get; set; } = "";
        public string Message { get; set; } = "";
    }
}

Setting Language

The Language property specifies which language the speech recognition engine should use. This ensures accurate transcription based on the spoken language.

Basic Language Setting

@using Syncfusion.Blazor.Inputs

<SfSpeechToText Language="fr-FR" @bind-Transcript="@transcript"></SfSpeechToText>
<p>Speaking French: @transcript</p>

@code {
    private string transcript = "";
}

Common Language Codes

<!-- English (United States) -->
<SfSpeechToText Language="en-US"></SfSpeechToText>

<!-- English (British) -->
<SfSpeechToText Language="en-GB"></SfSpeechToText>

<!-- French (France) -->
<SfSpeechToText Language="fr-FR"></SfSpeechToText>

<!-- German (Germany) -->
<SfSpeechToText Language="de-DE"></SfSpeechToText>

<!-- Spanish (Spain) -->
<SfSpeechToText Language="es-ES"></SfSpeechToText>

<!-- Italian (Italy) -->
<SfSpeechToText Language="it-IT"></SfSpeechToText>

<!-- Chinese (Mandarin - Simplified) -->
<SfSpeechToText Language="zh-CN"></SfSpeechToText>

<!-- Japanese (Japan) -->
<SfSpeechToText Language="ja-JP"></SfSpeechToText>

<!-- Korean (Korea) -->
<SfSpeechToText Language="ko-KR"></SfSpeechToText>

<!-- Portuguese (Brazil) -->
<SfSpeechToText Language="pt-BR"></SfSpeechToText>

Supported Languages

The SpeechToText component supports 100+ language and locale combinations. Here's a comprehensive list of commonly supported languages:

European Languages

• English: en-US, en-GB, en-AU, en-CA, en-IN, en-NZ, en-ZA
• French: fr-FR, fr-CA, fr-BE, fr-CH
• German: de-DE, de-AT, de-CH
• Spanish: es-ES, es-MX, es-AR, es-CO, es-PE
• Italian: it-IT, it-CH
• Portuguese: pt-PT, pt-BR
• Dutch: nl-NL, nl-BE
• Polish: pl-PL
• Russian: ru-RU, ru-BY, ru-KZ
• Turkish: tr-TR
• Greek: el-GR
• Swedish: sv-SE
• Norwegian: nb-NO, nn-NO
• Danish: da-DK
• Finnish: fi-FI

Asian Languages

• Chinese: zh-CN (Mandarin Simplified), zh-TW (Mandarin Traditional), zh-HK (Cantonese)
• Japanese: ja-JP
• Korean: ko-KR
• Hindi: hi-IN
• Thai: th-TH
• Vietnamese: vi-VN
• Filipino: fil-PH
• Indonesian: id-ID
• Malay: ms-MY, ms-BN
• Myanmar: my-MM
• Burmese: my-MM

Middle Eastern Languages

• Arabic: ar-AE, ar-SA, ar-EG, ar-KW, ar-QA
• Hebrew: he-IL
• Persian/Farsi: fa-IR
• Turkish: tr-TR
• Urdu: ur-PK

African Languages

• Afrikaans: af-ZA
• Zulu: zu-ZA
• Xhosa: xh-ZA

Language Switching

Allow users to dynamically change the language:

@using Syncfusion.Blazor.Inputs

<div style="max-width: 600px; margin: 20px auto;">
    <h3>Multi-Language Speech Recognition</h3>
    
    <div style="margin-bottom: 20px;">
        <label style="display: block; margin-bottom: 5px; font-weight: bold;">Select Language:</label>
        <select @onchange="@OnLanguageChanged" value="@selectedLanguage" style="padding: 8px; font-size: 14px; width: 200px;">
            <option value="en-US">English (US)</option>
            <option value="en-GB">English (UK)</option>
            <option value="fr-FR">Français (France)</option>
            <option value="de-DE">Deutsch (Deutschland)</option>
            <option value="es-ES">Español (España)</option>
            <option value="it-IT">Italiano (Italia)</option>
            <option value="pt-BR">Português (Brasil)</option>
            <option value="zh-CN">中文 (简体)</option>
            <option value="ja-JP">日本語 (日本)</option>
            <option value="ko-KR">한국어 (대한민국)</option>
        </select>
    </div>
    
    <div style="padding: 15px; background: #f9f9f9; border-radius: 4px; margin-bottom: 20px;">
        <p style="margin: 0 0 10px 0; color: #666;">Current language: <strong>@GetLanguageName(selectedLanguage)</strong></p>
        <p style="margin: 0; color: #999; font-size: 13px;">Speak in this language for accurate transcription</p>
    </div>
    
    <SfSpeechToText 
        Language="@selectedLanguage" 
        @bind-Transcript="@transcript">
    </SfSpeechToText>
    
    @if (!string.IsNullOrEmpty(transcript))
    {
        <div style="margin-top: 20px; padding: 15px; background: #e8f5e9; border-radius: 4px;">
            <h4>Result:</h4>
            <p>@transcript</p>
        </div>
    }
</div>

@code {
    private string selectedLanguage = "en-US";
    private string transcript = "";
    
    private void OnLanguageChanged(ChangeEventArgs e)
    {
        selectedLanguage = e.Value?.ToString() ?? "en-US";
        transcript = ""; // Clear transcript when language changes
    }
    
    private string GetLanguageName(string languageCode)
    {
        return languageCode switch
        {
            "en-US" => "English (US)",
            "en-GB" => "English (UK)",
            "fr-FR" => "French (France)",
            "de-DE" => "German (Germany)",
            "es-ES" => "Spanish (Spain)",
            "it-IT" => "Italian (Italy)",
            "pt-BR" => "Portuguese (Brazil)",
            "zh-CN" => "Chinese (Simplified)",
            "ja-JP" => "Japanese",
            "ko-KR" => "Korean",
            _ => languageCode
        };
    }
}

Multi-Language Examples

Example 1: Language Preference Storage

@using Syncfusion.Blazor.Inputs

<div>
    <div style="margin-bottom: 15px;">
        <label>Preferred Language:</label>
        <select @onchange="@OnLanguageChanged" style="padding: 8px;">
            <option value="en-US">English</option>
            <option value="fr-FR">Français</option>
            <option value="es-ES">Español</option>
        </select>
    </div>
    
    <SfSpeechToText Language="@userPreferredLanguage" @bind-Transcript="@transcript"></SfSpeechToText>
    <p>@transcript</p>
</div>

@code {
    private string userPreferredLanguage = "en-US";
    private string transcript = "";
    
    private void OnLanguageChanged(ChangeEventArgs e)
    {
        userPreferredLanguage = e.Value?.ToString() ?? "en-US";
        // In production, save to localStorage or database
        SaveUserPreference(userPreferredLanguage);
    }
    
    private void SaveUserPreference(string language)
    {
        // Example: Save to local storage or user profile
        Console.WriteLine($"Language preference saved: {language}");
    }
}

Example 2: Auto-Detect and Fallback

@using Syncfusion.Blazor.Inputs

<div>
    <p>Current language: @effectiveLanguage</p>
    <SfSpeechToText Language="@effectiveLanguage" @bind-Transcript="@transcript"></SfSpeechToText>
    <p>@transcript</p>
</div>

@code {
    private string effectiveLanguage = "en-US";
    private string transcript = "";
    
    protected override void OnInitialized()
    {
        // Example: Try to detect browser language, fallback to en-US
        string browserLanguage = GetBrowserLanguage();
        effectiveLanguage = IsLanguageSupported(browserLanguage) ? browserLanguage : "en-US";
    }
    
    private string GetBrowserLanguage()
    {
        // In a real implementation, you'd get this from JavaScript interop
        return "en-US";
    }
    
    private bool IsLanguageSupported(string language)
    {
        // Check if language is in the supported list
        return language.StartsWith("en") || language.StartsWith("fr") || language.StartsWith("es");
    }
}

Best Practices

1. Always specify Language explicitly - Don't rely on browser defaults 2. Store user preference - Remember the user's language choice 3. Provide language selection - Let users change language easily 4. Clear text on language change - Avoid confusion from mixed-language transcripts 5. Test with native speakers - Verify accuracy before deploying