soundeffects/1.html at main · OopsiLab/soundeffects · GitHub

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
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>音频播放器 - 音效选择</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      text-align: center;
      margin: 20px;
    }
    audio {
      margin: 20px 0;
      width: 100%;
      max-width: 600px;
    }
    input[type="range"] {
      width: 300px;
      margin: 10px;
    }
    label {
      font-weight: bold;
      margin-right: 10px;
    }
    .effect-group {
      margin-bottom: 20px;
    }
  </style>
</head>
<body>
  <h1>音频播放器 - 音效选择</h1>
  <audio id="audio" src="./your-audio-file.mp3" controls></audio>

  <div class="effect-group">
    <label for="bass">低音调节：</label>
    <input id="bass" type="range" min="-30" max="30" step="1" value="0">
    <span id="bassValue">未设置</span>
  </div>

  <div class="effect-group">
    <label for="treble">高音调节：</label>
    <input id="treble" type="range" min="-30" max="30" step="1" value="0">
    <span id="trebleValue">未设置</span>
  </div>

  <div class="effect-group">
    <label for="reverb">混响效果：</label>
    <input id="reverb" type="range" min="0" max="1" step="0.1" value="0">
    <span id="reverbValue">未设置</span>
  </div>

  <div class="effect-group">
    <label for="delay">延迟效果：</label>
    <input id="delay" type="range" min="0" max="1" step="0.1" value="0">
    <span id="delayValue">未设置</span>
  </div>

  <div class="effect-group">
    <label for="volume">音量调节：</label>
    <input id="volume" type="range" min="0" max="1" step="0.1" value="0.5">
    <span id="volumeValue">未设置</span>
  </div>

  <script>
    // 获取 DOM 元素
    const audioElement = document.getElementById('audio');
    const bassSlider = document.getElementById('bass');
    const bassValueDisplay = document.getElementById('bassValue');
    const trebleSlider = document.getElementById('treble');
    const trebleValueDisplay = document.getElementById('trebleValue');
    const reverbSlider = document.getElementById('reverb');
    const reverbValueDisplay = document.getElementById('reverbValue');
    const delaySlider = document.getElementById('delay');
    const delayValueDisplay = document.getElementById('delayValue');
    const volumeSlider = document.getElementById('volume');
    const volumeValueDisplay = document.getElementById('volumeValue');

    // 创建 Web Audio API 上下文
    const audioContext = new (window.AudioContext || window.webkitAudioContext)();
    const track = audioContext.createMediaElementSource(audioElement);

    // 创建低通滤波器（低音）
    const bassFilter = audioContext.createBiquadFilter();
    bassFilter.type = 'lowshelf';
    bassFilter.frequency.value = 200;

    // 创建高通滤波器（高音）
    const trebleFilter = audioContext.createBiquadFilter();
    trebleFilter.type = 'highshelf';
    trebleFilter.frequency.value = 3000;

    // 创建混响节点
    const reverb = audioContext.createConvolver();
    const reverbBuffer = audioContext.createBuffer(2, audioContext.sampleRate * 3, audioContext.sampleRate);
    for (let i = 0; i < reverbBuffer.numberOfChannels; i++) {
      const channelData = reverbBuffer.getChannelData(i);
      for (let j = 0; j < channelData.length; j++) {
        channelData[j] = (Math.random() * 2 - 1) * 0.2; // 创建简单混响
      }
    }
    reverb.buffer = reverbBuffer;

    // 创建延迟（回声）节点
    const delay = audioContext.createDelay();

    // 创建增益节点（音量控制）
    const gainNode = audioContext.createGain();

    // 连接音频节点
    track.connect(bassFilter)
         .connect(trebleFilter)
         .connect(reverb)
         .connect(delay)
         .connect(gainNode)
         .connect(audioContext.destination);

    // 滑块事件监听
    bassSlider.addEventListener('input', () => {
      const bassGain = parseFloat(bassSlider.value);
      bassFilter.gain.setValueAtTime(bassGain, audioContext.currentTime);
      bassValueDisplay.textContent = bassGain || '未设置';
    });

    trebleSlider.addEventListener('input', () => {
      const trebleGain = parseFloat(trebleSlider.value);
      trebleFilter.gain.setValueAtTime(trebleGain, audioContext.currentTime);
      trebleValueDisplay.textContent = trebleGain || '未设置';
    });

    reverbSlider.addEventListener('input', () => {
      const reverbLevel = parseFloat(reverbSlider.value);
      gainNode.gain.setValueAtTime(reverbLevel, audioContext.currentTime);
      reverbValueDisplay.textContent = reverbLevel || '未设置';
    });

    delaySlider.addEventListener('input', () => {
      const delayTime = parseFloat(delaySlider.value);
      delay.delayTime.setValueAtTime(delayTime, audioContext.currentTime);
      delayValueDisplay.textContent = delayTime || '未设置';
    });

    volumeSlider.addEventListener('input', () => {
      const volumeLevel = parseFloat(volumeSlider.value);
      gainNode.gain.setValueAtTime(volumeLevel, audioContext.currentTime);
      volumeValueDisplay.textContent = volumeLevel || '未设置';
    });

    // 确保用户交互后启动 AudioContext
    audioElement.addEventListener('play', () => {
      if (audioContext.state === 'suspended') {
        audioContext.resume();
      }
    });
  </script>
</body>
</html>