React客户端如何立即播放服务器返回的WAV音频文件？

要实现请求后立即播放服务器返回的WAV音频，需要调整axios的请求配置并处理返回的二进制数据，具体操作如下：

1. 配置axios接收二进制数据 #

在请求的config中添加responseType: 'blob'，指定axios以二进制Blob格式接收响应内容：

const config = {
  headers: {
    'Content-Type': 'multipart/form-data' // 上传表单文件时需设置该请求头
  },
  responseType: 'blob' // 关键配置，确保接收二进制数据
};

2. 处理响应并播放音频 #

在then回调中，将返回的Blob数据转换为可播放的音频URL，通过Audio实例完成播放：

axios.post("http://localhost:8080/audio", data, config)
.then((response) => {
  // 基于返回的二进制数据创建WAV格式的Blob对象
  const audioBlob = new Blob([response.data], { type: 'audio/wav' });
  // 生成可被浏览器识别的音频临时URL
  const audioUrl = URL.createObjectURL(audioBlob);
  // 创建Audio实例并触发播放
  const audio = new Audio(audioUrl);
  audio.play().catch(err => {
    console.error('音频播放失败:', err);
  });
  // 播放结束后释放临时URL，避免内存泄漏
  audio.onended = () => {
    URL.revokeObjectURL(audioUrl);
  };
})
.catch((error) => {
   console.log(error);
});

注意事项 #

• 确保服务器返回的WAV音频采用浏览器支持的编码格式（如PCM编码）
• 若存在跨域问题，需在服务器端配置CORS规则，允许客户端的请求来源
• 部分浏览器要求必须有用户交互（如点击页面）后才能自动播放音频，这是浏览器的安全限制

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