前端开发实战:利用Web Speech API之speechSynthesis实现文字转语音功能

简介: 前端开发实战:利用Web Speech API之speechSynthesis实现文字转语音功能

一、Web Speech 的概念及用法

在开发业务系统时,有时候可能需要使用语音播报一段文字。

目前文字转语音即语音合成技术现在已经很成熟了,像百度、讯飞等都提供了相关的服务,支持将文字转换成各种形式的语音,通常这些服务都需要付费使用,如果对语音要求不高,并且又想节约成本,那么可以直接使用浏览器的语音合成功能。


Web Speech API 使你能够将语音数据合并到 Web 应用程序中。Web Speech API 有两个部分:SpeechSynthesis 语音合成(文本到语音 TTS)和 SpeechRecognition 语音识别(异步语音识别)。


SpeechSynthesisUtterance是HTML5中新增的API,用于将指定文字合成为对应的语音。它包含一些配置项,可以指定如何去阅读(如语言、音量、音调等)。


Web Speech API 使 Web 应用能够处理语音数据,该项 API 包含以下两个部分:

  • 语音识别通过 SpeechRecognition (en-US) 接口进行访问,它提供了识别从音频输入(通常是设备默认的语音识别服务)中识别语音情景的能力。一般来说,你将使用该接口的构造函数来构造一个新的 SpeechRecognition (en-US) 对象,该对象包含了一系列有效的对象处理函数来检测识别设备麦克风中的语音输入。SpeechGrammar 接口则表示了你应用中想要识别的特定文法。文法则通过 JSpeech Grammar Format (JSGF.) 来定义。


  • 语音合成通过 SpeechSynthesis 接口进行访问,它提供了文字到语音(TTS)的能力,这使得程序能够读出它们的文字内容(通常使用设备默认的语音合成器)。不同的声音类类型通过 SpeechSynthesisVoice (en-US) 对象进行表示,不同部分的文字则由 SpeechSynthesisUtterance (en-US) 对象来表示。你可以将它们传递给 SpeechSynthesis.speak() (en-US) 方法来产生语音。


二、Web Speech 的 API 接口

1、SpeechSynthesis

SpeechSynthesis是语音服务的控制接口;它可以用于获取设备上关于可用的合成声音的信息,开始、暂停语音,或除此之外的其他命令。

属性

SpeechSynthesis.paused 只读

当SpeechSynthesis 处于暂停状态时, Boolean 值返回 true 。


SpeechSynthesis.pending 只读

当语音播放队列到目前为止保持没有说完的语音时, Boolean 值返回 true 。


SpeechSynthesis.speaking 只读

当语音谈话正在进行的时候,即使SpeechSynthesis处于暂停状态, Boolean 返回 true 。


方法

SpeechSynthesis.cancel()

取消语音播放。


SpeechSynthesis.getVoices()

返回当前设备所有可用声音的 SpeechSynthesisVoice列表。


SpeechSynthesis.pause()

把 SpeechSynthesis 暂停语音播放。


SpeechSynthesis.resume()

把 SpeechSynthesis 对象置为一个非暂停状态:如果已经暂停了则继续。


SpeechSynthesis.speak()

添加语音到播放列队,将会在其他语音播放完后自动播放。

2、SpeechSynthesisUtterance

SpeechSynthesisUtterance 表示一次发音请求,其中包含了将由语音服务朗读的内容,以及如何朗读它(例如:语种、音高、音量)。


属性

lang:获取并设置话语的语言

pitch:获取并设置话语的音调(0-2,值越大越尖锐,越低越低沉)

rate:获取并设置说话的速度(0.1-10,值越大语速越快,越小语速越慢)

text:获取并设置说话时的文本

voice:获取并设置说话的声音(0-1)

volume:获取并设置说话的音量


方法

onboundary:当播放至一个词或句子结尾时触发

onend:语音播放结束时触发

onerror:语音播放错误时触发

onmark:当语音播放至 mark 标记时触发

onpause:暂停语音播放时触发

onresume:恢复语音播放时触发

onstart:开始语音播放时触发


三、Web Speech 的 用法

用法演示一
let synth = window.speechSynthesis;
let utterThis = new SpeechSynthesisUtterance('支付宝到账5元');
synth.speak(utterThis);
用法演示二
html
<input type="text" name="text" id="text">
<button onclick="startAudio()">播放语音</button>
js
function startAudio() {
  // 检查浏览器是否支持Web Speech API  
  if ('speechSynthesis' in window) {  
      let input = document.getElementById('text')
    // 创建一个新的SpeechSynthesisUtterance对象 
      let msg = new SpeechSynthesisUtterance(input.value)
      msg.volume = 5 //音量
      msg.rate = 1 //语速
      msg.text = input.value //文字
      speechSynthesis.speak(msg) //播放语音
  } else {  
      console.error('浏览器不支持Web Speech API');  
  }
}

这个示例会使用默认的语音合成引擎(如果有的话)将"输入框的内容"转换为语音。如果浏览器支持Web Speech API,你应该能够听到这句话被读出来。如果浏览器不支持Web Speech API,这个示例会在控制台输出一条错误消息。


四、扩展

除了使用Web Speech API之外,还有使用第三方文字转语音(TTS)库的方法,例如使用百度文字转语音开放API或iSpeech TTS引擎。

使用百度文字转语音开放API的方法需要调用其提供的接口,传入要转换的文字,并设置语言、语速等参数。使用iSpeech TTS引擎则需要引入相应的JavaScript库,并使用其提供的API将文字转换为语音。


