问题
前端一般播放音频都是通过链接播放,这个链接一般是后端接口返回,于安全考虑,后端不应该向外部返回可用链接。
那么另外一种思路就是先通过接口下载好音频文件,再播放
代码
需要注意的是
1、异步请求
2、使用xhr的方式
3、返回类型为blob,通过【window.URL.createObjectURL】方法创建临时可播放文件
4、使用audio标签播放
play: async function () {
const xhr = new XMLHttpRequest();
const url = 'XXX接口地址';
// 设置请求方式POST方式
xhr.open('POST', url, true);
// 返回类型blob
xhr.responseType = "arraybuffer";
xhr.setRequestHeader("Content-Type", "application/json");
xhr.send();
xhr.onload = function () {
const content = this.response; //获取后台响应内容
alert(content);
const wavBlob = new Blob([content], {type: 'audio/wav'});
const audio = document.getElementById('audio');
alert(audio);
audio.src = window.URL.createObjectURL(wavBlob);
alert(audio.src);
audio.play();
}
}