Web Audio处理音频缓冲区后用MediaRecorder录制嵌入audio元素的报错排查

• 构造函数传参不符合API规范：原代码glue()函数中new Audio(source)的写法错误，Audio构造函数的入参为音频资源的URL字符串，传入AudioBufferSourceNode对象时会被自动序列化为字符串[object AudioBufferSourceNode]，这就是浏览器尝试请求不存在的本地资源、返回404错误的直接原因。
• 音频图接线逻辑冗余：原有链路已经通过AudioBufferSourceNode实现了播放速度调整、循环起止设置的处理逻辑，不需要额外创建游离的Audio元素、经过MediaElementAudioSourceNode中转来接入录制流。这种绕路的接法不仅会断开原有带参数处理的音频链路，还会因为重复节点导致录制内容未经过参数调整。
• 异步时序逻辑错误：原代码点击播放时立刻调用source.start(0)，此时XMLHttpRequest还未完成音频加载、解码流程，source节点未绑定有效音频缓冲区，无法正常出声。
• 事件绑定位置不合理：原代码将dataavailable事件监听写在stoprecording()函数内部，每次停止录制都会新增一个监听器，容易触发重复回调，生成无效的录音地址。

• 移除冗余的glue()函数，不再创建额外的游离Audio元素参与链路。
• 调整录制流接线方式：在音频解码完成的回调中，将原本连接到扬声器输出的源节点，分一路连接到MediaStreamAudioDestinationNode录制目标节点，保证录制内容来自经过播放速度、循环参数调整后的同一路处理音频。
• 调整源节点启动时机：将source.start(0)的调用移到音频解码完成、所有参数校验通过的回调内部，解决异步时序错位问题。
• 调整事件绑定位置：将dataavailable事件的绑定逻辑移到recorder初始化环节，避免重复绑定触发多次回调。
• 优化节点创建逻辑：仅在首次调用时初始化AudioContext，后续重复操作时复用上下文，减少资源占用。

let audioCtx;
let source;
let songLength;
let mediaStreamDest; // 录制专用的流目标节点
let recorder;

// 原有DOM元素选择逻辑保持不变...

function getData() {
  // 仅首次调用时初始化AudioContext
  if (!audioCtx) audioCtx = new window.AudioContext();
  
  request = new XMLHttpRequest();
  request.open('GET', 'precky.mp3', true);
  request.responseType = 'arraybuffer';

  request.onload = function() {
    let audioData = request.response;
    audioCtx.decodeAudioData(audioData, function(buffer) {
        myBuffer = buffer;
        songLength = buffer.duration;
        
        // 每次播放新建源节点，AudioBufferSourceNode为单次触发节点
        source = audioCtx.createBufferSource();
        source.buffer = myBuffer;
        source.playbackRate.value = playbackControl.value;
        source.loop = true;

        // 原有链路：输出到扬声器
        source.connect(audioCtx.destination);
        
        // 新增链路：同一路源节点分路接到录制流目标
        if (mediaStreamDest) {
          source.connect(mediaStreamDest);
        }

        loopstartControl.setAttribute('max', Math.floor(songLength));
        loopendControl.setAttribute('max', Math.floor(songLength));

        // 解码完成后再启动源节点，解决时序错位
        source.start(0);
        play.setAttribute('disabled', 'disabled');
        playbackControl.removeAttribute('disabled');
        loopstartControl.removeAttribute('disabled');
        loopendControl.removeAttribute('disabled');
      },
      function(e){"Error with decoding audio data" + e.error});
  }

  request.send();
}

function startrecording(){
  // 初始化录制流目标
  mediaStreamDest = audioCtx.createMediaStreamDestination();
  recorder = new MediaRecorder(mediaStreamDest.stream);
  
  // 初始化时绑定数据事件，避免重复绑定
  recorder.addEventListener('dataavailable', function(e) {
    if (e.data.size > 0) {
      document.querySelector('#recording').src = URL.createObjectURL(e.data);
    }
    // 录制完成后重置状态
    recorder = false;
    mediaStreamDest = false;
  });

  recorder.start();
}

function stoprecording(){
  if (recorder && recorder.state !== 'inactive') {
    recorder.stop();
  }
}

// 点击播放按钮逻辑调整
play.onclick = function() {
  getData();
  startrecording();
}

// 原有滑块控制、停止按钮逻辑保持不变...

• MediaRecorder的录制内容完全来自接线到MediaStreamAudioDestinationNode的音频节点，只要将处理后的源节点直接接上去，不需要额外经过HTML音频元素中转，就能准确录到带播放速度调整、循环设置的音频效果。
• AudioBufferSourceNode是单次触发的节点，一旦调用stop()之后就不能再重新start()，所以每次点播放都需要新建一个同源的buffer源节点。
• 录制完成后生成的音频Blob地址，不需要手动销毁，浏览器会在页面卸载的时候自动回收资源。

内容的提问来源于stack exchange，提问作者Cameron