Простой аудио-рекордер в HTML5: ошибка запрашиваемого диапазона не удовлетворяется

Question

Простой аудио-рекордер в HTML5: ошибка запрашиваемого диапазона не удовлетворяется

1

Я пытаюсь создать действительно простую страницу голосовой записи в HTML5 - все, что нужно сделать, это записать короткий фрагмент аудио с микрофона устройства, а затем позволить пользователю воспроизвести его (не требуется постоянное хранилище).

Я начал с примера кода на этой странице, а затем заменил генератор потоком от вызова getUserMedia. Результат работал в Android/Chrome, но в Chrome на моем Mac я получаю следующую ошибку:

GET blob: https://sashaforce.github.io/10801957-0b71-4bcd-9ad6-9b33db4a48d7 416 (запрошенный диапазон не подлежит)

Друг попробовал это на своем iPhone, а также обнаружил, что он не работает, хотя я не смог получить больше деталей.

У комментатора в этом вопросе упоминается, что поток закрыт при записи - не уверен, как это могло произойти здесь, но задалось вопросом, выходит ли капля из области видимости, поэтому сначала объявила его за пределами обработчика успеха, а затем попыталась сохранить на sessionStorage, но получила другое ошибка. Есть идеи? Код ниже:

<html>
<body>
<h1>Voice Record Demo</h1>

<p>Record a short voice memo and play it back.</p>

<p>
  <button>Start recording</button>
</p>

<p>
  <audio controls></audio>
</p>

<script>

  var blob;

  var handleSuccess = function(stream) {
    console.log("getUserMedia succeeded");

    var button = document.querySelector("button");
    var clicked = false;
    var chunks = [];

    var audioContext = new AudioContext();
    var mediaRecorder = new MediaRecorder(stream);


    button.addEventListener("click", function(element) {
      if (!clicked) {
        mediaRecorder.start();
        element.target.innerHTML = "Stop recording";
        clicked = true;
      } else {
        mediaRecorder.stop();
        element.target.disabled = true;
      }
    });

    mediaRecorder.ondataavailable = function(evt) {
      // push each chunk (blobs) in an array
      console.log("pushing blob");
      chunks.push(evt.data);
    };

    mediaRecorder.onstop = function(evt) {
      // Make blob out of our blobs, and open it.
      console.log("mediaRecorder.onstop");
      blob = new Blob(chunks, { 'type' : 'audio/ogg; codecs=opus' });
      console.log("starting set audio source");
      document.querySelector("audio").src = URL.createObjectURL(blob);
      console.log("finished set audio source");
    };
  };

  navigator.mediaDevices.getUserMedia({ audio: true, video: false })
       .then(handleSuccess);
</script>

</body>
</html>

Sasha 23 нояб. 2017, в 18:29

Источник

0

Я получаю ту же ошибку. Фактически, тот же код, который работал несколько дней назад, сейчас не работает. Мне интересно, изменил ли Google что-то в Chrome?
shashwat 24 нояб. 2017, в 09:03

Теги:

javascript

audio

html5

mediarecorder

1 ответ

Ещё вопросы

Я получаю ту же ошибку. Фактически, тот же код, который работал несколько дней назад, сейчас не работает. Мне интересно, изменил ли Google что-то в Chrome?

shashwat · Answer 1 · 2017-11-24T19-06-00.000Z

Я нашел исправление для этого. Я не уверен, что это идеальное решение, но я предполагаю, что исправление работает, потому что Google все еще тестирует материал:

Перейдите в chrome://flags/ и включите функции Experimental Web Platform features. Это позволяет снова записывать аудио через mediaDevices/MediaRecorder.

Я предполагаю, что Google является A/B, тестируя эту функцию, поэтому по умолчанию отключенный или включенный параметр будет отличаться от браузера к браузеру и обновления для обновления.