My recording application is giving me the following error:

blob:https://theharnishes.com/f86f14a7-53cf-4d21-a137-deb145c95b73:1 Failed to load resource: net::ERR_REQUEST_RANGE_NOT_SATISFIABLE

You can see three buttons. PLAY, RECORD, and STOP RECORDING. From its context, we should know what button does what. When I clicked the RECORD button, nothing is displayed in the console. When I clicked the STOPPING RECORDING, first, the console logs my array of audio chunk and then the error message. Finally when I clicked the PLAY button, another strange error appeared:

Uncaught (in promise) DOMException: The element has no supported sources.

This error I understand. Because I have requested the video device rather than the audio device. I later changed navigator.mediaDevices.getUserMedia({video:true}) to {audio:true}. I went back to my webpage and the last error didn't go away. I want the application to play the recorded audio when the PLAY button is clicked.

Live example (be sure to allow the use of your microphone). _{It is outsourced, because Stack Snippets don't allow the use of getUserMedia.}

var recordedChunck = [];
var audio_play;
var audioRecorder;

function record() {
  document.getElementById("record_message").innerHTML = "Recording...";
  navigator.mediaDevices.getUserMedia({
      audio: true
    })
    .then(function(data) {
      audioRecorder = new MediaRecorder(data);
      audioRecorder.start();
      audioRecorder.addEventListener('dataavailable', function(event) {
        recordedChunck.push(event.data);
        console.log(recordedChunck);
      });
    }).catch(function(error) {
      console.log(error);
    });
}

function Stop() {
  audioRecorder.stop();
  var blob = new Blob(recordedChunck);
  var audioUrl = URL.createObjectURL(blob);
  audio_play = new Audio(audioUrl);
}

function play() {
  audio_play.play();
}

<p id="record_message">
</p>
<button onclick="record()" style="color:blue; font-size:16px;">
RECORD
</button>
<button onclick="Stop()" style="color:blue; font-size: 16px;">
STOP RECORDING
</button>
<button onclick="play()">
PLAY
</button>