-
Notifications
You must be signed in to change notification settings - Fork 277
/
ApiTest.html
99 lines (87 loc) · 3.27 KB
/
ApiTest.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
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TTS 测试</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
max-width: 600px;
margin: auto;
}
label, button {
display: block;
margin-top: 10px;
}
textarea, select, input[type="number"], input[type="text"] {
width: calc(100% - 10px);
margin-top: 5px;
padding: 5px;
font-size: 16px;
}
button {
width: 100%;
padding: 10px;
background-color: #4CAF50;
color: white;
border: none;
font-size: 16px;
cursor: pointer;
}
button:hover {
background-color: #45a049;
}
h2, pre {
margin-top: 20px;
}
audio {
width: 100%;
margin-top: 10px;
}
</style>
</head>
<body>
<h1>ChatTTS API 测试</h1>
<label for="api_url">接口 URL：</label>
<input type="text" id="api_url" value="http://localhost:9880/">
<label for="text">测试文本：</label>
<textarea id="text" rows="10">我是一个充满活力的人，喜欢运动，喜欢旅行，喜欢尝试新鲜事物。我喜欢挑战自己，不断突破自己的极限，让自己变得更加强大。我是一个充满活力的人，喜欢运动，喜欢旅行，喜欢尝试新鲜事物。我喜欢挑战自己，不断突破自己的极限，让自己变得更加强大。</textarea>
<label for="media_type">媒体类型：</label>
<select id="media_type">
<option value="wav">wav</option>
<option value="mp3">mp3</option>
<option value="flac">flac</option>
</select>
<label for="seed">种子：</label>
<input type="number" id="seed" value="2581">
<label for="streaming">流式输出：</label>
<input type="checkbox" id="streaming" checked>
<button onclick="sendRequest()">发送请求</button>
<h2>输出</h2>
<pre id="output"></pre>
<audio id="audio" controls></audio>
<script>
async function sendRequest() {
const apiUrl = document.getElementById('api_url').value;
const text = document.getElementById('text').value;
const media_type = document.getElementById('media_type').value;
const seed = document.getElementById('seed').value;
const streaming = document.getElementById('streaming').checked ? 1 : 0;
const output = document.getElementById('output');
output.textContent = "请求中...\n";
const audioElement = document.getElementById('audio');
try {
const url = `${apiUrl}?text=${encodeURIComponent(text)}&media_type=${media_type}&seed=${seed}&streaming=${streaming}`;
output.textContent += `请求 URL: ${url}\n`;
audioElement.src = url;
audioElement.play();
output.textContent += "音频即将播放...\n";
} catch (error) {
output.textContent += `请求错误: ${error}\n`;
}
}
</script>
</body>
</html>