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或您喜欢的任何其他方式。

＆＃13;

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

＆＃13;

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

＆＃13;

对于Chrome及其严重的iframe限制，

And as a plnkr。

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

1 个答案: