我正在尝试在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>
答案 0 :(得分:0)
我找到了解决方法。我不确定它是否是完美的解决方案,但我认为修复工作正常,因为谷歌仍在测试:
转到chrome://flags/
并启用Experimental Web Platform features
。这样可以再次通过mediaDevices / MediaRecorder录制音频。
我假设Google是A / B测试此功能,因此默认设置为disabled或enabled将因浏览器而异,并更新为更新。