syncfusion-angular-speech-to-text

这段内容是审核时保存的快照。外部来源才是完整且最新的版本。

---
name: syncfusion-angular-speech-to-text
description: Implement the Syncfusion Angular SpeechToText component. Use this skill for real-time speech-to-text conversion with text transcripts, custom button appearance and tooltips, recognition event handling, multiple language support with localization and RTL, error handling, and security best practices for microphone access and data transmission.
metadata:
  author: "Syncfusion Inc"
  version: "34.1.29"
---

# Syncfusion Angular SpeechToText Component

## Component Overview

The **Syncfusion Angular SpeechToText component** is a lightweight, accessible control that converts spoken words into text using the browser's native Speech Recognition API.

**Key Capabilities:**
- **Real-time Transcription** - Convert speech to text with interim and final results
- **Button Customization** - Configure icon, text, positioning, and styling for start/stop buttons
- **Tooltip Support** - Add tooltips with custom content and positioning for better UX
- **Events & Interactions** - Handle listening state changes, errors, and transcript updates
- **Methods** - Programmatic control via startListening() and stopListening() methods
- **Language Support** - Multi-language recognition with locale configuration
- **Globalization** - RTL support and localization for international applications
- **Styling Options** - CSS classes, HTML attributes, and theme integration
- **Security Features** - HTTPS enforcement and explicit microphone permissions
- **Browser Compatibility** - Chrome 25+, Edge 79+, Safari 12+, Opera 30+

## Documentation and Navigation Guide

### Getting Started
📄 **Read:** [references/getting-started.md](references/getting-started.md)
- Package installation (Ivy vs ngcc compatibility)
- Angular project setup and configuration
- CSS imports and theme management
- Module imports and basic component rendering
- Button content customization
- Complete working example with TextArea integration

### Button Customization
📄 **Read:** [references/button-customization.md](references/button-customization.md)
- ButtonSettingsModel configuration
- Start and stop button content labels
- Icon customization with CSS classes
- Icon positioning (top, bottom, left, right)
- Primary button styling for emphasis
- Visual style variations and best practices

### Tooltip Configuration
📄 **Read:** [references/tooltip-configuration.md](references/tooltip-configuration.md)
- TooltipSettingsModel setup
- Tooltip content for start and stop states
- Tooltip positioning relative to button
- Enabling and disabling tooltips
- Practical tooltip usage patterns

### Styling and Appearance
📄 **Read:** [references/styling-and-appearance.md](references/styling-and-appearance.md)
- CSS class system (e-primary, e-outline, e-info, e-success, e-warning, e-danger)
- Custom styling with cssClass property
- Theme configuration and integration
- HTML attributes customization
- Custom CSS examples and advanced styling

### Events and Methods
📄 **Read:** [references/events-and-methods.md](references/events-and-methods.md)
- Event types (created, onStart, onStop, onError, transcriptChanged)
- Event handler implementation and event arguments (including event, name properties)
- Programmatic control with startListening(), stopListening(), and destroy() methods
- Controlling component state with listeningState property (Inactive, Listening, Stopped)
- Canceling listening with the cancel property in onStart event
- Distinguishing user vs programmatic actions with isInteracted property
- Event handling patterns for different scenarios
- Managing listening lifecycle programmatically
- State transition management and workflow control
- Component cleanup and memory management

### Speech Recognition Features
📄 **Read:** [references/speech-recognition-features.md](references/speech-recognition-features.md)
- Retrieving transcript from speech input
- Setting recognition language (lang property)
- Interim results configuration (allowInter