HTML5 之音频合成（Speech Synthesis）

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

一、语音场景

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

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

这些都是随处可见的例子，但真正燃起我激情的是这个场景，简直酷炫到爆。原来动画和语音结合起来才是最佳的用户体验。

二、技术核心

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

1
2
 
let sayhello = new window.SpeechSynthesisUtterance('你好，欢迎来到 Jartto 的博客！');
window.speechSynthesis.speak(sayhello);

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

三、兼容性

如此有趣的 API，突然想到了一万个应用场景。别忙，先来看看 SpeechSynthesis 的兼容性吧：
HTML5 之音频合成（Speech Synthesis）

看起来各大浏览器支持的还不错，那就试试呗！

四、API 文档

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

既然浏览器已经普遍支持了，那么我们不妨打印出来看看。

HTML5 之音频合成（Speech Synthesis）

下面我们来适当的解释一下：

  • SpeechSynthesis.paused: 当 SpeechSynthesis 处于暂停状态时， Boolean 值返回 true 。
  • SpeechSynthesis.pending: 当语音播放队列到目前为止保持没有说完的语音时， Boolean 值返回 true 。
  • SpeechSynthesis.speaking: 当语音谈话正在进行的时候，即使 SpeechSynthesis 处于暂停状态， Boolean 返回 true 。
  • SpeechSynthesis.onvoiceschanged: 当由 SpeechSynthesis.getVoices() 方法返回的SpeechSynthesisVoice 列表改变时触发。

此外，还有几个非常实用的方法：

  • SpeechSynthesis.cancel(): 移除所有语音谈话队列中的谈话。
  • SpeechSynthesis.getVoices(): 返回当前设备所有可用声音的 SpeechSynthesisVoice 列表。
  • SpeechSynthesis.pause(): 把 SpeechSynthesis 对象置为暂停状态。
  • SpeechSynthesis.resume(): 把 SpeechSynthesis 对象置为一个非暂停状态：如果已经暂停了则继续。
  • SpeechSynthesis.speak(): 添加一个 utterance 到语音谈话队列；它将会在其他语音谈话播放完之后播放。

API 很简单，这里就不赘述了，来个例子尝尝鲜。

五、代码演示

MDN Web Docs上面有个很形象的例子，我们拿过来学习学习：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
var synth = window.speechSynthesis;
var voices = synth.getVoices();

if (synth.speaking) {
  console.error('Speaking');
  return;
}

var sayThis = new SpeechSynthesisUtterance('你好，欢迎来到 Jartto 的博客！');
sayThis.onend = function (event) {
    console.log('End');
}
sayThis.onerror = function (event) {
    console.error('Error');
}

sayThis.pitch = pitch.value;
sayThis.rate = rate.value;

synth.speak(sayThis);

注意：这里为了演示，只列出了核心代码，完整代码请看下面「完整示例」。

六、完整示例

看完了核心代码，这里把完整代码贴出来，整理理解一下，加强记忆吧：
1.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
<form>
  <input type="text" class="txt">
  <div>
    <label for="rate">Rate</label>
    <input type="range" min="0.5" max="2" value="1" step="0.1" id="rate">
    <div class="rate-value">1</div>
    <div class="clearfix"></div>
  </div>
  <div>
    <label for="pitch">Pitch</label>
    <input type="range" min="0" max="2" value="1" step="0.1" id="pitch">
    <div class="pitch-value">1</div>
    <div class="clearfix"></div>
  </div>
  <select>

  </select>
  <div class="controls">
    <button id="play" type="submit">Play</button>
  </div>
</form>

2.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
 
var synth = window.speechSynthesis;

var inputForm = document.querySelector('form');
var inputTxt = document.querySelector('.txt');
var voiceSelect = document.querySelector('select');

var pitch = document.querySelector('#pitch');
var pitchValue = document.querySelector('.pitch-value');
var rate = document.querySelector('#rate');
var rateValue = document.querySelector('.rate-value');

var voices = [];

function populateVoiceList() {
  voices = synth.getVoices();
  var selectedIndex = voiceSelect.selectedIndex < 0 ? 0 : voiceSelect.selectedIndex;
  voiceSelect.innerHTML = '';
  for(i = 0; i < voices.length ; i++) {
    var option = document.createElement('option');
    option.textContent = voices[i].name + ' (' + voices[i].lang + ')';
    
    if(voices[i].default) {
      option.textContent += ' -- DEFAULT';
    }

    option.setAttribute('data-lang', voices[i].lang);
    option.setAttribute('data-name', voices[i].name);
    voiceSelect.appendChild(option);
  }
  voiceSelect.selectedIndex = selectedIndex;
}

populateVoiceList();
if (speechSynthesis.onvoiceschanged !== undefined) {
  speechSynthesis.onvoiceschanged = populateVoiceList;
}

function speak(){
    if (synth.speaking) {
        console.error('speechSynthesis.speaking');
        return;
    }
    if (inputTxt.value !== '') {
    var utterThis = new SpeechSynthesisUtterance(inputTxt.value);
    utterThis.onend = function (event) {
        console.log('SpeechSynthesisUtterance.onend');
    }
    utterThis.onerror = function (event) {
        console.error('SpeechSynthesisUtterance.onerror');
    }
    var selectedOption = voiceSelect.selectedOptions[0].getAttribute('data-name');
    for(i = 0; i < voices.length ; i++) {
      if(voices[i].name === selectedOption) {
        utterThis.voice = voices[i];
      }
    }
    utterThis.pitch = pitch.value;
    utterThis.rate = rate.value;
    synth.speak(utterThis);
  }
}

inputForm.onsubmit = function(event) {
  event.preventDefault();

  speak();

  inputTxt.blur();
}

pitch.onchange = function() {
  pitchValue.textContent = pitch.value;
}

rate.onchange = function() {
  rateValue.textContent = rate.value;
}

voiceSelect.onchange = function(){
  speak();
}

3.css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
 
.txt, select, form > div {
  display: block;
  margin: 0 auto;
  font-family: sans-serif;
  font-size: 16px;
  padding: 5px;
}

.txt {
  width: 80%;
}

select {
  width: 83%;
}

form > div {
  width: 81%;
}

.txt, form > div {
  margin-bottom: 10px;
  overflow: auto;
}

.clearfix {
  clear: both;
}

label {
  float: left;
  width: 10%;
  line-height: 1.5;
}

.rate-value, .pitch-value {
  float: right;
  width: 5%;
  line-height: 1.5;
}

#rate, #pitch {
  float: right;
  width: 81%;
}

.controls {
  text-align: center;
  margin-top: 10px;
}

.controls button {
  padding: 10px;
}

七、补充：SpeechRecognition

既然提到了文字转语音，那么不得不提到语音识别。

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

SpeechRecognition API 需要硬件支持，所以兼容性并不好，大致如下：
HTML5 之音频合成（Speech Synthesis）

八、未来畅想

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

相关文章：

  • 2021-11-04
  • 2021-11-04
  • 2021-10-10
  • 2021-09-29
  • 2022-12-23
  • 2022-12-23
猜你喜欢
  • 2021-12-19
  • 2021-07-11
  • 2022-12-23
  • 2021-06-17
  • 2021-09-22
相关资源
相似解决方案
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode