Question

我正在尝试在HTML5中创建一个非常简单的录音机页面 - 它需要做的就是从设备麦克风录制一小段音频，然后允许用户播放它（不需要持久存储）。

我从this page中的示例代码开始，然后用来自调用getUserMedia的流替换振荡器。结果适用于Android / Chrome，但在我的Mac上的Chrome中，我收到以下错误：

获取blob：https://sashaforce.github.io/10801957-0b71-4bcd-9ad6-9b33db4a48d7 416（请求的范围不满足）

一位朋友在他们的iPhone上试过它，并发现它没有用，虽然我无法获得更多细节。

this question中的一位评论者提到在录制时关闭了一个流 - 不确定这可能会发生在哪里但确实想知道blob是否超出范围所以首先在成功处理程序之外声明它，然后尝试保存到sessionStorage但有一个不同的错误。有任何想法吗？代码如下：

<html>
<body>
<h1>Voice Record Demo</h1>

<p>Record a short voice memo and play it back.</p>

<p>
  <button>Start recording</button>
</p>

<p>
  <audio controls></audio>
</p>

<script>

  var blob;

  var handleSuccess = function(stream) {
    console.log("getUserMedia succeeded");

    var button = document.querySelector("button");
    var clicked = false;
    var chunks = [];

    var audioContext = new AudioContext();
    var mediaRecorder = new MediaRecorder(stream);


    button.addEventListener("click", function(element) {
      if (!clicked) {
        mediaRecorder.start();
        element.target.innerHTML = "Stop recording";
        clicked = true;
      } else {
        mediaRecorder.stop();
        element.target.disabled = true;
      }
    });

    mediaRecorder.ondataavailable = function(evt) {
      // push each chunk (blobs) in an array
      console.log("pushing blob");
      chunks.push(evt.data);
    };

    mediaRecorder.onstop = function(evt) {
      // Make blob out of our blobs, and open it.
      console.log("mediaRecorder.onstop");
      blob = new Blob(chunks, { 'type' : 'audio/ogg; codecs=opus' });
      console.log("starting set audio source");
      document.querySelector("audio").src = URL.createObjectURL(blob);
      console.log("finished set audio source");
    };
  };

  navigator.mediaDevices.getUserMedia({ audio: true, video: false })
       .then(handleSuccess);
</script>

</body>
</html>

Answer 1

我找到了解决方法。我不确定它是否是完美的解决方案，但我认为修复工作正常，因为谷歌仍在测试：

转到chrome://flags/并启用Experimental Web Platform features。这样可以再次通过mediaDevices / MediaRecorder录制音频。

我假设Google是A / B测试此功能，因此默认设置为disabled或enabled将因浏览器而异，并更新为更新。

HTML5中的简单录音机：请求范围不满足错误

1 个答案: