录音机脚本可在除Edge浏览器以外的大多数浏览器上使用

Question

您好，我发现此脚本使您能够在浏览器中录制音频文件，因此该功能适用​​于除Edge之外的大多数浏览器。因此，在页面加载时出现此错误。

• 错误0：未定义'MediaRecorder'

并且当我按下记录按钮时，我收到此错误。

• 0：'rec'未定义

然后当我按Stop时，我收到此错误。

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

#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进行填充。您需要使用某种捆绑程序才能将其添加到您的应用中。

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

[以后，建议您在使用代码之前先了解一下使用的代码；您将自己暴露在许多错误中而没有这样做。

Answer 2

React支持所有流行的浏览器，包括Internet Explorer 9和更高版本，尽管对于诸如IE 9和IE 10之类的较旧的浏览器，某些填充是必需的。