前端开发中基于Web Speech API(speechSynthesis接口)实现文字转语音功能

文章目录

      • 一、Web Speech 的概念及用法
      • 二、Web Speech 的 API 接口
        • 1、SpeechSynthesis
          • 属性
          • 方法
        • 2、SpeechSynthesisUtterance
          • 属性
          • 方法
      • 三、Web Speech 的 用法
        • 用法演示一
        • 用法演示二
          • html
          • js
      • 四、扩展

一、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();  
});

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/703669.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

基于SpringBoot+Apache ECharts的前后端分离外卖项目-苍穹外卖(十八)

数据展示 1. Apache ECharts1.1 介绍1.2 入门案例 2. 营业额统计2.1 需求分析和设计2.1.1 产品原型2.1.2 接口设计 2.2 代码开发2.2.1 VO设计2.2.2 Controller层2.2.3 Service层接口2.2.4 Service层实现类2.2.5 Mapper层 2.3 功能测试 3. 用户统计3.1 需求分析和设计3.1.1 产品…

chrome闪退后打不开问题 打开立即闪退

今天刚遇到&#xff0c;大概率是某些网站引起的闪退&#xff0c;重启和清理也不能解决问题 网上到处都是答非所问&#xff0c;还有什么打开chrome再进行设置这种回答 在此解决下 注意该方法根据我测试&#xff0c;唯一会损失的是chrome扩展&#xff0c;可以提前去 C:\Users…

【人脸朝向识别与分类预测】基于PNN神经网络

课题名称&#xff1a;基于PNN神经网络的人脸朝向识别分类 版本日期&#xff1a;2024-02-20 运行方式&#xff1a;直接运行PNN0503.m文件 代码获取方式&#xff1a;私信博主或 QQ:491052175 模型描述&#xff1a; 采集到一组人脸朝向不同角度时的图像&#xff0c;图像来自不…

【Spring】事务总结

目录 1. 什么是事务&#xff1f; 2. 事务的特性&#xff08;ACID&#xff09;了解么? 3. 详谈 Spring 对事务的支持 3.1. Spring 支持两种方式的事务管理 1).编程式事务管理 2)声明式事务管理 3.2. Spring 事务管理接口介绍 3.2.1. PlatformTransactionManager:事务管理…

投资黄金在哪里买比较好?

黄金&#xff0c;作为一种传统的避险资产&#xff0c;历来受到投资者的青睐。在全球经济波动的大背景下&#xff0c;黄金的价值愈发凸显。那么&#xff0c;投资黄金在哪里买比较好呢&#xff1f;本文将重点探讨在香港黄金平台投资黄金的优势&#xff0c;并以金田金业为例&#…

C++面试基础:如何高效利用CPU缓存

目录 局部性原理(Locality Principle) 数据结构的布局 缓存友好的算法 缓存大小和关联性 避免随机访问 使用缓存友好的数据结构 总结 高效利用CPU缓存是编写高性能C代码的关键之一。以下是一些在面试中可能会讨论到的方法。 局部性原理(Locality Principle) 时间局部性…

Powershell中conda init失效、无法使用conda activate的问题

起因 近期折腾了一下Windows Terminal&#xff0c;安装配置了Powershell 7.3&#xff0c;然后发现conda activate在Powershell中用不了了&#xff0c;conda init powershell不起作用&#xff0c;conda init cmd.exe没有问题 分析 因为powershell的profile.ps1文件路径中存在…

ELK 简介安装

1、概念介绍 日志介绍 日志就是程序产生的&#xff0c;遵循一定格式&#xff08;通常包含时间戳&#xff09;的文本数据。 通常日志由服务器生成&#xff0c;输出到不同的文件中&#xff0c;一般会有系统日志、 应用日志、安全日志。这些日志分散地存储在不同的机器上。 日志…

网络层的DDoS攻击与应用层的DDoS攻击之间的区别

DDoS攻击&#xff08;即“分布是拒绝服务攻击”&#xff09;&#xff0c;是基于DoS的特殊形式的拒绝服务攻击&#xff0c;是一种分布式、协作的大规模攻击方式&#xff0c;主要瞄准一些企业或政府部门的网站发起攻击。根据攻击原理和方式的区别&#xff0c;可以把DDoS攻击分为两…

The Grapes NFT 概览与数据分析

作者&#xff1a;stellafootprint.network 编译&#xff1a;cicifootprint.network 数据源&#xff1a;The Grapes NFT Collection Dashboard The Grapes 是一个有趣且具有吸引力的 NFT 收藏集合&#xff0c;包含 3,333 个精心制作的 NFT。这个 NFT 项目会在 2024 年再创高…

linux僵尸进程

僵尸进程&#xff08;Zombie Process&#xff09;是指在一个进程终止时&#xff0c;其父进程尚未调用wait()或waitpid()函数来获取该进程的终止状态信息&#xff0c;导致进程的资源&#xff08;如进程表中的记录&#xff09;仍然保留在系统中的一种状态。 当一个进程结束时&am…

GO数组解密:从基础到高阶全解

在本文中&#xff0c;我们深入探讨了Go语言中数组的各个方面。从基础概念、常规操作&#xff0c;到高级技巧和特殊操作&#xff0c;我们通过清晰的解释和具体的Go代码示例为读者提供了全面的指南。无论您是初学者还是经验丰富的开发者&#xff0c;这篇文章都将助您更深入地理解…

css美化网页元素

1.span标签的作用 能让某个文字或词语凸显出来 2.字体样式 属性 含义 示例 font-family 设置字体类型 font-family:"隶书"; font-size 设置字体大小 font-size:12px; font-style 设置字体风格 font-style:italic; font-weight 设置字体的粗细 font-we…

java使用Swagger文档报错“java.lang.NullPointerException: null”

java使用Swagger文档报错 一、问题二、解决1、报错2、源码3、方法 一、问题 java项目引入Swagger文档&#xff0c;后期因为一些原因导致Swagger文档不能使用&#xff0c;但是不影响项目运行和正常使用&#xff0c;但每次启动都会报错。 原因有可能是&#xff1a; 1、一个实体类…

手写myscrapy(八)

项目地址&#xff1a;https://gitee.com/wyu_001/myscrapy 接下来接着说明如何多线程运行多个爬虫脚本&#xff1a; 项目的根目录下有个batch.py文件&#xff0c;这个就是批量运行多个爬虫的脚本&#xff0c;这里使用了线程池&#xff0c;同时运行spider下的多个爬虫类&#xf…

编程笔记 Golang基础 038 并发与原子变量

编程笔记 Golang基础 038 并发与原子变量 一、原子操作&#xff08;Atomic Operation&#xff09;二、原子变量三、应用示例 在 Go 语言&#xff08;Golang&#xff09;的并发编程中&#xff0c;原子变量是用于确保多线程安全的重要工具。当多个 Goroutine 并发访问和修改同一变…

【HMAC-SHA1算法以及工作原理】

曾梦想执剑走天涯&#xff0c;我是程序猿【AK】 目录 简述概要知识图谱总结 简述概要 连接HMAC-SHA1工作原理以及工具代码 知识图谱 HMAC&#xff08;Hash-based Message Authentication Code&#xff0c;基于散列的消息认证码&#xff09;是一种结合了密钥和消息的认证方法…

刚拿到的《HarmonyOS应用开发者高级认证》,全网整理的题目,将近300题,100%通过

刚拿到《HarmonyOS应用开发者高级认证》&#xff0c;现在把题目和答案分享一下&#xff0c;这些题目是我根据其他网站整理的&#xff0c;宁滥勿缺&#xff0c;有个别题目是重复的&#xff0c;抽半天时间看一下&#xff0c;应该是稳过的。当然建议还是先跟着文档学一下鸿蒙或者看…

Centos 7.5 上nginx设置开机自启动

nginx的安装目录 &#xff1a; /usr/local/nginx 一、没有设置开机自启动前&#xff0c;需要执行/usr/local/nginx/sbin/nginx 启动 二、接下来&#xff0c;我们设置开机自启动&#xff0c;就不用手动启动nginx了 1、cd /usr/lib/systemd/system/ 2、vi nginx.service [un…

如何在Win系统搭建Oracle数据库并实现远程访问【内网穿透】

文章目录 前言1. 数据库搭建2. 内网穿透2.1 安装cpolar内网穿透2.2 创建隧道映射 3. 公网远程访问4. 配置固定TCP端口地址4.1 保留一个固定的公网TCP端口地址4.2 配置固定公网TCP端口地址4.3 测试使用固定TCP端口地址远程Oracle 前言 Oracle&#xff0c;是甲骨文公司的一款关系…