0
0

纯前端实现语音文字互转

本文作者系360奇舞团前端开发工程师

在现代互联网的发展中，语音技术正逐渐成为改变用户体验的重要一环。Web Speech API 的引入使得开发者能够在浏览器中轻松实现语音识别和语音合成功能，为用户带来更加直观和便捷的操作体验。本文将介绍 Web Speech API 的基本概念、功能特性以及如何利用它来构建创新的应用程序。

什么是 Web Speech API？

Web Speech API 是一组浏览器 API，允许开发者在 Web 应用程序中集成语音识别和语音合成功能。这些 API 的引入标志着浏览器开始支持本地端的语音交互能力，不仅改善了用户体验，还为开发者提供了更多创新的可能性。

主要组成部分

Web Speech API 包括两个核心部分：

  1. SpeechRecognition（语音识别） ：
  • 允许用户通过麦克风输入语音，然后将其转换为文本。
  • 可以检测语音的开始和结束，以便进行适当的处理和响应。
  • 提供了各种配置选项，如语言识别设置、连续识别等，以满足不同应用场景的需求。

SpeechSynthesis（语音合成） ：

  • 允许开发者将文本转换为语音输出。
  • 支持多种语音合成引擎和语音效果，可以根据需求选择合适的语音风格和语言。
  • 提供了控制音调、语速等参数的接口，以实现个性化的语音输出效果。

优势

  • 多语言支持: Web Speech API 支持多种语言，可0以通过设置 recognition.lang 或 utterance.lang 来切换不同的语言环境。例如，识别法语、西班牙语等。
  • 语音指令的识别: 不仅仅是简单的文本转换，可以实现对特定命令或短语的识别，如控制网页的导航、播放媒体等。这需要在识别的事件处理程序中进行语音指令的解析和响应。
  • 连续语音识别: 设置 recognition.continuous = true，使得语音识别能够持续监听用户的语音输入，而不是单次识别。
  • 实时反馈和动态调整: 根据识别的实时结果，可以实现实时反馈或动态调整应用程序的行为。例如，在用户说话时动态更新界面或提供即时建议。

如何使用 Web Speech API？

实现语音识别
属性
  • recognition.grammars 用于存储一组语法规则，可以通过 addFromString 方法添加语法规则。
  • recognition.lang 设置或获取语音识别的语言
  • recognition.interimResults 如果设置为 true，则在识别过程中会提供临时结果。如果为 false，则只提供最终结果
  • recognition.maxAlternatives 设置语音识别返回的替代结果的最大数量。默认值为 1，表示只返回最可能的结果
  • recognition.continuous 如果设置为 true，则识别会持续运行直到显式停止。如果为 false，识别会在单次语音输入后自动停止
  • recognition.onresult 当识别结果可用时触发的事件处理程序。事件对象的 results 属性包含识别结果
  • recognition.onaudiostart 当开始录制音频时触发的事件处理程序
  • recognition.onsoundstart 当检测到声音时触发的事件处理程序
  • recognition.onspeechstart 当检测到用户开始说话时触发的事件处理程序
  • recognition.onspeechend 当用户停止说话时触发的事件处理程序
  • recognition.onaudioend 当音频录制停止时触发的事件处理程序
  • recognition.onend 当语音识别结束时触发的事件处理程序
  • recognition.onerror 当语音识别发生错误时触发的事件处理程序。事件对象的 error 属性包含错误信息
  • recognition.onnomatch 当语音识别没有匹配到任何结果时触发的事件处理程序
  • recognition.onsoundend 当检测到的声音停止时触发的事件处理程序
事件
  • start() 启动语音识别
  • stop() 停止语音识别
  • abort() 终止语音识别，并且不会触发onend事件

通过以下简单的 JavaScript 代码片段，可以实现基本的语音识别功能：

const recognition = new webkitSpeechRecognition(); // 创建语音识别对象
recognition.lang = 'en-US'; // 设置识别语言为英语
recognition.onresult = function(event) {
  const transcript = event.results[0][0].transcript; // 获取识别结果文本
  console.log('识别结果:', transcript);
};
recognition.start(); // 开始识别
实现语音合成
属性
  • SpeechSynthesisUtterance.lang 获取并设置说话的语言
  • SpeechSynthesisUtterance.pitch 获取并设置说话的音调（值越大越尖锐，越小越低沉）
  • SpeechSynthesisUtterance.rate 获取并设置说话的速度（值越大越快）
  • SpeechSynthesisUtterance.text 获取并设置说话的文本
  • SpeechSynthesisUtterance.voice 获取并设置说话时的声音
  • SpeechSynthesisUtterance.volume 获取并设置说话的音量
事件
  • speak() 将对应的实例添加到语音队列中
  • cancel() 删除队列中所有的语音，如果正在播放，则直接停止
  • pause() 暂停语音
  • resume() 恢复暂停的语音
  • getVoices 获取支持的语言数组

