你所不知道的HTML5——语音合成
你所不知道的HTML5——语音合成
前端能力的增强很大程度上依赖于 HTML5 的新 API,从这篇文章开始我也会对平时做不常用的一些 API 做一下学习总结 今天的文章就从语音合成开始
为什么想到这个 API 呢?
在写报告查资料的时候在 “人人都是产品经理”http://www.woshipm.com/ 上发现了一个有趣的功能(打了丑丑的马赛克)
听一下就会发现,播放出来的声音并不是预先录制好的音频资料,而是通过文字识别后合成的语音
那么我们如何在前端实现这样的功能呢?主角登场!
⚠️注意,这个 API 尚在草案阶段,并且在写 demo 的时候浏览器提示部分 API 可能将不被支持,所以本文中提到的解决方案不要用于产品中
语音合成超简单例子
请先戴上耳机,然后将下面的代码复制到chrome控制台中体验~
let msg = new SpeechSynthesisUtterance("欢迎你阅读我的博客");
window.speechSynthesis.speak(msg);
复制代码
看,前端实现语音合成并不难
今天的主角 Speech Synthesis API
通过上面的例子我们可以猜测到上面调用的两个方法的功能
SpeechSyntehesisUtteranc
用来构造一个可以被读出的“东西”window.speechSynthesis.speak
将构造好的“东西”读出来
当然了,语音合成不仅仅包含这两个API,but我们先从这两点入手
SpeechSyntehesisUtteranc
参考:developer.mozilla.org/en-US/docs/… SpeechSyntehesisUtteranc
对象包含了语音服务要读取的内容和一些参数,比如语言,音高和音量
- 首先我们可以通过
SpeechSyntehesisUtteranc()
构造函数构造一个对象 SpeechSynthesisUtterance.lang
语言SpeechSynthesisUtterance.pitch
音调SpeechSynthesisUtterance.rate
语速SpeechSynthesisUtterance.voice
语音SpeechSynthesisUtterance.volume
音量
注意: 以上属性都是 可读写 的! 可以把下面这段代码copy下来尝试一下,注释中会有说明
let msg = new SpeechSynthesisUtterance();
msg.text = "how are you" // 要合成的文本
msg.lang = "en-US" // 美式英语发音(默认自动选择)
msg.rate = 2 // 二倍速(默认为 1,范围 0.1~10)
msg.pitch = 2 // 高音调(数字越大越尖锐,默认为 1,范围 0~2 )
msg.volume = 0.5 // 音量 0.5 倍(默认为1,范围 0~1)
window.speechSynthesis.speak(msg);
复制代码
同时这个对象还可以响应一系列事件,可能会用到的:
start
开始阅读end
阅读结束boundary
到达单词或句子边界pause
暂停resume
从暂停中恢复
借助这些事件我们可以完成一些简单的功能,比如英文句子的单词数量统计:
let count = 0; // 词语数量
let msg = new SpeechSynthesisUtterance();
let synth = window.speechSynthesis;
msg.addEventListener('start',()=>{// 开始阅读console.log(`文本内容: ${msg.text}`);console.log("start");
});
msg.addEventListener('end',()=>{// 阅读结束console.log("end");console.log(`文本单词(词语)数量:${count}`);count = 0;
});
msg.addEventListener('boundary',()=>{// 统计单词count++;
});
复制代码
经过尝试,由于中文没有用空格将每个词语分开,所以会进行自动的识别,比如 欢迎读者
会被识别为 欢迎
和 读者
两个词语
SpeechSynthesis
参考:developer.mozilla.org/en-US/docs/…
说完了 SpeechSyntehesisUtteranc
我们再来看看 SpeechSynthesis
SpeechSynthesis
的主要作用是对语音进行一系列的控制,比如开始或者暂停
它有三个只读属性,表明了语音的状态:
SpeechSynthesis.paused
(boolean 是否处于暂停)SpeechSynthesis.pending
(boolean 是否处于还有未读语句)- SpeechSynthesis.speaking` (boolean 是否处于阅读中)
同时还有一系列方法用来操作语音:
SpeechSynthesis.speak()
开始读语音,同时触发start
事件SpeechSynthesis.pause()
暂停,同时触发pause
事件SpeechSynthesis.resume()
继续,同时触发resume
事件SpeechSynthesis.cancel()
取消阅读,同时触发end
事件
基于这些操作方法,我们可以进一步增强我们的文字阅读器:
回到最初的起点
让我们回到最初的起点,我们可以基于上面的内容猜测一下有些网站中,文章的自动阅读是怎么实现的
如果这个网站前端采用了 MVVM 框架(以 Vue 为例),那么文章内容是也许存储在 data 中,可以用来构造我们需要的语音合成
当然,也有可能文章是通过 ajax 请求得到的,解析请求的数据,构造语音合成对象
如果文章是直接在 html 中写死的,这个时候就需要对 DOM 进行解析,经过测试,即便是下面这样的混乱的结构
<div id="test"><p>1</p><p>2</p><ul><li>3</li><li>4</li></ul><table><tr><td>5</td><td>6</td></tr><tr><td>7</td><td>8</td></tr></table><img src="https://www.baidu.com/img/bd_logo1.png" alt="">9
</div>
复制代码
直接通过 innerText 读取其中的文本,然后构造语音合成对象,也能按照期望顺序阅读(图片会被忽略)
当然如果我们想要忽略一些特殊的结构,比如表格,我们可以花一些精力在解析上,把我们不想要的数据或者 DOM 元素筛掉
不管怎样,我们都能找到合适的解决方案~
闲话
这个特性,是一个还在草案中的特性,没有被广泛支持
再次强调,这个 API 暂时还不能应用到生产环境中
目前比较通用的做法是在后端构造将文本合成成语音文件的 API(也许是第三方 API),然后在前端作为媒体播放
曾经在我迷茫的时候,我去阅读一些大牛的文章,读到一些前辈对前端开发的思考。其中有一点令我印象深刻:
前端是最贴近用户的,一切要从用户的的角度考虑,无障碍使用也是一个很重要的课题。虽然做这样的功能带来的收益远远小于其他业务,但是为了让产品更好的服务用户,多付出一些劳动也是值得的,这也是前端开发的一种精神
本文同步发布于我的个人博客,CSDN,掘金
如果有什么问题,意见,建议欢迎评论;如果觉得我写的不错,那就点个赞吧~
完整demo
转载于:https://juejin.im/post/5cdc191b518825796d63ef1f
你所不知道的HTML5——语音合成相关推荐
- 你所不知道的setTimeout
JavaScript提供定时执行代码的功能,叫做定时器(timer),主要由setTimeout()和setInterval()这两个函数来完成.它们向任务队列添加定时任务.初始接触它的人都觉得好简单 ...
- 那些你所不知道的arXiv使用技巧
作者:Tom Hardy Date:2020-12-23 来源:那些你所不知道的arXiv使用技巧
- 系统调优,你所不知道的TIME_WAIT和CLOSE_WAIT
https://my.oschina.net/fdhay/blog/638631 高性能网络 | 你所不知道的TIME_WAIT和CLOSE_WAIT 2016-02-18 大房 大房说 本文是我将最 ...
- ai的弹窗点了都不响应_【评价集合】拼多多评价,你所不知道的点都在这里!...
对于在拼多多开店的商家们来说,评价是消费者对于商品的好坏程度的一个评分,评价的高低不仅仅会影响到商品的销量,更会影响转化率以及权重!所以为了店铺商品的长远发展打算!各位商家在求取出评.好评的道路上不断 ...
- python 函数调用 不允许关键字参数_你所不知道的Python|函数参数的演进之路
原标题:你所不知道的Python|函数参数的演进之路 函数参数处理机制是Python中一个非常重要的知识点,随着Python的演进,参数处理机制的灵活性和丰富性也在不断增加,使得我们不仅可以写出简化的 ...
- 你所不知道的日志异步落库
https://www.cnblogs.com/scy251147/p/9193075.html 在互联网设计架构过程中,日志异步落库,俨然已经是高并发环节中不可缺少的一环.为什么说是高并发环节中不可 ...
- 被低估的css滤镜,你所不知道的 CSS 滤镜技巧与细节
本文主要介绍 CSS 滤镜的不常用用法,希望能给读者带来一些干货! 系列 CSS 文章汇总在我的 Github ,持续更新,欢迎点个 star 订阅收藏. OK,下面直接进入正文.本文所描述的滤镜,指 ...
- 国际计算机思维比赛,少儿编程领域中,你所不知道的国际计算思维大赛
原标题:少儿编程领域中,你所不知道的国际计算思维大赛 孩子学习编程,除了培养编程思维和计算思维,也能为未来应对人工智能时代打下基础.今天给大家讲的的是Bebras国际计算思维大赛,请大家持续关注坚果学 ...
- 计算机键盘标注,你所不知道的 Windows 10 小诀窍:万能计算器、虚拟键盘、屏幕截图标注...
原标题:你所不知道的 Windows 10 小诀窍:万能计算器.虚拟键盘.屏幕截图标注 Windows 10 里面有许多好用的小功能,只是藏得很深,平常你不一定会发现它,又或者可能是并没有特别标注出来 ...
最新文章
- python虚拟环境的目录是啥_Python 虚拟环境
- Codevs 2756 树上的路径
- css3文档手册chm_你还在使用CHM帮助文档吗?赶快试试Baklib吧
- JavaScript不用临时变量交换两个变量的值的七种解决方案
- 安装visio2019Pro提示报错“0xC004F017“具体解决办法
- Java数组对象排序
- location.hostnbsp;与nbsp;locat…
- 鼠标指针乱跑的解决方案
- 苦涩的 高考完了,有没有给自己一个目标
- PowerBI-日期和时间函数-YEAR\QUARTER\MONTH\DAY
- 针对网站被劫持,我们应该如何处理
- react-native android打包失败: GC overhead limit exceeded
- 明日之后服务器维修公告维修,《明日之后》排队问题维护进度公告
- pvsyst 7.1使用教程
- 远控杂说---总有一款适合你
- 关于表征学习(Representation Learning)的浅显理解
- MATLAB 语言基础知识 矩阵和数组 创建、串联和扩展矩阵
- mybatis ognl表达式
- 掌上单片机实验室 - 实现运动功能(10)
- String类学习后练手的基础小练习