Сценарий записи звука работает в большинстве браузеров, кроме браузера Edge

Question

Здравствуйте. Я нашел этот скрипт, который дает вам возможность записывать аудиофайл в браузере, поэтому он работает в большинстве браузеров, кроме Edge. Поэтому при загрузке страницы я получаю эту ошибку.

• ошибка 0: «MediaRecorder» не определен

, и когда я нажимаю кнопку записи, я получаю эту ошибку.

• 0: 're c' не определено

А потом, когда я нажимаю Стоп, я получаю эту ошибку.

• 0 : 're c' не определено

Так что я не знаю, как заставить это работать на 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

React поддерживает все популярные браузеры, включая Inte rnet Explorer 9 и выше, хотя для старых браузеров требуются некоторые полифилы, такие как IE 9 и IE 10.

Answer 2

Из документа API MediaStream Recording мы видим, что объект MediaRecorder поддерживает версию Edge 79+ и недоступен для устаревшей версии браузера Edge (Microsoft Edge 44.18362.449.0 ). Браузер версии Edge 79+ основан на хроме.

Итак, чтобы использовать объект MediaRecorder, попробуйте установить новый Microsoft Edge (он основан на хроме, и в настоящее время последняя версия Edge - версия 81.0.416.53 (официальная сборка). (64-битный)).

Answer 3

Некоторые версии Edge не поддерживают API MediaRecorder, который является основой для сценария записи, который вы используете.

Вы можете использовать audio-recorder-polyfill, чтобы заполнить его. Вам нужно будет использовать какой-то пакет для получения его в вашем приложении.

Для справки по отладке. Сообщение MediaRecorder is not defined говорит о том, что в области действия нет переменной с именем MediaRecorder (т. Е. window), что означает, что она еще не определена браузером и, вероятно, не поддерживается.

В в будущем я бы предложил попытаться понять код, который вы используете, прежде чем использовать его; Вы подвергаете себя множеству ошибок, не делая этого.