前端播放后端传的语音流

后端接口返回数据

Content-Type: audio/x-wav

正常情况下数据Preview格式如下：

若文件返回失败会有如下提示

 

前端播放处理方式：

1 . 直接使用audio标签，src输入后端接口路径

<audio src='http://xxx.xx/api/getFile' />

2. 请求失败需要添加提示，对数据处理 ，转为blob数据

// 1. 请求时添加 responseType: 'blob'，这样返回数据为blob数据
const res = await axios({
  method: 'get',
  url: '/api/123',
  responseType: 'blob'
});

// 2. 使用window.URL.createObjectURL
let url = undefined
// 若返回数据为application/json 格式说明文件获取失败，此时需要提示用户
if (res.type == 'application/json') {
     const reader = new FileReader();
     reader.readAsText(res, 'utf-8');
     reader.onload = () => {
         const { msg } = JSON.parse(reader?.result as string);
         message.error(msg)
     }
} else {
    url = window.URL.createObjectURL(res)
}

// 3. 组件卸载
if(url){
    window.URL.revokeObjectURL(url)
}