WebAudioApi StreamSource

Question

我想将 WebAudioApi 与流一起使用。预听非常重要，当我必须等待每个音频文件下载时无法实现。

下载整个音频数据不是有意的，但目前唯一可以让它工作的方法：

request.open('GET', src, true);
request.responseType = 'arraybuffer';
request.onload = function() {
  var audioData = request.response;
  //audioData is the entire downloaded audio-file, which is required by the audioCtx anyway
  audioCtx.decodeAudioData(audioData, function(buffer) {
    source.buffer = buffer;
    source.connect(audioCtx.destination);
    source.loop = true;
    source.play();
  },

  function(e){"Error with decoding audio data" + e.err});
}
request.send();

当从导航器 mediaDevices 请求流时，我发现可以使用流：

navigator.mediaDevices.getUserMedia ({audio: true, video: true})
.then(function(stream) {
    var audioCtx = new AudioContext();
    var source = audioCtx.createMediaStreamSource(stream);
    source.play();

是否可以使用 xhr 而不是导航器 mediaDevices 来获取流：

 //fetch doesn't support a range-header, which would make seeking impossible with a stream (I guess)
 fetch(src).then(response => {
    const reader = response.body.getReader();
    //ReadableStream is not working with createMediaStreamSource
    const stream = new ReadableStream({...})
    var audioCtx = new AudioContext();
    var source = audioCtx.createMediaStreamSource(stream);
    source.play();

它不起作用，因为 ReadableStream 不适用于 createMediaStreamSource。

我的第一步是实现带有搜索功能的 html-audio 元素的功能。有什么方法可以获取 xhr-stream 并将其放入 audioContext 中？

最终的想法是创建一个具有淡入淡出、剪切、预听、混音和导出功能的单轨音频编辑器。

编辑：

另一个尝试是使用 html 音频并从中创建一个 SourceNode：

var audio = new Audio();
audio.src = src;
var source = audioCtx.createMediaElementSource(audio);
source.connect(audioCtx.destination);
//the source doesn't contain the start method now
//the mediaElement-reference is not handled by the internal Context-Schedular
source.mediaElement.play();

音频元素支持流，但不能由上下文调度处理。这对于创建具有预听功能的音频编辑器非常重要。

使用音频元素缓冲区引用标准 sourceNode 的缓冲区会很棒，但我不知道如何连接它们。

Answer 1

我之前遇到过这个问题，并且一直在研究下面的演示解决方案，以使用 Streams API 分块流式传输音频。 Seeking 目前没有实现，但它可以派生。因为目前需要绕过decodeAudioData()，所以必须提供允许基于块的解码的自定义解码器：

https://github.com/AnthumChris/fetch-stream-audio