如何播放从服务器下载的MP3文件？流式数据新手求助

安全阿岳

2026-8-4

问题分析与解决

你的代码核心问题是没有设置XMLHttpRequest的响应类型，默认情况下xhr.response会返回文本格式内容，而音频播放器需要二进制音频数据，因此无法识别播放。

修改后的代码

servpl.onclick = e =>{
  const xhr = new XMLHttpRequest();
  // 关键：设置响应类型为blob（二进制大对象）
  xhr.responseType = 'blob';
  xhr.open('GET', 'sounds/test.mp3');

  xhr.send();
  xhr.onload = function() {
    if (xhr.status != 200) {
      alert(`Error ${xhr.status}: ${xhr.statusText}`);
    } else {
      alert(`Done, got ${xhr.response.size} bytes`);
      // 将blob对象转为可被audio识别的临时URL
      const audioUrl = URL.createObjectURL(xhr.response);
      recordedAudio.src = audioUrl;
      // 处理浏览器自动播放限制
      recordedAudio.play().catch(err => {
        console.error('播放失败:', err);
        alert('播放失败，请检查浏览器自动播放策略');
      });

      document.getElementById("display").innerHTML += " after play sound";
      // 播放结束后释放临时URL，避免内存泄漏
      recordedAudio.onended = () => {
        URL.revokeObjectURL(audioUrl);
      };
    }
  };
  document.getElementById("display").innerHTML += " Server Play clicked";
};