录音机脚本适用于除 Edge 浏览器以外的大多数浏览器

Question

您好，我发现这个脚本可以让您在浏览器中录制音频文件，因此它适用于除 Edge 之外的大多数浏览器。所以在页面加载时我得到这个错误。错误 0：未定义“MediaRecorder”当我按下录制按钮时，我得到了这个错误。0: 'rec' 未定义然后当我按下停止时，我得到了这个错误。0: 'rec' 未定义所以我不知道如何让它在 Edge 上工作。我试图弄乱它，但我仍然不知道怎么弄，而且我在网上找不到任何可以帮助我解决这个问题的资源。这是代码navigator.mediaDevices.getUserMedia({    audio: true  })  .then(stream => {    handlerFunction(stream)  })function handlerFunction(stream) {  rec = new MediaRecorder(stream);  rec.ondataavailable = e => {    audioChunks.push(e.data);    if (rec.state == "inactive") {      let blob = new Blob(audioChunks, {        type: 'audio/mpeg-3'      });      recordedAudio.src = URL.createObjectURL(blob);      recordedAudio.controls = true;      recordedAudio.autoplay = true;      sendData(blob)    }  }}function sendData(data) {}record.onclick = e => {  console.log('I was clicked')  record.disabled = true;  record.style.backgroundColor = "blue"  stopRecord.disabled = false;  audioChunks = [];  rec.start();}stopRecord.onclick = e => {  console.log("I was clicked")  record.disabled = false;  stop.disabled = true;  record.style.backgroundColor = "red"  rec.stop();}#record {  background-color: red;  /* Green */  border-width: medium;  border-color: black;  color: white;  padding: 20px;  text-align: center;  text-decoration: none;  display: inline-block;  font-size: 16px;  margin: 4px 2px;  cursor: pointer;  max-width: 50%;  max-height: 15%;  border-radius: 50%;  left: 100px;  right: 100px;  position: relative;}#stopRecord {  background-color: green;  /* Green */  border-width: medium;  border-color: black;  color: white;  padding: 20px;  text-align: center;  text-decoration: none;  display: inline-block;  font-size: 16px;  margin: 4px 2px;  cursor: pointer;  max-width: 50%;  max-height: 15%;  border-radius: 50%;  left: 100px;  right: 100px;  position: relative;}h2 {  left: 100px;  position: relative;}

Answer 1

某些版本的 Edge 不支持 MediaRecorder API，这是您正在使用的录制脚本的主干。

您可以使用audio-recorder-polyfill它来填充它。您需要使用某种捆绑器才能在您的应用程序中获取它。

供调试参考。该MediaRecorder is not defined消息告诉您在范围内没有调用变量MediaRecorder（即window），这意味着它尚未由浏览器定义，并且可能不是受支持的功能。

将来，我建议在使用之前尝试了解您使用的代码；如果不这样做，您就会将自己暴露在许多错误中。

Answer 2

React 支持所有流行的浏览器，包括 Internet Explorer 9 及更高版本，尽管一些旧浏览器需要一些 polyfill，例如 IE 9 和 IE 10。

Answer 3

从MediaStream Recording API 文档中，我们可以看到MediaRecorder对象支持 Edge 79+ 版本，并且不适用于旧版 Edge 浏览器（Microsoft Edge 44.18362.449.0）。Edge 79+ 版本的浏览器是基于铬的。

因此，要使用 MediaRecorder 对象，请尝试安装新的 Microsoft Edge（它是基于 chromium 的，目前最新的 Edge 版本是版本 81.0.416.53（官方构建）（64 位））。