我正在尝试用 HTML5 创建一个非常简单的录音机页面 - 它所需要做的就是从设备麦克风录制一小段音频，然后允许用户播放它(不需要持久存储)。
我从 this page 中的示例代码开始，然后用调用 getUserMedia 的流替换振荡器。结果在 Android/Chrome 中有效，但在我的 Mac 上的 Chrome 中出现以下错误:
获取 blob:https://sashaforce.github.io/10801957-0b71-4bcd-9ad6-9b33db4a48d7 416(请求的范围无法满足)
一位 friend 在他们的 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>最佳答案
我找到了解决这个问题的方法。我不确定这是否是完美的解决方案，但我假设该修复有效，因为 Google 仍在测试内容:
转到 chrome://flags/ 并启用实验性 Web 平台功能。这将再次通过 mediaDevices/MediaRecorder 启用音频录制。
我假设 Google 正在对此功能进行 A/B 测试，因此禁用或启用的默认设置会因浏览器和更新而异。
关于javascript - HTML5 中的简单录音机 : Requested Range Not Satisfiable error，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47460767/