HTML5 之音频合成(SpeechSynthesis)

栏目: Html5 · 发布时间: 6年前

内容简介:H5 让我们的 Web 交互更加生动有趣,但浏览器的多样性以及挥之不去的兼容问题,却阻碍了技术发展。这并不是我们拒绝的理由,恰恰相反,它应该成为动力。文章标题为了严谨,所以叫音频合成。如果用大白话来解释,那就是「文字转语音」。语音的场景就太多了:这些都是随处可见的例子,但真正燃起我激情的是这个

H5 让我们的 Web 交互更加生动有趣,但浏览器的多样性以及挥之不去的兼容问题,却阻碍了技术发展。这并不是我们拒绝的理由,恰恰相反,它应该成为动力。

一、语音场景

文章标题为了严谨,所以叫音频合成。如果用大白话来解释,那就是「文字转语音」。语音的场景就太多了:

  • 点读机:哪里不会点哪里
  • 有声小说:看着太累,听起来不错
  • Web 页面警示用户的操作
  • 闹钟,提醒,小秘书
  • 残疾人支持

这些都是随处可见的例子,但真正燃起我激情的是这个 场景 ,简直酷炫到爆:

二、技术核心

看完上面的动画,按捺不住内心的好奇,随手就翻起了源码。Oh~原来如此,把你揪出来:

let sayhello = new window.SpeechSynthesisUtterance('你好,欢迎来到 Jartto 的博客!');
window.speechSynthesis.speak(sayhello);

事情的真相就是简单如此,短短两行,就实现了语音播报。

三、兼容性

如此有趣的 API ,突然想到了一万个应用场景。别忙,先来看看 SpeechSynthesis 的兼容性吧:

HTML5 之音频合成(SpeechSynthesis)

四、API 文档

SpeechSynthesis 接口是语音服务的控制接口,属于 网页语音 API ,它可以用于获取设备上关于可用的合成声音的信息,开始、暂停语音,或除此之外的其他命令。

五、完整示例

六、补充:SpeechRecognition

SpeechRecognition 顾名思义,语音识别,属于 网页语音 API 。需要麦克风等音频输入设备的支持,可以识别用户的语音输入,并且转化成文字。

SpeechRecognition API 需要硬件支持,所以兼容性并不好,大致如下:

HTML5 之音频合成(SpeechSynthesis)

七、未来畅想

相信不久的未来,浏览器会逐步统一,兼容问题将会化为乌有。我们将会用更多的时间去探索技术,而不是去兼容老破旧的网站或者机器。当然,Web 技术会大行其道,用户将会拥有到更加有趣的体验。今天,我们迈进了一步!


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

嵌入式Linux应用程序开发详解

嵌入式Linux应用程序开发详解

孙琼 / 人民邮电出版社 / 2006-7 / 46.00元

《嵌入式Linux应用程序开发详解》主要分为3个部分,包括Linux基础、搭建嵌入式Linux环境和嵌入式Linux的应用开发。Linux基础部分从Linux的安装过程、基本操作命令讲起,为Linux初学者能快速入门提供了保证。接着系统地讲解了嵌入式Linux的环境搭建,以及嵌入式Linux的I/O与文件系统的开发、进程控制开发、进程间通信开发、网络应用开发、基于中断的开发、设备驱动程序的开发以及......一起来看看 《嵌入式Linux应用程序开发详解》 这本书的介绍吧!

Base64 编码/解码
Base64 编码/解码

Base64 编码/解码

XML 在线格式化
XML 在线格式化

在线 XML 格式化压缩工具

正则表达式在线测试
正则表达式在线测试

正则表达式在线测试