音频录制应用报ERR_REQUEST_RANGE_NOT_SATISFIABLE错误无法播放录音

你遇到的两个报错核心源于两处代码逻辑问题：

• MediaRecorder.stop()为异步操作，调用后不会立刻完成所有音频块的写入，你在Stop函数中同步读取recordedChunck生成Blob时，完整音频数据还未全部推入数组，生成的是空/无效Blob，既会触发资源范围不满足的加载错误，也会导致音频播放器无法识别有效源文件
• 生成Blob时未指定音频MIME类型，浏览器无法正确解析二进制数据为可播放的音频格式
• 未在每次录制前清空历史音频块数组，多次录制会出现数据叠加异常

替换原有JS代码即可，调整逻辑包含：录制前清空历史数据、监听录制完成事件再生成音频文件、指定兼容的音频MIME类型、增加播放前的判空逻辑避免异常报错：

var recordedChunck = [];
var audio_play;
var audioRecorder;

function record() {
  // 清空上一次录制的音频块
  recordedChunck = [];
  document.getElementById("record_message").innerHTML = "Recording...";
  navigator.mediaDevices.getUserMedia({
      audio: true
    })
    .then(function(data) {
      audioRecorder = new MediaRecorder(data);
      audioRecorder.addEventListener('dataavailable', function(event) {
        recordedChunck.push(event.data);
        console.log(recordedChunck);
      });
      // 等录制完全停止、所有数据写入完成后再生成音频对象
      audioRecorder.addEventListener('stop', function() {
        // 指定音频MIME类型，audio/webm是全平台兼容性最高的录制格式
        var blob = new Blob(recordedChunck, {type: 'audio/webm'});
        var audioUrl = URL.createObjectURL(blob);
        audio_play = new Audio(audioUrl);
        document.getElementById("record_message").innerHTML = "录制完成，可点击播放";
      });
      audioRecorder.start();
    }).catch(function(error) {
      console.log(error);
    });
}

function Stop() {
  audioRecorder.stop();
  document.getElementById("record_message").innerHTML = "正在停止录制...";
}

function play() {
  if(audio_play) {
    audio_play.play().catch(err => console.log("播放异常：", err));
  } else {
    alert("请先完成录制再点击播放");
  }
}

原有HTML代码无需修改，部署后授予麦克风权限即可正常实现录制、停止、播放的功能。

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