内容简介：H5 让我们的 Web 交互更加生动有趣，但浏览器的多样性以及挥之不去的兼容问题，却阻碍了技术发展。这并不是我们拒绝的理由，恰恰相反，它应该成为动力。文章标题为了严谨，所以叫音频合成。如果用大白话来解释，那就是「文字转语音」。语音的场景就太多了：这些都是随处可见的例子，但真正燃起我激情的是这个
H5 让我们的 Web 交互更加生动有趣，但浏览器的多样性以及挥之不去的兼容问题，却阻碍了技术发展。这并不是我们拒绝的理由，恰恰相反，它应该成为动力。
一、语音场景
文章标题为了严谨，所以叫音频合成。如果用大白话来解释，那就是「文字转语音」。语音的场景就太多了：
- 点读机：哪里不会点哪里
- 有声小说：看着太累，听起来不错
-
Web页面警示用户的操作 - 闹钟，提醒，小秘书
- 残疾人支持
…
这些都是随处可见的例子，但真正燃起我激情的是这个 场景 ，简直酷炫到爆：
二、技术核心
看完上面的动画，按捺不住内心的好奇，随手就翻起了源码。Oh～原来如此，把你揪出来：
let sayhello = new window.SpeechSynthesisUtterance('你好，欢迎来到 Jartto 的博客！');
window.speechSynthesis.speak(sayhello);
事情的真相就是简单如此，短短两行，就实现了语音播报。
三、兼容性
如此有趣的 API ，突然想到了一万个应用场景。别忙，先来看看 SpeechSynthesis 的兼容性吧：
四、API 文档
SpeechSynthesis 接口是语音服务的控制接口，属于 网页语音 API ，它可以用于获取设备上关于可用的合成声音的信息，开始、暂停语音，或除此之外的其他命令。
五、完整示例
六、补充：SpeechRecognition
SpeechRecognition 顾名思义，语音识别，属于 网页语音 API 。需要麦克风等音频输入设备的支持，可以识别用户的语音输入，并且转化成文字。
SpeechRecognition API 需要硬件支持，所以兼容性并不好，大致如下：
七、未来畅想
相信不久的未来，浏览器会逐步统一，兼容问题将会化为乌有。我们将会用更多的时间去探索技术，而不是去兼容老破旧的网站或者机器。当然，Web 技术会大行其道，用户将会拥有到更加有趣的体验。今天，我们迈进了一步！
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持 码农网
猜你喜欢:
- 微软Azure认知服务：TTS系统音频合成媲美人类
- 极大提升合成速度，百度提出首个全并行语音合成模型ParaNet
- 探索 React 合成事件
- 浅谈 react 基本合成事件类
- 基于学习的证据合成方法研究
- LearningAVFoundation之视频合成+转场过渡动画
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
Responsive Web Design
Ethan Marcotte / Happy Cog / 2011-6 / USD 18.00
From mobile browsers to netbooks and tablets, users are visiting your sites from an increasing array of devices and browsers. Are your designs ready? Learn how to think beyond the desktop and craft be......一起来看看 《Responsive Web Design》 这本书的介绍吧!
