問題
前端一般播放音頻都是通過鏈接播放,這個鏈接一般是后端接口返回,于安全考慮,后端不應(yīng)該向外部返回可用鏈接间螟。
那么另外一種思路就是先通過接口下載好音頻文件,再播放
代碼
需要注意的是
1损肛、異步請求
2厢破、使用xhr的方式
3、返回類型為blob治拿,通過【window.URL.createObjectURL】方法創(chuàng)建臨時可播放文件
4摩泪、使用audio標(biāo)簽播放
play: async function () {
const xhr = new XMLHttpRequest();
const url = 'XXX接口地址';
// 設(shè)置請求方式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; //獲取后臺響應(yīng)內(nèi)容
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();
}
}