Raven10492 commited on
Commit
4782013
·
verified ·
1 Parent(s): 77e074a

Delete sound-test.html

Browse files
Files changed (1) hide show
  1. sound-test.html +0 -279
sound-test.html DELETED
@@ -1,279 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="zh-CN">
3
- <head>
4
- <meta charset="UTF-8">
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Web Audio API 声音测试</title>
7
- <style>
8
- body {
9
- font-family: Arial, sans-serif;
10
- max-width: 800px;
11
- margin: 0 auto;
12
- padding: 20px;
13
- background: #f5f5f5;
14
- }
15
- .container {
16
- background: white;
17
- padding: 30px;
18
- border-radius: 10px;
19
- box-shadow: 0 2px 10px rgba(0,0,0,0.1);
20
- }
21
- h1 {
22
- color: #333;
23
- text-align: center;
24
- margin-bottom: 30px;
25
- }
26
- .sound-group {
27
- margin-bottom: 25px;
28
- padding: 15px;
29
- border: 1px solid #ddd;
30
- border-radius: 8px;
31
- background: #fafafa;
32
- }
33
- .sound-group h3 {
34
- margin-top: 0;
35
- color: #555;
36
- }
37
- button {
38
- background: #007bff;
39
- color: white;
40
- border: none;
41
- padding: 10px 20px;
42
- margin: 5px;
43
- border-radius: 5px;
44
- cursor: pointer;
45
- font-size: 14px;
46
- }
47
- button:hover {
48
- background: #0056b3;
49
- }
50
- button:active {
51
- transform: translateY(1px);
52
- }
53
- .params {
54
- margin: 10px 0;
55
- font-size: 12px;
56
- color: #666;
57
- }
58
- .custom-controls {
59
- display: grid;
60
- grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
61
- gap: 10px;
62
- margin: 15px 0;
63
- }
64
- .control-group {
65
- display: flex;
66
- flex-direction: column;
67
- }
68
- label {
69
- font-size: 12px;
70
- color: #666;
71
- margin-bottom: 5px;
72
- }
73
- input[type="range"] {
74
- width: 100%;
75
- }
76
- input[type="number"] {
77
- width: 80px;
78
- padding: 5px;
79
- border: 1px solid #ccc;
80
- border-radius: 3px;
81
- }
82
- .value-display {
83
- font-size: 12px;
84
- color: #333;
85
- font-weight: bold;
86
- }
87
- </style>
88
- </head>
89
- <body>
90
- <div class="container">
91
- <h1>🔔 Web Audio API 声音测试</h1>
92
-
93
- <!-- 预设音效 -->
94
- <div class="sound-group">
95
- <h3>📢 经典提示音</h3>
96
- <button onclick="playSound('ding')">系统叮声 (800Hz)</button>
97
- <button onclick="playSound('beep')">电子哔声 (1000Hz)</button>
98
- <button onclick="playSound('boop')">温柔提示 (600Hz)</button>
99
- <button onclick="playSound('chime')">悦耳铃声 (双音)</button>
100
- </div>
101
-
102
- <div class="sound-group">
103
- <h3>🎵 不同波形</h3>
104
- <button onclick="playWaveform('sine', 800)">正弦波 (Sine)</button>
105
- <button onclick="playWaveform('square', 800)">方波 (Square)</button>
106
- <button onclick="playWaveform('triangle', 800)">三角波 (Triangle)</button>
107
- <button onclick="playWaveform('sawtooth', 800)">锯齿波 (Sawtooth)</button>
108
- </div>
109
-
110
- <div class="sound-group">
111
- <h3>🎶 音符音效</h3>
112
- <button onclick="playNote(523.25)">C5 (Do)</button>
113
- <button onclick="playNote(587.33)">D5 (Re)</button>
114
- <button onclick="playNote(659.25)">E5 (Mi)</button>
115
- <button onclick="playNote(698.46)">F5 (Fa)</button>
116
- <button onclick="playNote(783.99)">G5 (Sol)</button>
117
- </div>
118
-
119
- <div class="sound-group">
120
- <h3>🔧 自定义音效</h3>
121
- <div class="custom-controls">
122
- <div class="control-group">
123
- <label>频率 (Hz)</label>
124
- <input type="range" id="frequency" min="200" max="2000" value="800" oninput="updateValue('frequency')">
125
- <span class="value-display" id="frequency-value">800</span>
126
- </div>
127
- <div class="control-group">
128
- <label>音量 (0-1)</label>
129
- <input type="range" id="volume" min="0" max="1" step="0.1" value="0.3" oninput="updateValue('volume')">
130
- <span class="value-display" id="volume-value">0.3</span>
131
- </div>
132
- <div class="control-group">
133
- <label>持续时间 (秒)</label>
134
- <input type="range" id="duration" min="0.1" max="2" step="0.1" value="0.5" oninput="updateValue('duration')">
135
- <span class="value-display" id="duration-value">0.5</span>
136
- </div>
137
- <div class="control-group">
138
- <label>波形类型</label>
139
- <select id="waveform">
140
- <option value="sine">正弦波</option>
141
- <option value="square">方波</option>
142
- <option value="triangle">三角波</option>
143
- <option value="sawtooth">锯齿波</option>
144
- </select>
145
- </div>
146
- </div>
147
- <button onclick="playCustomSound()">🎵 播放自定义音效</button>
148
- </div>
149
-
150
- <div class="sound-group">
151
- <h3>🚨 特殊音效</h3>
152
- <button onclick="playComplexSound('success')">✅ 成功音效</button>
153
- <button onclick="playComplexSound('error')">❌ 错误音效</button>
154
- <button onclick="playComplexSound('notification')">🔔 通知音效</button>
155
- <button onclick="playComplexSound('complete')">🎉 完成音效</button>
156
- </div>
157
- </div>
158
-
159
- <script>
160
- // 更新滑块显示值
161
- function updateValue(id) {
162
- const slider = document.getElementById(id);
163
- const display = document.getElementById(id + '-value');
164
- display.textContent = slider.value;
165
- }
166
-
167
- // 基础音效播放函数
168
- function playTone(frequency, duration = 0.5, volume = 0.3, waveType = 'sine') {
169
- try {
170
- const audioContext = new (window.AudioContext || window.webkitAudioContext)();
171
- const oscillator = audioContext.createOscillator();
172
- const gainNode = audioContext.createGain();
173
-
174
- oscillator.connect(gainNode);
175
- gainNode.connect(audioContext.destination);
176
-
177
- oscillator.frequency.setValueAtTime(frequency, audioContext.currentTime);
178
- oscillator.type = waveType;
179
-
180
- // 音量渐入渐出
181
- gainNode.gain.setValueAtTime(0, audioContext.currentTime);
182
- gainNode.gain.linearRampToValueAtTime(volume, audioContext.currentTime + 0.01);
183
- gainNode.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + duration);
184
-
185
- oscillator.start(audioContext.currentTime);
186
- oscillator.stop(audioContext.currentTime + duration);
187
- } catch (error) {
188
- console.log('播放失败:', error);
189
- alert('您的浏览器不支持 Web Audio API');
190
- }
191
- }
192
-
193
- // 预设音效
194
- function playSound(type) {
195
- switch(type) {
196
- case 'ding':
197
- playTone(800, 0.5, 0.3, 'sine');
198
- break;
199
- case 'beep':
200
- playTone(1000, 0.3, 0.4, 'square');
201
- break;
202
- case 'boop':
203
- playTone(600, 0.4, 0.25, 'sine');
204
- break;
205
- case 'chime':
206
- // 双音和弦
207
- playTone(523.25, 0.8, 0.2, 'sine'); // C5
208
- setTimeout(() => playTone(659.25, 0.6, 0.15, 'sine'), 100); // E5
209
- break;
210
- }
211
- }
212
-
213
- // 不同波形测试
214
- function playWaveform(waveType, frequency) {
215
- playTone(frequency, 0.6, 0.3, waveType);
216
- }
217
-
218
- // 音符播放
219
- function playNote(frequency) {
220
- playTone(frequency, 0.8, 0.25, 'sine');
221
- }
222
-
223
- // 自定义音效
224
- function playCustomSound() {
225
- const frequency = document.getElementById('frequency').value;
226
- const volume = document.getElementById('volume').value;
227
- const duration = document.getElementById('duration').value;
228
- const waveform = document.getElementById('waveform').value;
229
-
230
- playTone(parseFloat(frequency), parseFloat(duration), parseFloat(volume), waveform);
231
- }
232
-
233
- // 复杂音效
234
- function playComplexSound(type) {
235
- try {
236
- const audioContext = new (window.AudioContext || window.webkitAudioContext)();
237
-
238
- switch(type) {
239
- case 'success':
240
- // 上升三和弦
241
- playTone(523.25, 0.2, 0.2, 'sine'); // C5
242
- setTimeout(() => playTone(659.25, 0.2, 0.2, 'sine'), 150); // E5
243
- setTimeout(() => playTone(783.99, 0.4, 0.25, 'sine'), 300); // G5
244
- break;
245
-
246
- case 'error':
247
- // 下降的不和谐音
248
- playTone(400, 0.3, 0.3, 'square');
249
- setTimeout(() => playTone(300, 0.4, 0.25, 'square'), 200);
250
- break;
251
-
252
- case 'notification':
253
- // 快速双击
254
- playTone(800, 0.15, 0.3, 'sine');
255
- setTimeout(() => playTone(800, 0.15, 0.3, 'sine'), 200);
256
- break;
257
-
258
- case 'complete':
259
- // 完成音效 - 上升琶音
260
- const notes = [523.25, 659.25, 783.99, 1046.50]; // C5, E5, G5, C6
261
- notes.forEach((note, index) => {
262
- setTimeout(() => playTone(note, 0.3, 0.2, 'sine'), index * 100);
263
- });
264
- break;
265
- }
266
- } catch (error) {
267
- console.log('播放复杂音效失败:', error);
268
- }
269
- }
270
-
271
- // 初始化显示值
272
- document.addEventListener('DOMContentLoaded', () => {
273
- updateValue('frequency');
274
- updateValue('volume');
275
- updateValue('duration');
276
- });
277
- </script>
278
- </body>
279
- </html>