syncfusion-aspnetcore-speech-to-text

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Syncfusion ASP.NET Core SpeechToText Control

Syncfusion ASP.NET Core SpeechToText 控件

Overview

概述

The SpeechToText control enables users to convert spoken words into text using the Web Speech API in ASP.NET Core applications. This skill helps you implement, customize, and troubleshoot speech recognition using Razor Tag Helpers.

The main Razor Tag Helper that captures audio and converts speech to text in real-time using browser APIs.

Key Features:

Real-time speech recognition via Web Speech API
Multiple language support
Customizable button and tooltip via tag helper attributes
Event-driven architecture
Programmatic control via JavaScript methods
Accessibility support (ARIA labels, keyboard navigation)
Localization support
Error handling and recovery
ASP.NET Core binding

SpeechToText控件允许用户在ASP.NET Core应用中使用Web Speech API将语音转换为文本。此技能可帮助您使用Razor Tag Helpers实现、自定义和排查语音识别相关问题。

核心Razor Tag Helper可通过浏览器API实时捕获音频并将语音转换为文本。

主要功能：

通过Web Speech API实现实时语音识别
多语言支持
通过Tag Helper属性自定义按钮和工具提示
事件驱动架构
通过JavaScript方法进行程序化控制
辅助功能支持（ARIA标签、键盘导航）
本地化支持
错误处理与恢复
ASP.NET Core数据绑定

Documentation

文档

Getting Started

快速入门

📄 Read: references/getting-started.md

Installation via NuGet
ASP.NET Core project setup
Razor Tag Helper registration
Basic control implementation
CSS imports and theme selection
First working example
Script manager configuration

📄 阅读： references/getting-started.md

通过NuGet安装
ASP.NET Core项目设置
Razor Tag Helper注册
基础控件实现
CSS导入与主题选择
第一个可用示例
脚本管理器配置

Speech Recognition Features

语音识别功能

📄 Read: references/speech-recognition-features.md

Retrieving transcripts in real-time
Setting language for recognition
Managing interim results
Listening state management
Handling speech-to-text conversion
Real-time vs final results
Multi-language support

📄 阅读： references/speech-recognition-features.md

实时获取转录文本
设置识别语言
管理临时结果
监听状态管理
处理语音转文本转换
实时结果与最终结果对比
多语言支持

Button and Tooltip Customization

按钮与工具提示自定义

📄 Read: references/button-and-tooltip-customization.md

Button customization via tag helper attributes
Icon customization using CSS classes
Icon positioning
Tooltip configuration
Primary button styling
CSS class styling (e-primary, e-success, etc.)
Responsive design

📄 阅读： references/button-and-tooltip-customization.md

通过Tag Helper属性自定义按钮
使用CSS类自定义图标
图标定位
工具提示配置
主按钮样式
CSS类样式（e-primary、e-success等）
响应式设计

Events and Methods

事件与方法

📄 Read: references/events-and-methods.md

Event binding in Razor (onStart, onStop, onError, transcriptChanged)
Event handling in script tag
Error types and error handling
startListening() and stopListening() methods
Programmatic control via JavaScript
Getting component instance with ej.base.getComponent()
Event workflows and patterns

📄 阅读： references/events-and-methods.md

在Razor中绑定事件（onStart、onStop、onError、transcriptChanged）
在脚本标签中处理事件
错误类型与错误处理
startListening()和stopListening()方法
通过JavaScript进行程序化控制
使用ej.base.getComponent()获取组件实例
事件工作流与模式

Globalization and Localization

全球化与本地化

📄 Read: references/globalization-and-localization.md

Localization with L10n.load()
Available locale strings
Language-specific error messages
RTL support via enableRtl attribute
Accessibility labels and ARIA attributes
Multi-language interface examples

📄 阅读： references/globalization-and-localization.md

使用L10n.load()实现本地化
可用的区域设置字符串
特定语言的错误提示
通过enableRtl属性支持RTL布局
辅助功能标签与ARIA属性
多语言界面示例