使用 SpeechSynthesis API 实现文本转语音的功能，示例代码如下：

const utterance = new SpeechSynthesisUtterance('Hello, welcome to our website.');
utterance.lang = 'en-US'; // 设置语音合成的语言
window.speechSynthesis.speak(utterance); // 开始语音合成

SpeechGrammar

1. **什么是

SpeechGrammar

？**

SpeechGrammar

对象用于指定一个语法规则，这些规则可以帮助语音识别引擎识别特定的语音输入。它常与 

SpeechRecognition

对象结合使用。语法规则可以是简单的文本，也可以是复杂的正则表达式或者语法定义。

2. **如何使用

SpeechGrammar

？**

要使用 

SpeechGrammar

，你需要创建一个 

SpeechRecognition

对象，并为其添加一个或多个 

SpeechGrammar

对象。以下是一个示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Speech Grammar Example</title>
</head>
<body>
  <button id="startButton">Start Speech Recognition</button>
  <div id="output"></div>

  <script>
   // 确保浏览器支持 SpeechRecognition
const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;

if (!SpeechRecognition) {
  console.error("SpeechRecognition not supported");
} else {
  // 创建 SpeechRecognition 实例
  const recognition = new SpeechRecognition();

  // 定义语法规则
  const grammar = '#JSGF V1.0; grammar colors; public <color> = red | green | blue | yellow ;';

  // 创建 webkitSpeechGrammarList 实例
  const speechGrammarList = new webkitSpeechGrammarList();
  speechGrammarList.addFromString(grammar, 1);  // 1 是语法的优先级

  // 将语法列表应用到 SpeechRecognition 实例
  recognition.grammars = speechGrammarList;

  // 配置识别选项
  recognition.lang = 'en-US';  // 设置语言
  recognition.interimResults = false;  // 只返回最终结果
  recognition.maxAlternatives = 1;  // 只返回一个替代结果

  // 开始识别
  recognition.start();

  recognition.onresult = (event) => {
    const result = event.results[0][0].transcript;
    console.log('识别结果:', result);
  };

  recognition.onerror = (event) => {
    console.error('识别错误:', event.error);
  };
}

  </script>
</body>
</html>

通过合理使用 

SpeechGrammar

和 

SpeechRecognition

，你可以创建更精确的语音识别应用，提升用户体验。

实际应用场景包括但不限于：

  • 智能助手和语音搜索: 实现类似于 Siri、Google Assistant 等智能助手的语音控制和信息获取功能。
  • 无障碍和辅助技术: 支持视觉障碍用户的语音导航、文本转语音等辅助功能。
  • 教育和培训: 提供基于语音的学习和培训工具，如语音答题、学习笔记转录等。
  • 娱乐和游戏: 实现语音驱动的游戏操作和交互体验，如语音控制角色移动、发声识别等。

总结

Web Speech API 的推出不仅仅是技术进步的体现，更是对互联网应用程序用户体验提升的重大贡献。通过使用这些功能强大的 API，开发者可以为他们的应用程序添加创新的语音交互功能，从而吸引更多用户并提升用户满意度。无论是构建下一代互动游戏、个性化的助手应用，还是革新教育和商业应用，Web Speech API 都将为您的创意提供强大的支持。

探索和利用 Web Speech API，让我们共同打造一个更智能、更直观的互联网世界！

原文链接：https://juejin.cn/post/7397015953453875240

  • END -

如果您关注前端+AI 相关领域可以扫码进群交流

d6dc5925440e7461ac831e89256cccf9.png 6f89c29a35131ab71c81f81ee85ba881.jpeg

扫码进群2或添加小编微信进群1😊

关于奇舞团

奇舞团是 360 集团最大的大前端团队，非常重视人才培养，有工程师、讲师、翻译官、业务接口人、团队 Leader 等多种发展方向供员工选择，并辅以提供相应的技术力、专业力、通用力、领导力等培训课程。奇舞团以开放和求贤的心态欢迎各种优秀人才关注和加入奇舞团。

42df106cfffaa80b83d3a16e1bdd5760.png

标签：
本文转载自: https://blog.csdn.net/qiwoo_weekly/article/details/141218924
版权归原作者 奇舞周刊 所有， 如有侵权，请联系我们删除。
登录后发布评论

“纯前端实现语音文字互转”的评论:

还没有评论
关于作者
...
overfit同步小助手
文章同步
相关阅读

WebPages 安全

工业生产安全-安全帽第二篇-用java语言看看opencv实现的目标检测使用过程

【项目日记】仿mudou的高并发服务器 --- 实现缓冲区模块，通用类型Any模块，套接字模块

在 X86_64(amd64) 平台上的docker支持打包跨平台的镜像(如arm64)

无需手动部署的正式版comfyUI是否就此收费？开源等同免费？

基于大数据的新闻推荐分析

WebAssembly (Wasm) 与 JavaScript 字符串交互

文章导航