鲜为人知的HTML5语音合成功能


Posted in HTML / CSS onMay 17, 2019

听一下就会发现,播放出来的声音并不是预先录制好的音频资料,而是通过文字识别后合成的语音

请先戴上耳机,然后将下面的代码复制到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

借助这些事件我们可以完成一些简单的功能,比如英文句子的单词数量统计:

鲜为人知的HTML5语音合成功能

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
SpeechSynthesis.pending

同时还有一系列方法用来操作语音:

•SpeechSynthesis.speak() 开始读语音,同时触发 start 事件
•SpeechSynthesis.pause() 暂停,同时触发 pause 事件
•SpeechSynthesis.resume() 继续,同时触发 resume 事件
•SpeechSynthesis.cancel() 取消阅读,同时触发 end 事件

基于这些操作方法,我们可以进一步增强我们的文字阅读器:

鲜为人知的HTML5语音合成功能

回到最初的起点

让我们回到最初的起点,我们可以基于上面的内容猜测一下有些网站中,文章的自动阅读是怎么实现的

如果这个网站前端采用了 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),然后在前端作为媒体播放

曾经在我迷茫的时候,我去阅读一些大牛的文章,读到一些前辈对前端开发的思考。其中有一点令我印象深刻:

前端是最贴近用户的,一切要从用户的的角度考虑,无障碍使用也是一个很重要的课题。虽然做这样的功能带来的收益远远小于其他业务,但是为了让产品更好的服务用户,多付出一些劳动也是值得的,这也是前端开发的一种精神
 

总结

以上所述是小编给大家介绍的鲜为人知的HTML5语音合成功能,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

HTML / CSS 相关文章推荐
CSS3美化表单控件全集
Jun 29 HTML / CSS
CSS3的新特性介绍
Oct 31 HTML / CSS
html5 跨文档消息传输示例探讨
Apr 01 HTML / CSS
HTML5+CSS3实现拖放(Drag and Drop)示例
Jul 07 HTML / CSS
探讨HTML5移动开发的几大特性(必看)
Dec 30 HTML / CSS
HTML5新特性之语义化标签
Oct 31 HTML / CSS
HTML5 视频播放(video),JavaScript控制视频的实例代码
Oct 08 HTML / CSS
Html5 Canvas动画基础碰撞检测的实现
Dec 06 HTML / CSS
高清屏中使用Canvas绘图出现模糊的问题及解决方法
Jun 03 HTML / CSS
HTML5超炫酷粒子效果的进度条的实现示例
Aug 23 HTML / CSS
video实现有声音自动播放的实现方法
May 20 HTML / CSS
HTML5在微信内置浏览器下右上角菜单的调整字体导致页面显示错乱的问题
Jan 19 HTML / CSS
Html5内唤醒百度、高德APP的实现示例
May 20 #HTML / CSS
socket.io 和canvas 实现的共享画板功能
May 22 #HTML / CSS
Canvas 文字碰撞检测并抽稀的方法
May 27 #HTML / CSS
利用canvas实现图片下载功能来实现浏览器兼容问题
May 31 #HTML / CSS
HTML5印章绘制电子签章图片(中文英文椭圆章、中文英文椭圆印章)
Jun 03 #HTML / CSS
详解利用canvas实现环形进度条的方法
Jun 12 #HTML / CSS
Html5 实现微信分享及自定义内容的流程
Aug 20 #HTML / CSS
You might like
用PHP函数解决SQL injection
2006/12/09 PHP
基于initPHP的框架介绍
2013/04/18 PHP
JavaScript与HTML结合的基本使用方法整理
2015/10/12 PHP
php制作基于xml的RSS订阅源功能示例
2017/02/08 PHP
php根据地址获取百度地图经纬度的实例方法
2019/09/03 PHP
PHP中的异常处理机制深入讲解
2020/11/10 PHP
jQuery对象和DOM对象相互转化
2009/04/24 Javascript
很棒的学习jQuery的12个网站推荐
2011/04/28 Javascript
基于JQuery实现的Select级联
2014/01/27 Javascript
跟我学习javascript的var预解析与函数声明提升
2015/11/16 Javascript
JS批量替换内容中关键词为超链接
2017/02/20 Javascript
Chrome调试折腾记之JS断点调试技巧
2017/09/11 Javascript
JavaScript正则表达式和级联效果
2017/09/14 Javascript
基于vue-ssr的静态网站生成器VuePress 初体验
2018/04/17 Javascript
详解vue中使用axios对同一个接口连续请求导致返回数据混乱的问题
2019/11/06 Javascript
Python os模块介绍
2014/11/30 Python
Python中用psycopg2模块操作PostgreSQL方法
2017/11/28 Python
python中闭包Closure函数作为返回值的方法示例
2017/12/17 Python
Python+OpenCV目标跟踪实现基本的运动检测
2018/07/10 Python
Python 实现Windows开机运行某软件的方法
2018/10/14 Python
Python实现平行坐标图的两种方法小结
2019/07/04 Python
python DataFrame转dict字典过程详解
2019/12/26 Python
pyMySQL SQL语句传参问题,单个参数或多个参数说明
2020/06/06 Python
keras实现多种分类网络的方式
2020/06/11 Python
解决PyCharm不在run输出运行结果而不是再Console里输出的问题
2020/09/21 Python
纯CSS实现设置半个字符的样式
2014/07/03 HTML / CSS
纯CSS3实现圆圈动态发光特效动画的示例代码
2021/03/08 HTML / CSS
HTML5 虚拟键盘出现挡住输入框的解决办法
2017/02/14 HTML / CSS
全球知名旅游社区法国站点:TripAdvisor法国
2016/08/03 全球购物
美国当红的名品折扣网:Gilt Groupe
2016/08/15 全球购物
新书吧创业计划书
2014/01/31 职场文书
三月雷锋月活动总结
2014/07/03 职场文书
法律讲堂观后感
2015/06/11 职场文书
Nest.js参数校验和自定义返回数据格式详解
2021/03/29 Javascript
pytorch 梯度NAN异常值的解决方案
2021/06/05 Python
Java实现带图形界面的聊天程序
2022/06/10 Java/Android