Troubleshooting and Security

故障排查与安全性

📄 Read: references/troubleshooting-and-security.md

Common issues and solutions
Browser compatibility matrix
Microphone permission handling
Security considerations for ASP.NET Core
Privacy and data transmission
Performance optimization
Offline fallback strategies

📄 阅读： references/troubleshooting-and-security.md

常见问题与解决方案
浏览器兼容性矩阵
麦克风权限处理
ASP.NET Core安全性考量
隐私与数据传输
性能优化
离线回退策略

Quick Start Example

快速入门示例

razor

@using Syncfusion.EJ2.Inputs

<div id='speechtotext-container'>
    <ejs-speechtotext id="speech-to-text" transcriptChanged="onTranscriptChanged"></ejs-speechtotext>
    <ejs-textarea id="output-textarea" rows="5" cols="50" value="" resizeMode="None" placeholder="Transcribed text will be shown here..."></ejs-textarea>
</div>

<script>
    function onTranscriptChanged(args) {
        var textareaObj = ej.base.getComponent(document.getElementById("output-textarea"), "textarea");
        textareaObj.value = args.transcript;
    }
</script>

<style>
    #speechtotext-container {
        gap: 20px;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
</style>

razor

@using Syncfusion.EJ2.Inputs

<div id='speechtotext-container'>
    <ejs-speechtotext id="speech-to-text" transcriptChanged="onTranscriptChanged"></ejs-speechtotext>
    <ejs-textarea id="output-textarea" rows="5" cols="50" value="" resizeMode="None" placeholder="Transcribed text will be shown here..."></ejs-textarea>
</div>

<script>
    function onTranscriptChanged(args) {
        var textareaObj = ej.base.getComponent(document.getElementById("output-textarea"), "textarea");
        textareaObj.value = args.transcript;
    }
</script>

<style>
    #speechtotext-container {
        gap: 20px;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
</style>

Common Patterns

常见模式

Pattern 1: Voice Form with Multiple Fields

模式1：多字段语音表单

razor

@using Syncfusion.EJ2.Inputs

<div class="form-group">
    <label>Name (speak):</label>
    <ejs-speechtotext id="name-voice" transcriptChanged="onNameTranscript"></ejs-speechtotext>
    <ejs-textbox id="name-field"></ejs-textbox>
</div>

<div class="form-group">
    <label>Message (speak):</label>
    <ejs-speechtotext id="message-voice" transcriptChanged="onMessageTranscript"></ejs-speechtotext>
    <ejs-textarea id="message-field" rows="4"></ejs-textarea>
</div>

<script>
    function onNameTranscript(args) {
        var nameField = ej.base.getComponent(document.getElementById("name-field"), "textbox");
        nameField.value = args.transcript;
    }

    function onMessageTranscript(args) {
        var messageField = ej.base.getComponent(document.getElementById("message-field"), "textarea");
        messageField.value = args.transcript;
    }
</script>

razor

@using Syncfusion.EJ2.Inputs

<div class="form-group">
    <label>姓名（语音输入）：</label>
    <ejs-speechtotext id="name-voice" transcriptChanged="onNameTranscript"></ejs-speechtotext>
    <ejs-textbox id="name-field"></ejs-textbox>
</div>

<div class="form-group">
    <label>留言（语音输入）：</label>
    <ejs-speechtotext id="message-voice" transcriptChanged="onMessageTranscript"></ejs-speechtotext>
    <ejs-textarea id="message-field" rows="4"></ejs-textarea>
</div>

<script>
    function onNameTranscript(args) {
        var nameField = ej.base.getComponent(document.getElementById("name-field"), "textbox");
        nameField.value = args.transcript;
    }

    function onMessageTranscript(args) {
        var messageField = ej.base.getComponent(document.getElementById("message-field"), "textarea");
        messageField.value = args.transcript;
    }
</script>

