Question

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

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

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

audio-element支持流，但不能由context-schedular处理。这对于创建具有预渲染功能的音频编辑器非常重要。

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

Answer 1

之前我遇到过这个问题，并且已经开始使用Streams API在下面的演示解决方案中流式传输音频。寻求目前尚未实施，但可以推导出来。由于当前需要绕过decodeAudioData()，因此必须提供允许基于块的解码的自定义解码器：

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

WebAudioApi StreamSource

1 个答案: