音频记录器脚本在大多数浏览器上工作，边缘浏览器除外

Question

你好，我找到了这个脚本，它使您能够在浏览器中记录音频文件，因此，除了Edge之外，大多数浏览器都可以这样做。因此，在页面加载时，我得到了这个错误。

• 错误0：“MediaRecorder”未定义

当我按下记录按钮，我就会得到这个错误。

• 0:未定义“rec”

然后，当我按下停止键，就会得到这个错误。

• 0:未定义“rec”

所以我不知道怎样才能让这件事在边缘上发挥作用。

我试着弄乱它，但我仍然找不出它是如何做到的，我也找不到任何可以帮助我解决这个问题的在线信息来源。

这是代码

​

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;
}

#recordedAudio {
  left: 100px;
  right: 100px;
  position: relative;
}

<h2>Record</h2>
<p>
  <button id=record></button>
  <button id=stopRecord disabled>Stop</button>
</p>
<p>
  <audio id=recordedAudio></audio>
</p>

​

Answer 1

有些版本的Edge不支持MediaRecorder API，因为它是您正在使用的记录脚本的主干。

您可以使用audio-recorder-polyfill来填充它。您将需要使用某种类型的捆绑器，以使其在您的应用程序。

以供调试参考。MediaRecorder is not defined消息告诉您，作用域中没有名为MediaRecorder的变量(即window)，这意味着浏览器尚未定义它，很可能不支持它。

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

Answer 2

React支持所有流行的浏览器，包括Internet 9和更高版本，尽管一些较旧的浏览器(如IE9和IE10)需要一些填充。

Answer 3

从MediaStream记录API文档中，我们可以看到MediaRecorder对象支持边缘79+版本，并且对旧版本的边缘浏览器(Microsoft 44.18362.449.0)不可用。边缘79+版本浏览器是基于铬的。

因此，要使用MediaRecorder对象，请尝试安装新微软边缘(它是基于铬的，目前最新的边缘版本是81.0.416.53 (官方版本)(64位))。