syncfusion-aspnetcore-speech-to-text

Syncfusion ASP.NET Core SpeechToText 控件

概述

SpeechToText 控件可在 ASP.NET Core 应用中使用 Web Speech API 将语音转换为文本。此技能可帮助你使用 Razor 标记帮助程序实现、自定义和排查语音识别问题。

用于通过浏览器 API 实时捕获音频并将语音转换为文本的主要 Razor 标记帮助程序。

主要功能：

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

文档

入门

📄 阅读： references/getting-started.md

• 通过 NuGet 安装
• ASP.NET Core 项目设置
• 注册 Razor 标记帮助程序
• 基本控件实现
• CSS 导入和主题选择
• 首个可运行示例
• 脚本管理器配置

语音识别功能

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

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

按钮和工具提示自定义

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

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

事件和方法

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

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

全球化和本地化

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

• 使用 L10n.load() 进行本地化
• 可用的区域设置字符串
• 特定语言的错误消息
• 通过 enableRtl 属性支持 RTL
• 无障碍标签和 ARIA 属性
• 多语言界面示例

故障排查和安全

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

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

快速入门示例

@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>

常见模式

模式 1：包含多个字段的语音表单

@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>

模式 2：程序化控制

@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>

模式 3：错误处理

@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>

关键属性

属性	类型	描述
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	本地化语言代码

标记帮助程序属性

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

事件处理程序

事件	参数	描述
created	-	控件初始化时触发
onStart	StartListeningEventArgs	开始监听时触发
onStop	StopListeningEventArgs	结束监听时触发
onError	ErrorEventArgs	发生错误时触发
transcriptChanged	TranscriptChangedEventArgs	转录内容更新时触发

方法

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

故障排除

控件未渲染

解决方案： 检查布局中是否包含 <ejs-scripts></ejs-scripts>，并确认已导入 CSS

事件未触发

解决方案： 确认事件处理程序是全局作用域中的有效 JavaScript 函数

麦克风权限被拒绝

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

未识别语音

解决方案： 检查麦克风音量、清晰说话，并确认语言设置