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

Posted 2023-02-25

【中文标题】在 Audio Web API 中下载音频文件时播放

【英文标题】：Playing audio file while downloading it in Audio web API

【发布时间】：2019-03-21 15:06:22

【问题描述】：

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

音频标签

<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();
; 

我不太清楚怎么做，任何帮助将不胜感激

【问题讨论】：

除了播放之外，您还需要下载文件的二进制内容吗？

不，只是同时播放音频和下载

你能创建一个简单的演示并提供一个链接吗？

【参考方案1】：

您无法使用 Web Audio API 部分播放音频文件。您应该创建一个 <audio> 元素并设置其 src-attribute 以加载文件，这种方法可以让您流式传输文件。

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

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

【参考方案2】：

我认为您可以将代码简化为：

var audio = new Audio('file.wav');

var promise = audio.play();

// Older browsers may not return promise
if (promise)
    promise.catch(function()  
        // Couldn't play audio for some reason
    );

内置的Audio类支持缓冲，播放会尽快开始，无需等待整个文件下载完毕。

【讨论】：

感谢您的帮助，但仍然遇到同样的问题。