Day23 - Speech Synthesis
作者:©Mrlin(史密斯林)
简介:学习记录,用于记录在CSDN课程中的学习内容。
课程:30天完成30个JS原生开发项目挑战视频教程。JavaScript30 是 Wes Bos 推出的一个 30 天挑战。项目免费提供了 30 个视频教程、30 个挑战的起始文档和 30 个挑战解决方案源代码。目的是帮助人们用纯 JavaScript 来写东西,不借助框架和库,也不使用编译器和引用。
第23天要做一个语音的记事本类似的场景,输入一段内容,选择不同的语言可以进行朗读。还可以选择不同的语速和语调。
基础知识
一、示例
1 | var synth = window.speechSynthesis; |
二、SpeechSynthesis
1、属性
SpeechSynthesis.paused
(只读)
判断是否是处于暂停状态。
SpeechSynthesis.pending
(只读)
判断是否处于等待状态。
SpeechSynthesis.speaking
(只读)
判断是否处于在读中。
2、事件
SpeechSynthesis.onvoiceschanged
监听翻译的语言是否发生了变化。
3、方法
SpeechSynthesis.cancel()
取消。
SpeechSynthesis.getVoices()
获取所有当前设备支持的SpeechSynthesisVoice
对象。
SpeechSynthesis.pause()
暂停。
SpeechSynthesis.resume()
恢复。
SpeechSynthesis.speak()
开始语音读取。
三、SpeechSynthesisUtterance
1、构造函数
SpeechSynthesisUtterance.SpeechSynthesisUtterance()
返回一个新的SpeechSynthesisUtterance
对象实例。
2、属性
- SpeechSynthesisUtterance.lang
获取或者是设置utterance
的语言。
- SpeechSynthesisUtterance.pitch
获取或者是设置utterance
的音高。
- SpeechSynthesisUtterance.rate
获取或者是设置utterance
的播放速率。
- SpeechSynthesisUtterance.text
获取或者是设置utterance
需要播放的文本内容。
- SpeechSynthesisUtterance.voice
获得或设定将被用来说话的声音。
- SpeechSynthesisUtterance.volume
获取或者是设置utterance
的播放音量。
HTML源码
1 |
|
CSS源码
1 | html { |
JS源码
1 | // 实例化一个语音对象,并获得页面上的各DOM元素 |
本节挑战中只要掌握上面的基础知识部分,本案例的挑战就成功。