录音机脚本适用于除 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 位））。