syncfusion-vue-speech-to-text

Syncfusion Vue 语音转文本组件

Syncfusion Vue 语音转文本组件使用浏览器的语音识别 API，将口语转换为文本。本指南涵盖在 Vue 3 应用中实现实时语音转录所需的设置、配置、事件处理、自定义和安全注意事项。

浏览器支持与要求

语音转文本组件需要：

• 浏览器支持： Chrome 25+、Edge 79+、Safari 12+、Opera 30+（不支持 Firefox）
• API 依赖： HTML5 语音识别 API
• 互联网连接： 语音处理必需
• 用户授权： 麦克风访问许可

文档与导航指南

入门

📄 阅读： references/getting-started.md

• 使用 Vite 设置 Vue 3 项目
• 安装和配置软件包
• 导入 CSS 主题
• 注册组件
• 浏览器兼容性要求

语音识别与配置

📄 阅读： references/speech-recognition.md

• 使用 transcript 属性获取转录文本
• 使用 lang 属性设置语言
• 使用 allowInterimResults 管理实时结果
• 了解聆听状态（未激活、聆听中、已停止）
• 使用 showTooltip 显示或隐藏工具提示
• 禁用组件
• 错误处理与故障排除

方法与程序化控制

📄 阅读： references/methods.md

• 使用 startListening() 开始语音识别
• 使用 stopListening() 停止识别
• 程序化控制模式和用例

事件与生命周期

📄 阅读： references/events.md

• 使用 created 事件初始化组件
• 语音识别生命周期：onStart、onStop
• 使用 onError 事件检测错误
• 使用 transcriptChanged 事件实时转录
• 事件参数结构与实用示例

外观与自定义

📄 阅读： references/appearance.md

• 自定义按钮文本和内容
• 配置按钮图标及其位置
• 设置主要按钮样式
• 工具提示内容及位置
• CSS 类样式（e-primary、e-outline、e-info、e-success、e-warning、e-danger）
• 自定义样式示例

全球化与本地化

📄 阅读： references/globalization.md

• 使用 L10n.load() 方法进行本地化
• 翻译键标识符和默认值
• 使用 locale 属性配置语言
• 使用 enableRtl 属性支持从右到左（RTL）布局
• 多语言示例

安全注意事项

📄 阅读： references/security.md

• 在线依赖与离线回退方案
• 数据传输安全风险
• 第三方服务带来的隐私问题
• 中间人（MITM）攻击途径
• 缓解策略与最佳实践

快速入门

使用组合式 API 的基本设置：

<template>
  <div id="container">
    <ejs-speechtotext id="speechtotext" @transcript-changed="onTranscriptChange"></ejs-speechtotext>
    <ejs-textarea v-model="textareaValue" rows="5" cols="50" resizeMode="None" placeholder="Transcribed text will be shown here..."></ejs-textarea>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { SpeechToTextComponent as EjsSpeechtotext, TextAreaComponent as EjsTextarea } from "@syncfusion/ej2-vue-inputs";

const textareaValue = ref('');

const onTranscriptChange = (args) => {
  textareaValue.value = args.transcript;
};

</script>

<style>
@import "../node_modules/@syncfusion/ej2-material3-theme/styles/speech-to-text/index.css";
</style>

常见模式

模式 1：实时转录与最终转录

在用户说话时显示结果（中间结果），或等待语音结束后再显示：

<ejs-speechtotext @transcript-changed="onTranscriptChange"></ejs-speechtotext>


<ejs-speechtotext @transcript-changed="onTranscriptChange" :allow-interim-results="false"></ejs-speechtotext>

模式 2：多语言支持

为语音识别设置语言：

<ejs-speechtotext lang="en-US" @transcript-changed="onTranscriptChange"></ejs-speechtotext>


<ejs-speechtotext lang="fr-FR" @transcript-changed="onTranscriptChange"></ejs-speechtotext>

模式 3：程序化控制

通过按钮触发语音识别：

<template>
  <div>
    <button @click="startRecognition">Start Listening</button>
    <button @click="stopRecognition">Stop Listening</button>
    <ejs-speechtotext ref="speechToTextInstance"></ejs-speechtotext>
  </div>
</template>

<script setup>
const speechToTextInstance = ref(null);

const startRecognition = () => {
  speechToTextInstance.value.startListening();
};

const stopRecognition = () => {
  speechToTextInstance.value.stopListening();
};
</script>

模式 4：聆听状态监控

跟踪组件状态变化：

<template>
  <div>
    <p>Status: {{ listeningState }}</p>
    <ejs-speechtotext @start="(args) => listeningState = args.listeningState" @stop="(args) => listeningState = args.listeningState"></ejs-speechtotext>
  </div>
</template>

<script setup>
const listeningState = ref('Inactive');
</script>

模式 5：错误处理

捕获并响应语音识别错误：

<template>
  <ejs-speechtotext @error="onError"></ejs-speechtotext>
</template>

<script setup>
const onError = (args) => {
  console.error('Speech recognition error:', args);
};
</script>