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