SuperAPI AI 工具集

syncfusion-angular-speech-to-text

前端与建站

查看项目

更新于 10-15 15:32

技能介绍

用途

Syncfusion Angular SpeechToText 是一个轻量、可访问的 Angular 控件,用于将语音转换为文本。它基于浏览器原生 Speech Recognition API 工作,适合在 Angular 应用中实现实时语音转写、语音输入等交互。

主要能力

  • 实时转写:支持临时结果(interim)与最终结果(final)的语音转文本。
  • 按钮自定义:可配置开始/停止按钮的图标、文本、位置与样式。
  • 工具提示:支持自定义内容与定位的工具提示。
  • 事件与交互:可处理监听状态变化、错误以及转写文本更新。
  • 方法控制:提供 startListening() 与 stopListening() 方法进行程序化控制。
  • 语言支持:可通过 locale 配置进行多语言识别。
  • 全球化:支持 RTL 与本地化,适用于国际化应用。
  • 样式选项:支持 CSS 类、HTML 属性与主题集成。
  • 安全特性:强制 HTTPS 与显式麦克风权限。
  • 浏览器兼容:Chrome 25+、Edge 79+、Safari 12+、Opera 30+。

使用方式

安装与配置:参考 getting-started.md,涵盖包安装(Ivy 与 ngcc 兼容性)、Angular 项目设置与配置、CSS 导入与主题管理、模块导入与基础组件渲染、按钮内容自定义,以及与 TextArea 集成的完整示例。

按钮自定义:通过 ButtonSettingsModel 配置开始与停止按钮内容标签、图标 CSS 类、图标位置(上、下、左、右)、主按钮样式强调以及视觉样式变体。

工具提示:通过 TooltipSettingsModel 设置开始与停止状态的提示内容、相对按钮的定位、启用/禁用工具提示。

样式与外观:使用 CSS 类系统(e-primary、e-outline、e-info、e-success、e-warning、e-danger)、cssClass 属性自定义样式、主题配置与集成、HTML 属性自定义。

事件与方法:支持 created、onStart、onStop、onError、transcriptChanged 等事件;事件参数包含 event、name 等属性;可通过 startListening()、stopListening()、destroy() 方法进行程序化控制;使用 listeningState 属性(Inactive、Listening、Stopped)控制组件状态;在 onStart 事件中通过 cancel 属性取消监听;通过 isInteracted 属性区分用户操作与程序化操作。

语音识别功能:获取语音输入的转写文本、设置识别语言(lang 属性)、配置临时结果(allowInterimResults)、管理监听状态、控制工具提示可见性(showTooltip)、配置禁用状态、通过 enablePersistence 持久化状态、使用 localStorage 自定义状态管理。

国际化:使用 L10n.load() 进行本地化设置、错误消息与标签的翻译键映射、多语言实现示例、RTL 支持启用、语言特定配置最佳实践。

安全与错误处理:安全风险与缓解策略、数据传输与隐私问题、HTTPS 强制与 MITM 防护、麦克风权限管理、错误类型处理(no-speech、aborted、audio-capture、not-allowed、service-not-allowed、network、unsupported-browser、default)、浏览器支持矩阵与兼容性。

适用场景

  • 需要在 Angular 应用中集成语音转文本输入。
  • 构建支持语音交互的无障碍应用。
  • 需要多语言语音识别与国际化界面的项目。
  • 需要程序化控制监听状态或自定义按钮与提示的交互场景。

限制

  • 需要有效的互联网连接以进行语音识别处理。
  • 需要浏览器支持 Speech Recognition API:Chrome 25+、Edge 79+、Safari 12+、Opera 30+;Firefox 不支持。
  • 需要系统连接麦克风硬件,并在浏览器设置中授予麦克风权限。
  • 建议在 HTTPS 上下文中使用,以确保安全的麦克风访问。