javascript - 如何以编程方式播放刚在HTML5中录制的webm音频？

Question

我只是录制了一段音频，我想用纯Javascript代码播放它。

这是我的代码:

navigator.getUserMedia({audio: true},function(stream){
    var recorder = new MediaRecorder(stream);

    recorder.start(1000);

    recorder.ondataavailable = function(e){
        console.log(e.data);
        // var buffer = new Blob([e.data],{type: "video/webm"});
    };
});

我必须在ondataavailable中做什么，以便我可以播放存储在内存中的音频块，而无需使用HTML中的audio或video标签？

Answer 1

我真的不明白为什么您不想要音频或视频元素，但是无论如何，第一步是相同的。
MediaRecorder.ondataavailable事件将定期触发，并包含一个data属性，该属性包含一部分已录制的媒体。
您需要存储这些块，以便能够在记录结束时将它们合并到单个Blob中。
要合并它们，您只需调用new Blob(chunks_array)，其中chunks_array是一个数组，其中包含您从dataavailable.data获得的所有块Blob。

一旦获得了最终的Blob，您就可以将其用作普通媒体，例如，借助URL.createObjectURL方法，可以在MediaElement中播放它，或者将其转换为ArrayBuffer，然后通过WebAudio API或任何其他方式对其进行解码你想。

navigator.mediaDevices.getUserMedia({audio: true})
.then(recordStream)
.catch(console.error);

function recordStream(stream){
  const chunks = []; // an Array to store all our chunks
  const rec = new MediaRecorder(stream);
  rec.ondataavailable  = e => chunks.push(e.data);
  rec.onstop = e => {
    stream.getTracks().forEach(s => s.stop());
    finalize(chunks);
  };
  rec.start();
  setTimeout(()=>rec.stop(), 5000); // stop the recorder in 5s
}
function finalize(chunks){
  const blob = new Blob(chunks);
  playMedia(blob);
}
function playMedia(blob){
  const ctx = new AudioContext();
  const fileReader = new FileReader();
  fileReader.onload = e =>  ctx.decodeAudioData(fileReader.result)
  .then(buf => {
    btn.onclick = e => {
      const source = ctx.createBufferSource();
      source.buffer = buf;
      source.connect(ctx.destination);
      source.start(0);
    };
    btn.disabled = false;
  });
  fileReader.readAsArrayBuffer(blob);
}

<button id="btn" disabled>play</button>

chromet的And as a plnkr及其严格的iframe限制。