如何将(音频)缓冲区转换为blob以进行重放

时间:2017-10-15 04:42:05

标签: javascript mobile-safari html5-audio audio-recording ios11

我正在努力录制音频并在移动游猎中重播。

这个来源绝对是美妙的 onaudioprocess not called on ios11

我可以看到大量的音频数据即将来临......

// get Buffers (Essentially a Uint8Array DataView of the same Float32 values)
var chunks = []
micStream.on('data', function(chunk) {
    var raw = MicrophoneStream.toRaw(chunk)
    chunks.push(raw)
});

function replay(){
    var blob = new Blob( chunks, { 'type' : 'audio/webm;codecs=opus' });
    var blobURL = window.URL.createObjectURL(blob)
    var audio = new Audio();
    audio.src = blobURL
    audio.play()
}

但我无法重播blob。

如何将原始音频数据转换为blob并重播? 我不知道哪个mineType也不能使用。

如果我可以使用MediaRecorder API,

var chunks = []
mediaRecorder.ondataavailable = (event) => {
    chunks.push(event.data);
}
function replay(){
    var blob = new Blob( chunks, { 'type' : 'audio/webm;codecs=opus' });
    var blobURL = window.URL.createObjectURL(blob)
    var audio = new Audio();
    audio.src = blobURL
    audio.play()
}

这适用于桌面Chrome,但不幸的是,Safari不支持MediaRecorder API。

有人可以帮助我吗?

提前致谢。

1 个答案:

答案 0 :(得分:0)

您可以参考GitHub上的Recorderjs: https://github.com/mattdiamond/Recorderjs

演示可以将音频录制为blob并稍后播放。它适用于桌面Chrome,但不适用于iOS 11 Safari: 实例\ example_simple_exportwav.html

通过添加audio_context.resume()对函数startRecording()进行简单修改,它可以在iOS 11 Safari上运行:

  function startRecording(button) {
    audio_context.resume();
    recorder && recorder.record();
    button.disabled = true;
    button.nextElementSibling.disabled = false;
    __log('Recording...');
  }

希望这也适合你。