syncfusion-blazor-speech-to-text

What this skill does

# 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](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](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](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](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](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](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](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](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](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:

```razor
@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):

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

### Pattern 2: Multi-Language Support
Allow users to switch between languages:

```razor
<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:

```razor
<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:

```razor
<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

| Property | Type | Default | Purpose |
|----------|------|---------|---------|