问题:后台直接返回的bytes文件流前端无法播放,现在需要前端播放后台返回的音频,当前系统的音频并不是来自于自身
后端:
说明:当前系统A接受到用户请求后会将请求转发给系统B,系统B返回的是.wav的音频文件;不考虑将系统B的文件下载到本地然后返回url的方法
前端:
说明:前端需要响应后台的bytes音频流
F12:
问题:后台直接返回的bytes文件流前端无法播放,现在需要前端播放后台返回的音频,当前系统的音频并不是来自于自身
后端:
说明:当前系统A接受到用户请求后会将请求转发给系统B,系统B返回的是.wav的音频文件;不考虑将系统B的文件下载到本地然后返回url的方法
该回答引用chatgpt:
在前端中,可以通过 Audio 对象播放音频文件,而将二进制流转化为 Audio 对象的方法有很多种。以下是其中两种可能的方法:
将二进制流转化为 Blob 对象,然后使用 URL.createObjectURL() 方法创建 URL,再将 URL 作为 Audio 对象的 src 属性的值,最后调用 play() 方法播放音频。
fetch(url)
.then(res => res.blob())
.then(blob => {
const audio = new Audio();
audio.src = URL.createObjectURL(blob);
audio.play();
});
直接将二进制流转化为 base64 编码的字符串,然后将该字符串作为 data URI 的一部分,最后将 data URI 赋给 Audio 对象的 src 属性。
fetch(url)
.then(res => res.arrayBuffer())
.then(buffer => {
const dataUri = 'data:audio/wav;base64,' + btoa(String.fromCharCode(...new Uint8Array(buffer)));
const audio = new Audio();
audio.src = dataUri;
audio.play();
});
需要注意的是,这两种方法都可能存在兼容性问题,因此建议在不同浏览器中进行测试。另外,在使用第二种方法时,如果音频文件过大,可能会导致浏览器崩溃或卡顿,因此最好使用第一种方法