forked from Baidu-AIP/speech-tts-cors
-
Notifications
You must be signed in to change notification settings - Fork 1
/
demo.html
executable file
·110 lines (101 loc) · 2.85 KB
/
demo.html
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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<script type="text/javascript" src="baidu_tts_cors.js"></script>
<script type="text/javascript">
// 初始化变量
var audio = null;
var playBtn = null;
// dom加载完毕回调后注册按钮对象
ready(function() {
playBtn = document.getElementById('playBtn');
});
// 合成按钮
function tts() {
let text = document.getElementById('text').value;
playBtn.innerText = '准备中';
// 调用语音合成接口
// 参数含义请参考 https://ai.baidu.com/docs#/TTS-API/41ac79a6
audio = btts({
tex: text,
tok: '24.60645ec713f5163935cf5d7037f71d5d.2592000.1568961325.282335-15876292',
spd: 5,
pit: 5,
vol: 15,
per: 4
}, {
volume: 0.3,
autoDestory: true,
timeout: 10000,
hidden: false,
onInit: function (htmlAudioElement) {
},
onSuccess: function(htmlAudioElement) {
audio = htmlAudioElement;
playBtn.innerText = '播放';
},
onError: function(text) {
alert(text)
},
onTimeout: function () {
alert('timeout')
}
});
}
// 播放按钮
function play() {
if (audio === null) {
alert('请先点击合成')
} else {
audio.play();
}
}
// 暂停按钮
function pause() {
if (audio === null) {
alert('请先点击合成')
} else {
audio.pause();
}
}
// 取消按钮
function cancel() {
if (audio === null) {
alert('请先点击合成')
} else {
audio.pause();
document.body.removeChild(audio);
audio = null;
playBtn.innerText = '准备中';
}
}
// dom加载完毕回调
function ready(callback){
var doc = document;
if (doc.addEventListener) {
doc.addEventListener('DOMContentLoaded', function() {
callback();
}, false);
} else if (doc.attachEvent) {
doc.attachEvent('onreadystatechange', function() {
if (doc.readyState === 'complete') {
callback();
}
});
}
}
</script>
</head>
<body>
<div>
<input type="text" id='text' value='百度语音合成' style='width: 500px;'>
<button onclick='tts()'>合成</button>
<button onclick='play()' id='playBtn'>准备中</button>
<button onclick='pause()'>暂停</button>
<button onclick='cancel()'>取消</button>
</div>
</body>
</html>