前端开发中基于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();
});
相关文章:
前端开发中基于Web Speech API(speechSynthesis接口)实现文字转语音功能
文章目录 一、Web Speech 的概念及用法二、Web Speech 的 API 接口1、SpeechSynthesis属性方法 2、SpeechSynthesisUtterance属性方法 三、Web Speech 的 用法用法演示一用法演示二htmljs 四、扩展 一、Web Speech 的概念及用法 在开发业务系统时,有时候可能需要使…...
C++核心编程之通过类和对象的思想对文件进行操作
目录 一、文件操作 1. 文件类型分类: 2. 操作文件的三大类 二、文本文件 1.写文件 2.读文件 三、二进制文件 1.写二进制文件 2.读二进制文件 一、文件操作 程序运行时产生的数据都属于临时数据,程序一旦运行结束都会被释放 通过文件可以将…...
Verilog语法——4.Verilog工程模板、相应规范再强调
参考资料 【明德扬_verilog零基础入门语法HDL仿真快速掌握-手把手教你写FPGA/ASIC代码设计流程中的应用】 4. Verilog工程模板、相应规范 4.1 Verilog工程模板 4.1.1 设计模块模板 module module_name(clk,rst_n,//其他信号,举例doutdout };//参数定义parameter …...
CNN:Convolutional Neural Network(下)
目录 1 CNN 学到的是什么 1.1 Convolution 中的参数 1.2 FFN 中的参数 1.3 Output 2 Deep Dream 3 Deep Style 4 More Application 4.1 AlphaGo 4.2 Speech 4.3 Text 原视频:李宏毅 2020:Convolutional Neural Network 本博客属于学…...
FPGA时序分析与时序约束(四)——时序例外约束
目录 一、时序例外约束 1.1 为什么需要时序例外约束 1.2 时序例外约束分类 二、多周期约束 2.1 多周期约束语法 2.2 同频同相时钟的多周期约束 2.3 同频异相时钟的多周期约束 2.4 慢时钟域到快时钟域的多周期约束 2.5 快时钟域到慢时钟域的多周期约束 三、虚假路径约…...
无需任何三方库,在 Next.js 项目在线预览 PDF 文件
前言: 之前在使用Vue和其它框架的时候,预览 PDF 都是使用的 PDFObject 这个库,步骤是:下载依赖,然后手动封装一个 PDF 预览组件,这个组件接收本地或在线的pdf地址,然后在页面中使用组件的车时候…...
排序问题——晴问题库
排序问题——晴问题库 排序问题是线性数据的常考问题,在解晴问题库时总结归纳以下关于排序的解题方法和思路。 感谢晴神 排序问题是数据结构中十分重点的一部分。 可以分为五个大部分: 插入排序选择排序交换排序基数归并 再具体往下分: 插…...
【LabVIEW FPGA入门】FPGA中的数学运算
数值控件选板上的大部分数学函数都支持整数或定点数据类型,但是需要请注意,避免使用乘法、除法、倒数、平方根等函数,此类函数比较占用FPGA资源,且如果使用的是定点数据或单精度浮点数据仅适用于FPGA终端。 1.整数运算 支持的数…...
华为设备VRRP配置
核心代码: 需要对所有虚拟路由器设置(要进入到对应的端口) vrrp vrid 38 virtual-ip 192.168.10.254 vrrp vrid 38 priority 120 vrrp vrid 38 track int g0/0/1 reduced 30①mac由vrid生成 ②指定虚拟ip ③虚拟ip作为内部主机的网关&#x…...
2024年艺术发展与文化产业国际会议(ICADCI 2024)
2024年艺术发展与文化产业国际会议(ICADCI 2024) 2024 International Conference on Art Development and Cultural Industry(ICADCI 2024) 数据库:EI,CPCI,CNKI,Google Scholar等 一、【会议简介】 2024年艺术发展与文化产业国际会议(ICADCI 2024)将于丽江这座美丽…...
华为手表开发:WATCH 3 Pro(10)获取心率_java 华为手表获取心跳
华为手表开发:WATCH 3 Pro(10)获取心率_java 华为手表获取心跳 Excerpt 文章浏览阅读1.2k次。鸿蒙开发,获取手表心跳,按钮点击后触发的方法,我们将跳转页面的代码写在这个位置就可以实现点击按钮进行跳转页面的动作。在HTML文件“index.hml”,添加按钮,这里按钮用到是标…...
使用企业订货软件的担忧与考虑|网上APP订货系统
使用企业订货软件的担忧与考虑|网上APP订货系统 网上订货系统担心出现的问题 1,如果在订货系统中定错(多)货物了该怎么办 其实这也是很多人在网购或者是现实中经常会犯的一个错误,但是网上订货平台为大家提供了很多的解决方案,其中对于订单的…...
Java-集合-Collection类
1 需求 2 接口 Interface Collection<E> public interface Collection<E> extends Iterable<E> 2.3 Method Detail int size()boolean isEmpty()boolean contains(Object o)Iterator<E> iterator()Object[] toArray()<T> T[] toArray(T[] a)…...
Linux:/proc/kmsg 与 /proc/sys/kernel/printk_xxx
目录 前言一、/proc/kmsg1、简介2、如何修改内核日志缓冲区3、dmesgklogctl 函数(来源于 man 手册) 4、扩展阅读 二、 /proc/sys/kernel/printk_xxx三、/dev/kmsg 前言 本篇文章将为大家介绍与 Linux 内核日志相关的一些控制文件,共同学习&am…...
使用 Postman 发送 get 请求的简易教程
在API开发与测试的场景中,Postman 是一种普遍应用的工具,它极大地简化了发送和接收HTTP请求的流程。要发出GET请求,用户只需设定正确的参数并点击发送即可。 如何使用 Postman 发送一个GET请求 创建一个新请求并将类型设为 GET 首先&#…...
【网站项目】基于jsp的拍卖网站设计与实现
🙊作者简介:多年一线开发工作经验,分享技术代码帮助学生学习,独立完成自己的项目或者毕业设计。 代码可以私聊博主获取。🌹赠送计算机毕业设计600个选题excel文件,帮助大学选题。赠送开题报告模板ÿ…...
为什么洗衣机会每天自动上传3.6GB数据?
“为什么我家的LG洗衣机每天都会上传3.6GB的数据?” 一位名为Johnie用户发现他家电设备的异常行为后表示很不理解,随后他把相关信息发布在X平台,很快这篇帖子就收获了超过1700万次的浏览量,并迅速变成一场争议和网络安全battle。…...
word写标书的疑难杂症总结
最近在解决方案工作,与office工具经常打交道,各种问题,在此最下记录: 1.word中文档距离文档顶端有距离调整不了 1.疑难杂症问题1,多个空格都是不能解决 #解决办法:word中--布局-下拉框---“版式”--“垂直…...
2024,会更好嘛?
2023转眼过去,从1月的前端,2月的java,3月的数据库,4月的运维,我尝试了许多技术方向,终究在2023年5月,凭着背的Java面试题,拿到了三四个offer。2023年6月,边玩边整自己的毕…...
Nsis打包Unity Exe文件(通用)
Nsi 脚本 !include "MUI2.nsh"#使用现代UI Unicode true #使用Unicode !define EXENAME "exeName" #定义常量 exe名称 !define SHORTCUT "快捷方式名称" #定义桌面快捷方式的中文名称Name ${EXENAME} #安装程序的title OutFile "${EXENAME…...
4步攻克Python代码执行可视化:开发者调试效率提升指南
4步攻克Python代码执行可视化:开发者调试效率提升指南 【免费下载链接】viztracer VizTracer is a low-overhead logging/debugging/profiling tool that can trace and visualize your python code execution. 项目地址: https://gitcode.com/gh_mirrors/vi/vizt…...
深度解析PDFMathTranslate:揭秘AI如何实现毫秒级学术文档翻译与精准排版保留
深度解析PDFMathTranslate:揭秘AI如何实现毫秒级学术文档翻译与精准排版保留 【免费下载链接】PDFMathTranslate PDF scientific paper translation with preserved formats - 基于 AI 完整保留排版的 PDF 文档全文双语翻译,支持 Google/DeepL/Ollama/Op…...
Qwen3.5-4B-Claude-Opus惊艳效果:编译原理词法分析器状态转换图生成
Qwen3.5-4B-Claude-Opus惊艳效果:编译原理词法分析器状态转换图生成 1. 模型能力展示:从代码到状态转换图 Qwen3.5-4B-Claude-4.6-Opus-Reasoning-Distilled-GGUF模型在编译原理领域展现了令人惊艳的代码理解与可视化能力。当输入词法分析器代码时&…...
3步打造高效Fortran开发环境:VSCode Modern Fortran扩展深度解析
3步打造高效Fortran开发环境:VSCode Modern Fortran扩展深度解析 【免费下载链接】vscode-fortran-support Fortran language support for Visual Studio Code 项目地址: https://gitcode.com/gh_mirrors/vs/vscode-fortran-support 在科学计算和高性能计算领…...
AgentCPM深度研报助手10分钟快速部署教程:基于CSDN星图GPU平台
AgentCPM深度研报助手10分钟快速部署教程:基于CSDN星图GPU平台 你是不是也遇到过这种情况?面对海量的行业报告、公司财报,想快速提炼核心观点,却感觉无从下手,或者需要花费大量时间手动整理。现在,有了AI助…...
MGeo门址解析应用场景:房产中介平台房源地址自动标准化与GIS热力图生成
MGeo门址解析应用场景:房产中介平台房源地址自动标准化与GIS热力图生成 1. 引言:房产中介的地址之痛 想象一下,你是一家房产中介公司的运营人员。每天,你的同事和合作方会通过各种渠道收集到成百上千条房源信息:有的…...
CosyVoice语音克隆应用案例:为短视频配音、制作个性化语音问候消息
CosyVoice语音克隆应用案例:为短视频配音、制作个性化语音问候消息 最近帮朋友做短视频账号,发现一个挺头疼的问题:每次拍完视频,找配音特别麻烦。要么自己录,口音重还费时间;要么用AI配音,声音…...
GraphRAG实战指南:12种技术对比,教你如何选择最适合的图结构RAG方案
GraphRAG技术选型实战:12种方案深度解析与场景适配指南 当传统RAG在简单问答场景中表现尚可时,面对需要多跳推理、深度上下文关联的复杂任务,GraphRAG正展现出独特优势。本文将从工程实践角度,拆解12种主流GraphRAG技术的核心差异…...
面向对象高级三:内部类 枚举 泛型 java.lang包下常用API
一.内部类1.内部类概述 2.成员内部类(实例内部类)(1)成员内部类可以定义类的一切成员(2)当创建对象时不能直接给内部类创建对象而要先创建外部类的对象 然后new成员内部类的对象(3)在…...
Llama-3.2V-11B-cot部署案例:中小企业低成本构建AI图文分析工作台
Llama-3.2V-11B-cot部署案例:中小企业低成本构建AI图文分析工作台 1. 项目概述 Llama-3.2V-11B-cot是基于Meta最新多模态大模型开发的专业级视觉推理工具,专为中小企业打造的低成本AI图文分析解决方案。该工具针对双卡RTX 4090环境进行了深度优化&…...
