使用 AudioContext 同时播放多个音乐而不互相干扰

要实现 AudioContext 同时播放多个音乐互不干扰，可以创建多个 AudioBufferSourceNode 和 GainNode，然后将它们连接到不同的输出节点。以下是一个示例代码：

// 创建 AudioContext
const audioContext = new AudioContext();

// 创建多个 AudioBufferSourceNode 和 GainNode
const source1 = audioContext.createBufferSource();
const source2 = audioContext.createBufferSource();
const gainNode1 = audioContext.createGain();
const gainNode2 = audioContext.createGain();

// 将 AudioBufferSourceNode 连接到 GainNode
source1.connect(gainNode1);
source2.connect(gainNode2);

// 将 GainNode 连接到输出节点
gainNode1.connect(audioContext.destination);
gainNode2.connect(audioContext.destination);

// 加载音乐文件并设置音量
fetch('music1.mp3')
  .then(response => response.arrayBuffer())
  .then(buffer => audioContext.decodeAudioData(buffer))
  .then(audioBuffer => {
    source1.buffer = audioBuffer;
    source1.start(0);
    gainNode1.gain.value = 0.5; // 设置音量
  });

fetch('music2.mp3')
  .then(response => response.arrayBuffer())
  .then(buffer => audioContext.decodeAudioData(buffer))
  .then(audioBuffer => {
    source2.buffer = audioBuffer;
    source2.start(0);
    gainNode2.gain.value = 0.8; // 设置音量
  });

在上面的示例中，我们创建了两个 AudioBufferSourceNode 和 GainNode，并将它们连接到不同的输出节点。然后，我们加载音乐文件并将其分配给相应的 AudioBufferSourceNode，然后设置音量。最后，调用 start() 方法开始播放音乐。

通过这种方式，我们可以同时播放多个音乐文件，并且它们不会互相干扰。可以根据需要创建更多的 AudioBufferSourceNode 和 GainNode 来播放更多的音乐文件。