文字转语音+html5,鲜为人知的HTML5语音合成功能
听一下就会发现,播放出来的声音并不是预先录制好的音频资料,而是通过文字识别后合成的语音
请先戴上耳机,然后将下面的代码复制到chrome控制台中体验~
let msg = new SpeechSynthesisUtterance("欢迎你阅读我的博客");
window.speechSynthesis.speak(msg);
看,前端实现语音合成并不难
今天的主角 Speech Synthesis API
通过上面的例子我们可以猜测到上面调用的两个方法的功能
SpeechSyntehesisUtteranc
window.speechSynthesis.speak
当然了,语音合成不仅仅包含这两个API,but我们先从这两点入手
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
说完了 SpeechSyntehesisUtteranc 我们再来看看 SpeechSynthesis
SpeechSynthesis 的主要作用是对语音进行一系列的控制,比如开始或者暂停
它有三个只读属性,表明了语音的状态:
SpeechSynthesis.paused
SpeechSynthesis.pending
同时还有一系列方法用来操作语音:
•SpeechSynthesis.speak() 开始读语音,同时触发 start 事件
•SpeechSynthesis.pause() 暂停,同时触发 pause 事件
•SpeechSynthesis.resume() 继续,同时触发 resume 事件
•SpeechSynthesis.cancel() 取消阅读,同时触发 end 事件
基于这些操作方法,我们可以进一步增强我们的文字阅读器:
回到最初的起点
让我们回到最初的起点,我们可以基于上面的内容猜测一下有些网站中,文章的自动阅读是怎么实现的
如果这个网站前端采用了 MVVM 框架(以 Vue 为例),那么文章内容是也许存储在 data 中,可以用来构造我们需要的语音合成
当然,也有可能文章是通过 ajax 请求得到的,解析请求的数据,构造语音合成对象
如果文章是直接在 html 中写死的,这个时候就需要对 DOM 进行解析,经过测试,即便是下面这样的混乱的结构
1
2
- 3
- 4
5 | 6 |
7 | 8 |
9
直接通过 innerText 读取其中的文本,然后构造语音合成对象,也能按照期望顺序阅读(图片会被忽略)
当然如果我们想要忽略一些特殊的结构,比如表格,我们可以花一些精力在解析上,把我们不想要的数据或者 DOM 元素筛掉
不管怎样,我们都能找到合适的解决方案~
闲话
这个特性,是一个还在草案中的特性,没有被广泛支持
再次强调,这个 API 暂时还不能应用到生产环境中
目前比较通用的做法是在后端构造将文本合成成语音文件的 API(也许是第三方 API),然后在前端作为媒体播放
曾经在我迷茫的时候,我去阅读一些大牛的文章,读到一些前辈对前端开发的思考。其中有一点令我印象深刻:
前端是最贴近用户的,一切要从用户的的角度考虑,无障碍使用也是一个很重要的课题。虽然做这样的功能带来的收益远远小于其他业务,但是为了让产品更好的服务用户,多付出一些劳动也是值得的,这也是前端开发的一种精神
总结
以上所述是小编给大家介绍的鲜为人知的HTML5语音合成功能,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!
文字转语音+html5,鲜为人知的HTML5语音合成功能相关推荐
- Android之讯飞语音-文字转语音(不用另外安装语音合成包apk)遇到的问题
Android之讯飞语音-文字转语音 <!-- 文章内容 --><div data-note-content="" class="show-conten ...
- azure微软文字转语音小工具V1.3.2(ai智能配音,目前最好用)的使用说明和下载
概括: azure微软文字转语音小工具是调用azure服务器的程序,可能是目前最好用的配音软件.其配音效果几乎与真人没有区别(非常仔细听可能有些许区别). 拥有12种热门配音声音,4男8女,可调整多种 ...
- 怎么让文字变成语音?如何将文字自动生成语音?
文字转语音怎么弄?如果不想用自己声音做音频,可以使用压缩视频网-文字合成语音https://www.yasuoshipin.com/make功能,简单好操作,语音合成的方法一起来看一下吧. 点击工具栏 ...
- 收藏这三种文字转语音朗读的方法
我们在日常生活中,有时候会需要将文字转成语音的操作,那你们知道它如何做的吗?该功能是指将文本转换为能听得懂的人工语音的过程,它通常使用计算机语音合成技术来实现.也就 ...
- php文字转语音amr,如何将文字转成语音?这几个方法一分钟搞定!
原标题:如何将文字转成语音?这几个方法一分钟搞定! 文字转语音在我们的生活中已经广泛使用了,早晨起床想要看看新闻,但是又无奈时间不够,这时不必慌张,想要了解新闻事件,我们直接把这些文字转为语音,随时随 ...
- 有什么软件可以把文字变成语音?声音多点更好了
文字转语音用到就是AI智能功能,基于深度的学习技术,给用户提供了流畅.自然的发音服务.很多用户在线使用传统的配音工具时,经常遇到发音机械.选择主播有限.广告众多等各种缺点.选择知意配音的优点实在太多了 ...
- 好物推荐:文字转语音朗读软件哪个好?
不知道大家有没有像我一样的,对"语音播放"."语音朗读"是又爱又恨的.有时工作繁忙,而同事或客户发来语音资料需要整理时,就会很烦躁,因为语音的整理起来比文字的繁 ...
- 免费文字转语音软件有哪些?这几款宝藏工具你值得拥有
身为一名学生,每天都有做不完的题和背不完的知识,因此很多学生恨不得每天24小时都花在学习上.有些学生还为此想了很多方法,将时间安排的明明白白的.例如在等车坐车时,会将事先准备好的知识点语音拿出来学习或 ...
- 文字转语音+html5,JS实现文字转语音并播放
html: div> audio> div> js: function doTTS() { var ttsDiv = document.getElementById('bdtts_d ...
最新文章
- python 高阶函数
- 严蔚敏《数据结构》C语言版 第三章 算法3.4 表达式求值
- 用EDTS8对“吊死”用户进行自动释放
- java启动监听器报错_JAVA通过JDBC连接Oracle数据库详解【转载】
- Elasticsearch 简介入门
- 分页地址的地址结构怎么理解?
- Promise编程基础
- es大量数据导入效率优化
- (入门)keystonejs入门教程之环境搭建
- HP计算机管理软件,HP Power Assistant
- AKM e-compass获取G-sensor的方法
- 只要7步,就能将任何魔方6面还原(留着以后教孩子玩
- 网课题库系统公众号功能
- 将数据源的数据格式化显示,加上金额符号
- [html5游戏开发]数独游戏-完整算法-开源讲座
- XYplorer的安装和使用
- Linux - 系统安装
- 「星火计划沙龙视频」腾讯Caelus在离线混合部署方案揭秘
- python绝技:运用python成为顶级黑客
- canal 记录 数据变更类型 QUERY ROWDATA INSERT xxx XXXXX
热门文章
- 通过英雄联盟塞拉斯大招学习策略模式和命令模式
- Java父亲节贺卡,父亲节贺卡内容怎么写?
- python搜题手机软件_智慧职教APPPython程序设计基础答案搜题公众号
- Senparc.Weixin.MP SDK 微信公众平台开发教程(二十二):如何安装 Nuget(dll) 后使用项目源代码调试...
- rx580和gtx1060哪个好
- input type所有功能
- 微信营销三(四件套:昵称、头像、微信号、个性签名)
- 关于今天参观了世界机器人大会的一些感想
- AVPictureInPictureController(iPad画中画)
- 上司问你“对进步有何想法?”别说“感谢领导”,高手都这样说