从 Blob 创建 url 时出现 416 错误

Question

我正在使用网络音频 API 来录制音频源节点流。我的代码如下所示：

var context,
    bufferLoader,
    destination,
    mediaRecorder,
    source,
    bufferList,  
    chunks = [],
    sound_paths = [],
    audioRecordings = [];

//fill in sound paths
sound_paths = ['sound.mp3', 'sound2.mp3'];

bufferLoader = new BufferLoader(
    context,
    sound_paths,
    callback
);

//fill bufferList with bufferdata
bufferLoader.load();

destination = context.CreateMediaStreamDestination();
mediaRecorder = new MediaRecorder(destination);

mediaRecorder.ondataavailable = function(e){
    chunks.push(e.data);
}

mediaRecorder.onstop = function (e) {
    var blob = new Blob(chunks, {'type': 'audio/ogg; codecs=opus'});
    var audio = document.createElement('audio');
    audio.src = URL.createObjectURL(blob);
    audioRecordings.push(audio);

    chunks = [];
};

function startRecording(){
    mediaRecorder.start();
    source = Recorder.context.createBufferSource();
    source.buffer = bufferList[0];
    source.connect(Recorder.destination);
}

function stopRecording(){
    mediaRecorder.stop();
}

//call startRecording(), then source.start(0) on user input
//call stopRecording(), then source.stop(0) on user input

我正在使用此处定义的 BufferLoader：http://middleearmedia.com/web-audio-api-bufferloader/

这在大多数情况下都有效，但有时我在创建 Blob 并从中创建 URL 时收到 416（请求的范围不可满足）。当网页开始滞后时，这种情况似乎更常发生。我猜这是因为在创建 URL 或类似的东西时 Blob 是未定义的。有没有更安全的方法来处理媒体记录器的 onstop 事件？也许使用 srcObjet 和 MediaStream 而不是 Blob 会更好？

Answer 1

对于我的网站 http://gtube.de (just an example no commercial) i am using recorder.js=>https://github.com/mattdiamond/Recorderjs。它工作得很好。也许您应该尝试记录上下文。

如果您将 mp3.s 与网络音频 api 加载到缓冲区中并同时播放它们，它肯定会起作用。 => https://www.html5rocks.com/en/tutorials/webaudio/intro/ 但这已经是你这样做的方式=>上面的例子中缺少代码所以我不得不阅读这篇文章=>也许下次你尝试做一个更短的例子。

抱歉，我对 mediaStream 了解不够 API => 我想它坏了 ;-) 如果网络音频中的某些内容不起作用，请尝试另一种方式。它仍然不是很稳定 => 特别是 Mozilla 人对它的支持很差。

从 Blob 创建 url 时出现 416 错误

416 Error when creating url from a Blob

web-audio-api