Pattern 2: Programmatic Control

模式2：程序化控制

razor

@using Syncfusion.EJ2.Inputs

<ejs-speechtotext id="speech-control"></ejs-speechtotext>

<div>
    <button onclick="startVoiceInput()">Start Recording</button>
    <button onclick="stopVoiceInput()">Stop Recording</button>
</div>

<script>
    function startVoiceInput() {
        var speechComponent = ej.base.getComponent(
            document.getElementById("speech-control"), 
            "speechtotext"
        );
        speechComponent.startListening();
    }

    function stopVoiceInput() {
        var speechComponent = ej.base.getComponent(
            document.getElementById("speech-control"), 
            "speechtotext"
        );
        speechComponent.stopListening();
    }
</script>

razor

@using Syncfusion.EJ2.Inputs

<ejs-speechtotext id="speech-control"></ejs-speechtotext>

<div>
    <button onclick="startVoiceInput()">开始录音</button>
    <button onclick="stopVoiceInput()">停止录音</button>
</div>

<script>
    function startVoiceInput() {
        var speechComponent = ej.base.getComponent(
            document.getElementById("speech-control"), 
            "speechtotext"
        );
        speechComponent.startListening();
    }

    function stopVoiceInput() {
        var speechComponent = ej.base.getComponent(
            document.getElementById("speech-control"), 
            "speechtotext"
        );
        speechComponent.stopListening();
    }
</script>

Pattern 3: Error Handling

模式3：错误处理

razor

@using Syncfusion.EJ2.Inputs

<ejs-speechtotext id="error-speech" 
    onError="handleError" 
    onStart="handleStart" 
    onStop="handleStop">
</ejs-speechtotext>

<div id="error-message" style="display:none; color: red; padding: 10px;"></div>

<script>
    function handleError(args) {
        var errorDiv = document.getElementById("error-message");
        errorDiv.style.display = "block";
        
        var errorMessages = {
            'no-speech': '🔇 No speech detected. Please try again.',
            'audio-capture': '🎙️ Microphone not found.',
            'not-allowed': '🔒 Microphone permission denied.',
            'network': '🌐 Network error occurred.'
        };
        
        errorDiv.textContent = errorMessages[args.error] || 'Error: ' + args.error;
        setTimeout(() => { errorDiv.style.display = "none"; }, 5000);
    }

    function handleStart() {
        console.log('🎤 Listening started');
    }

    function handleStop() {
        console.log('⏹️ Listening stopped');
    }
</script>

razor

@using Syncfusion.EJ2.Inputs

<ejs-speechtotext id="error-speech" 
    onError="handleError" 
    onStart="handleStart" 
    onStop="handleStop">
</ejs-speechtotext>

<div id="error-message" style="display:none; color: red; padding: 10px;"></div>

<script>
    function handleError(args) {
        var errorDiv = document.getElementById("error-message");
        errorDiv.style.display = "block";
        
        var errorMessages = {
            'no-speech': '🔇 未检测到语音，请重试。',
            'audio-capture': '🎙️ 未找到麦克风。',
            'not-allowed': '🔒 麦克风权限被拒绝。',
            'network': '🌐 发生网络错误。'
        };
        
        errorDiv.textContent = errorMessages[args.error] || '错误：' + args.error;
        setTimeout(() => { errorDiv.style.display = "none"; }, 5000);
    }

    function handleStart() {
        console.log('🎤 开始监听');
    }

    function handleStop() {
        console.log('⏹️ 停止监听');
    }
</script>

Key Properties

核心属性

Property	Type	Description
`lang`	string	Language code (e.g., 'en-US', 'fr-FR')
`transcript`	string	Current transcribed text
`allowInterimResults`	boolean	Show real-time results (default: true)
`listeningState`	enum	Current state (Inactive, Listening, Stopped)
`cssClass`	string	CSS classes (e-primary, e-success, etc.)
`enableRtl`	boolean	Enable right-to-left layout
`locale`	string	Localization language code

属性	类型	描述
`lang`	string	语言代码（例如：'en-US'、'fr-FR'）
`transcript`	string	当前转录文本
`allowInterimResults`	boolean	是否显示实时结果（默认：true）
`listeningState`	enum	当前状态（Inactive、Listening、Stopped）
`cssClass`	string	CSS类（e-primary、e-success等）
`enableRtl`	boolean	启用从右到左布局
`locale`	string	本地化语言代码

Tag Helper Attributes

Tag Helper 属性

razor

<ejs-speechtotext 
    id="speechId"
    lang="en-US"
    allowInterimResults="true"
    cssClass="e-primary"
    enableRtl="false"
    locale="en-US"
    transcriptChanged="onTranscriptChanged"
    onStart="onStartListening"
    onStop="onStopListening"
    onError="onError"
    created="onCreated">
    
    <e-speechtotext-buttonSettings 
        content="Start Listening" 
        stopContent="Stop Listening"
        iconCss="e-icons e-play"
        stopIconCss="e-icons e-pause"
        iconPosition="Right"
        isPrimary="true">
    </e-speechtotext-buttonSettings>
    
    <e-speechtotext-tooltipSettings 
        position="TopCenter"
        content="Click to start"
        stopContent="Click to stop">
    </e-speechtotext-tooltipSettings>
</ejs-speechtotext>

razor

<ejs-speechtotext 
    id="speechId"
    lang="en-US"
    allowInterimResults="true"
    cssClass="e-primary"
    enableRtl="false"
    locale="en-US"
    transcriptChanged="onTranscriptChanged"
    onStart="onStartListening"
    onStop="onStopListening"
    onError="onError"
    created="onCreated">
    
    <e-speechtotext-buttonSettings 
        content="Start Listening" 
        stopContent="Stop Listening"
        iconCss="e-icons e-play"
        stopIconCss="e-icons e-pause"
        iconPosition="Right"
        isPrimary="true">
    </e-speechtotext-buttonSettings>
    
    <e-speechtotext-tooltipSettings 
        position="TopCenter"
        content="Click to start"
        stopContent="Click to stop">
    </e-speechtotext-tooltipSettings>
</ejs-speechtotext>

Event Handlers

事件处理器

Event	Args	Description
`created`	-	Fired when control is initialized
`onStart`	StartListeningEventArgs	Fired when listening begins
`onStop`	StopListeningEventArgs	Fired when listening ends
`onError`	ErrorEventArgs	Fired when error occurs
`transcriptChanged`	TranscriptChangedEventArgs	Fired when transcript updates

事件	参数	描述
`created`	-	控件初始化完成时触发
`onStart`	StartListeningEventArgs	开始监听时触发
`onStop`	StopListeningEventArgs	停止监听时触发
`onError`	ErrorEventArgs	发生错误时触发
`transcriptChanged`	TranscriptChangedEventArgs	转录文本更新时触发

Methods

方法

Method	Description
`startListening()`	Begin speech recognition
`stopListening()`	Stop speech recognition

方法	描述
`startListening()`	开始语音识别
`stopListening()`	停止语音识别

Troubleshooting

故障排查

Control not rendering

控件未渲染

Solution: Check that

<ejs-scripts></ejs-scripts>

is in layout and CSS is imported

解决方案： 检查布局中是否包含

<ejs-scripts></ejs-scripts>

，并确认已导入CSS

Events not firing

事件未触发

Solution: Verify event handlers are valid JavaScript functions in global scope

解决方案： 验证事件处理器是全局作用域内的有效JavaScript函数

Microphone permission denied

麦克风权限被拒绝

Solution: Allow microphone access in browser settings

解决方案： 在浏览器设置中允许麦克风访问

Speech not recognized

语音未被识别

Solution: Check microphone volume, speak clearly, verify language setting

解决方案： 检查麦克风音量、清晰发音、验证语言设置