美文网首页
vue播放链接音频

vue播放链接音频

作者: 开心的小赵 | 来源:发表于2023-08-06 11:19 被阅读0次

问题

前端一般播放音频都是通过链接播放,这个链接一般是后端接口返回,于安全考虑,后端不应该向外部返回可用链接。
那么另外一种思路就是先通过接口下载好音频文件,再播放

代码

需要注意的是
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();
            }
        }

相关文章

网友评论

      本文标题:vue播放链接音频

      本文链接:https://www.haomeiwen.com/subject/beaipdtx.html