此外,还可以使用浏览器自带的语音助手或插件来实现文字转语音的功能,例如Siri、Alexa等。这些工具通常需要用户进行一些设置和配置,以便能够正确地将文字转换为语音。

百度文字转语音开放API的调用示例代码如下:

var text = '你好,世界!'; // 要转换为语音的文本  
var apikey = '你的API密钥'; // 百度提供的API密钥  
  
var params = {  
    text: text,  
    apikey: apikey,  
    engine: 'paddle', // 选择语音合成引擎,支持'paddle'和'deepizone'两种引擎  
    voice: 'zh_cn', // 选择语音类型,支持'zh_cn'和'en'两种类型  
    speed: 5, // 语速,取值范围为0-10,数字越大语速越快  
    vol: 5, // 音量,取值范围为0-10,数字越大音量越大  
    per: 0 // 音色,取值范围为0-19,不同数字代表不同音色  
};  
  
var url = 'http://tts.baidu.com/text2audio?' + $.param(params); // 将参数拼接成URL  
$.get(url, function(response) { // 发送GET请求获取语音数据  
    var audio = new Audio(response); // 创建Audio对象并播放语音  
    audio.play();  
});
相关实践学习
达摩院智能语音交互 - 声纹识别技术
声纹识别是基于每个发音人的发音器官构造不同,识别当前发音人的身份。按照任务具体分为两种: 声纹辨认:从说话人集合中判别出测试语音所属的说话人,为多选一的问题 声纹确认:判断测试语音是否由目标说话人所说,是二选一的问题(是或者不是) 按照应用具体分为两种: 文本相关:要求使用者重复指定的话语,通常包含与训练信息相同的文本(精度较高,适合当前应用模式) 文本无关:对使用者发音内容和语言没有要求,受信道环境影响比较大,精度不高 本课程主要介绍声纹识别的原型技术、系统架构及应用案例等。 讲师介绍: 郑斯奇,达摩院算法专家,毕业于美国哈佛大学,研究方向包括声纹识别、性别、年龄、语种识别等。致力于推动端侧声纹与个性化技术的研究和大规模应用。
目录
相关文章
|
11天前
|
存储 前端开发 JavaScript
前端状态管理:Vuex 核心概念与实战
Vuex 是 Vue.js 应用程序的状态管理模式和库。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。本教程将深入讲解 Vuex 的核心概念,如 State、Getter、Mutation 和 Action,并通过实战案例帮助开发者掌握在项目中有效使用 Vuex 的技巧。
|
23天前
|
消息中间件 前端开发 JavaScript
探索微前端架构:构建现代Web应用的新策略
本文探讨了微前端架构的概念、优势及实施策略,旨在解决传统单体应用难以快速迭代和团队协作的问题。微前端允许不同团队独立开发、部署应用的各部分,提升灵活性与可维护性。文中还讨论了技术栈灵活性、独立部署、团队自治等优势,并提出了定义清晰接口、使用Web组件、状态管理和样式隔离等实施策略。
|
24天前
|
Web App开发 缓存 监控
前端性能优化实战:从代码到部署的全面策略
前端性能优化实战:从代码到部署的全面策略
21 1
|
24天前
|
Web App开发 前端开发 JavaScript
前端性能优化实战:从代码到部署的全面指南
前端性能优化实战:从代码到部署的全面指南
25 1
|
28天前
|
XML 数据可视化 API
商品详情数据实战案例,API接口系列
淘宝商品详情数据在电商领域具有广泛的应用价值,而淘宝商品详情API接口则为开发者提供了获取这些数据的重要途径。通过合理利用这些接口和数据,可以提升业务效率、优化用户体验,为电商行业的发展注入新的活力。
|
29天前
|
缓存 前端开发 搜索推荐
前端性能优化实战:提升网页加载速度
前端性能优化实战:提升网页加载速度
|
22天前
|
缓存 监控 前端开发
前端性能优化实战:从加载速度到用户体验
前端性能优化实战:从加载速度到用户体验
|
23天前
|
JSON API 开发者
微店(Weidian)商品详情API接口解析实战
微店(Weidian)是一个基于社交关系的电商平台,为商家提供了一整套的电商解决方案。微店API接口允许开发者通过编程方式访问和操作微店平台上的数据,从而可以创建自动化的工具、应用或集成服务。
|
2月前
|
XML JSON API
ServiceStack:不仅仅是一个高性能Web API和微服务框架,更是一站式解决方案——深入解析其多协议支持及简便开发流程,带您体验前所未有的.NET开发效率革命
【10月更文挑战第9天】ServiceStack 是一个高性能的 Web API 和微服务框架,支持 JSON、XML、CSV 等多种数据格式。它简化了 .NET 应用的开发流程,提供了直观的 RESTful 服务构建方式。ServiceStack 支持高并发请求和复杂业务逻辑,安装简单,通过 NuGet 包管理器即可快速集成。示例代码展示了如何创建一个返回当前日期的简单服务,包括定义请求和响应 DTO、实现服务逻辑、配置路由和宿主。ServiceStack 还支持 WebSocket、SignalR 等实时通信协议,具备自动验证、自动过滤器等丰富功能,适合快速搭建高性能、可扩展的服务端应用。
147 3
|
1月前
|
设计模式 前端开发 数据库
Python Web开发:Django框架下的全栈开发实战
【10月更文挑战第27天】本文介绍了Django框架在Python Web开发中的应用,涵盖了Django与Flask等框架的比较、项目结构、模型、视图、模板和URL配置等内容,并展示了实际代码示例,帮助读者快速掌握Django全栈开发的核心技术。
157 45