目录
浏览器语言播放
# 浏览器语音播放
官方地址：https://developer.mozilla.org/zh-CN/docs/Web/API/SpeechSynthesisUtterance (opens new window)
# 语音播放demo
<html>
<div class="poem">
<div class="content">
<div id="btn1">播放</div>
<div id="close1">关闭</div>
<div id="btn2">重新播放</div>
<div id="close2">播放关闭</div>
</div>
</div>
</html>
<style>
.poem{
/* width: 100vw;
height: 100vh; */
height: 35vh;
display: flex;
justify-content: center;
align-items: center;
}
.poem,.content::before{
background: url('https://cdn.jsdelivr.net/gh/maoyln/maoyl-img/blog/autumn-scenery.jpg');
background-size: cover;
background-attachment: fixed;
}
.poem .content{
box-sizing: border-box;
color:#f9f9f9;
font-size: 20px;
line-height: 2.2em;
letter-spacing: 3px;
text-align: center;
padding: 40px 30px 35px 40px;
background: hsla(0, 0%, 100%, 0.3);
position: relative;
overflow: hidden;
z-index: 1;
}
.poem .content::before{
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
filter: blur(30px);
margin: -30px;
z-index: -1;
}
</style>
<script>
function $(el){
return document.querySelector(el)
}
let speechUtterance;
$('#btn1').onclick = function () {
window.speechSynthesis?.cancel();
speak(
`Experimental: 这是一个实验中的功能
此功能某些浏览器尚在开发中，请参考浏览器兼容性表格以得到在不同浏览器中适合使用的前缀。由于该功能对应的标准文档可能被重新修订，所以在未来版本的浏览器中该功能的语法和行为可能随之改变。`,
function () {
console.log('语音播放结束');
},
function () {
console.log('语音开始播放');
}
);
}
$('#btn2').onclick = function () {
window.speechSynthesis?.cancel();
// window.speechSynthesis.getVoices?.()
speak(
`The SpeechSynthesisUtterance interface of the Web Speech API represents a speech request. It contains the content the speech service should read and information about how to read it (e.g. language, pitch and volume.)`,
function () {
console.log('语音播放结束');
},
function () {
console.log('语音开始播放');
}
);
}
$('#close1').onclick = function () {
window.speechSynthesis.cancel();
console.log(speechUtterance, 'speechUtterance');
}
$('#close2').onclick = function () {
window.speechSynthesis.cancel();
console.log(speechUtterance, 'speechUtterance');
}
async function speak(text, endEvent, startEvent) {
if (!window.SpeechSynthesisUtterance) {
console.warn('当前浏览器不支持文字转语音服务');
}
!speechUtterance && ( speechUtterance = new SpeechSynthesisUtterance() );
speechUtterance.rate = 1; // 读取文字的语速 0.1~10 正常1
speechUtterance.lang = 'zh-CN'; // 读取文字时的语言
speechUtterance.volume = 1; // 读取时声音的音量 0~1 正常1
speechUtterance.pitch = 1; // 读取时声音的音高 0~2 正常1
// speechUtterance.voice = await window.speechSynthesis.getVoices()[1] // 设置语言（目前测试有问题）
speechUtterance.text = text;
// 语音播报结束
speechUtterance.onend = function () {
endEvent && endEvent();
};
// 语音播报开始
speechUtterance.onstart = function () {
startEvent && startEvent();
};
speechSynthesis.speak(speechUtterance);
return speechUtterance;
}
</script>
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
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
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
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
编辑 (opens new window)
上次更新: 2025/04/18, 01:42:12