媒体记录器 API 通过 Web 音频 API(不是音频元素)播放

mediarecorder api playback through Web Audio api (not audio element)

本文关键字:API 音频 元素 播放 通过 Web 媒体 记录器      更新时间:2023-09-26

我从mediaRecorder api获取捕获的blob以在Chrome中播放时遇到问题(它在Firefox中有效)。不确定这是否是 Chrome 中的错误。

它报告的错误:

定义:1 未捕获(承诺中) DOMException:无法解码音频数据

 window.AudioContext = window.AudioContext || window.webkitAudioContext;
navigator.getUserMedia = (navigator.getUserMedia ||
                          navigator.webkitGetUserMedia ||
                          navigator.mozGetUserMedia ||
                          navigator.msGetUserMedia);
var context = new AudioContext();
var record = document.querySelector('#record');
var stop = document.querySelector('#stop');
if (navigator.getUserMedia) {
  console.log('getUserMedia supported.');
  var constraints = {
    audio: true
  };
  var chunks = [];
  var onSuccess = function(stream) {
    var mediaRecorder = new MediaRecorder(stream);
    record.onclick = function() {
      mediaRecorder.start();
      console.log(mediaRecorder.state);
      console.log("recorder started");
      record.style.background = "red";
      stop.disabled = false;
      record.disabled = true;
    }
    stop.onclick = function() {
      mediaRecorder.stop();
      console.log(mediaRecorder.state);
      console.log("recorder stopped");
      record.style.background = "";
      record.style.color = "";
      stop.disabled = true;
      record.disabled = false;
    }
    mediaRecorder.onstop = function(e) {
      console.log("onstop() called.", e);
      var blob = new Blob(chunks, {
        'type': 'audio/wav'
      });
      chunks = [];
      var reader = new FileReader();
      reader.addEventListener("loadend", function() {
        context.decodeAudioData(reader.result, function(buffer) {
          playsound(buffer);
        },
        function(e) {
          console.log("error ", e)
        });
      });
      reader.readAsArrayBuffer(blob);
    }
    mediaRecorder.ondataavailable = function(e) {
      chunks.push(e.data);
    }
  }
  var onError = function(err) {
    console.log('The following error occured: ' + err);
  }
  navigator.getUserMedia(constraints, onSuccess, onError);
} else {
  console.log('getUserMedia not supported on your browser!');
}
function playsound(thisbuffer) {
  var source = context.createBufferSource();
  source.buffer = thisbuffer;
  source.connect(context.destination);
  source.start(0);
}
<button id="record">record</button>
<button id="stop">stop</button>

我完全按照原样使用了您的代码。在Chrome浏览器中一切正常。

当错误 https://codereview.chromium.org/1579693006/关闭并添加到 Chrome 管道时,此问题已得到修复。

这不再是问题。

为了关闭此循环,我怀疑这是由于上面评论中记录的 Chrome 错误造成的。看来这个错误在几年前就已经修复了,应该不再是问题,因为WebAudio现在使用ffmpeg进行解码。