前端实现音频合成，赋值给audio标签进行播放

要在前端实现音频合成，可以使用 Web Audio API。以下是一个简单的示例代码：

// 创建一个新的 AudioContext 对象
const audioCtx = new (window.AudioContext || window.webkitAudioContext)();

// 要合成的两个音频文件
const audio1 = 'audio1.mp3';
const audio2 = 'audio2.mp3';

// 加载音频文件
const loadAudio = async (url) => {
  const response = await fetch(url);
  const arrayBuffer = await response.arrayBuffer();
  return arrayBuffer;
};

// 合成音频文件
const mergeAudio = async () => {
  // 加载音频文件
  const audioData1 = await loadAudio(audio1);
  const audioData2 = await loadAudio(audio2);

  // 解码音频数据
  const audioBuffer1 = await audioCtx.decodeAudioData(audioData1);
  const audioBuffer2 = await audioCtx.decodeAudioData(audioData2);

  // 创建一个新的 AudioBuffer 对象
  const mergedBuffer = audioCtx.createBuffer(
    audioBuffer1.numberOfChannels,
    audioBuffer1.length + audioBuffer2.length,
    audioBuffer1.sampleRate
  );

  // 将第一个音频文件的数据复制到新的 AudioBuffer 对象中
  mergedBuffer.getChannelData(0).set(audioBuffer1.getChannelData(0));
  mergedBuffer.getChannelData(1).set(audioBuffer1.getChannelData(1));

  // 将第二个音频文件的数据复制到新的 AudioBuffer 对象中
  mergedBuffer.getChannelData(0).set(audioBuffer2.getChannelData(0), audioBuffer1.length);
  mergedBuffer.getChannelData(1).set(audioBuffer2.getChannelData(1), audioBuffer1.length);

  // 将合成后的音频数据赋值给 Audio 标签进行播放
  const audioElement = new Audio();
  const mergedData = audioCtx.createBufferSource();
  mergedData.buffer = mergedBuffer;
  mergedData.connect(audioCtx.destination);
  mergedData.start();
};

// 合成音频文件并播放
mergeAudio();

在上面的示例代码中，我们首先创建了一个新的 AudioContext 对象。然后，我们加载要合成的两个音频文件，并使用 decodeAudioData() 方法解码它们。接下来，我们创建一个新的 AudioBuffer 对象，将两个音频文件的数据复制到其中，并将其赋值给 Audio 标签的 source 属性，然后开始播放。