javascript - 在 Audio Web API 中下载音频文件时播放音频文件

Question

所以，我想做的是在下载音频文件时播放它，我面临的问题是音频播放器播放音频，但只有在完成下载后才播放，这是我的代码:

音频标签

<audio controls preload="all" muted="muted" > </audio>

这是我的JS

var audio = document.querySelector('audio');
var assetURL = 'url/audios/file';
var token = 'Bearer token'
var mimeCodec = 'audio/wav';

var mediaSource = new MediaSource; 
audio.src = URL.createObjectURL(mediaSource);
mediaSource.addEventListener('sourceopen', sourceOpen);
function sourceOpen(_) {
    const playPromise = audio.play();
    console.log(this.readyState); 
    var mediaSource = this;
    var sourceBuffer = mediaSource.addSourceBuffer(mimeCodec);
    fetchAB(assetURL, function (buf) {
        sourceBuffer.addEventListener('updateend', function (_) {
            mediaSource.endOfStream();
            audio.play();
            console.log(mediaSource.readyState); // ended
        });
        sourceBuffer.appendBuffer(buf);
    });
};
function fetchAB(url, cb) {
    console.log(url);
    var xhr = new XMLHttpRequest;
    xhr.open('get', url);
    xhr.setRequestHeader('Authorization', token);
    xhr.responseType = 'arraybuffer';
    xhr.onload = function () {
        cb(xhr.response);
    };
    xhr.send();
}; 

我不太确定该怎么做，任何帮助将不胜感激

Answer 1

您无法使用 Web Audio API 部分播放音频文件。您应该创建一个 <audio>元素并设置其 src 属性来加载文件，该方法将允许您流式传输文件。

const audio = document.createElement('audio');
audio.src = 'file.wav';
audio.play();

但是，您的示例显示您在加载文件时设置 header ，这不适用于上述方法，因此您应该摆脱它(尽管似乎是规避它的一种方法: Send custom HTTP request header with HTML5 audio tag )