title: Failed to load resource: net::ERR_REQUEST_RANGE_NOT_SATISFIABLE - Audio recorder API Error
body: <p>My recording application is giving me the following error:</p>
  <blockquote>
  <p>blob:<a href="https://theharnishes.com/f86f14a7-53cf-4d21-a137-deb145c95b73:1" rel="nofollow noreferrer">https://theharnishes.com/f86f14a7-53cf-4d21-a137-deb145c95b73:1</a> Failed to load resource: net::ERR_REQUEST_RANGE_NOT_SATISFIABLE</p>
  </blockquote>
  <p>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:</p>
  <blockquote>
  <p>Uncaught (in promise) DOMException: The element has no supported sources.</p>
  </blockquote>
  <p>This error I understand. Because I have requested the video device rather than the audio device. I later changed <code>navigator.mediaDevices.getUserMedia({video:true})</code> to <code>{audio:true}</code>.
  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.</p>
  <p><a href="https://jsfiddle.net/e9bmwsh1/" rel="nofollow noreferrer">Live example</a> (be sure to allow the use of your microphone). <sub>It is outsourced, because Stack Snippets don't allow the use of <code>getUserMedia</code>.</sub></p>
  <pre class="lang-js prettyprint-override"><code>var recordedChunck = [];
  var audio_play;
  var audioRecorder;
  
  function record() {
    document.getElementById(&quot;record_message&quot;).innerHTML = &quot;Recording...&quot;;
    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();
  }
  </code></pre>
  <pre class="lang-html prettyprint-override"><code>&lt;p id=&quot;record_message&quot;&gt;
  &lt;/p&gt;
  &lt;button onclick=&quot;record()&quot; style=&quot;color:blue; font-size:16px;&quot;&gt;
  RECORD
  &lt;/button&gt;
  &lt;button onclick=&quot;Stop()&quot; style=&quot;color:blue; font-size: 16px;&quot;&gt;
  STOP RECORDING
  &lt;/button&gt;
  &lt;button onclick=&quot;play()&quot;&gt;
  PLAY
  &lt;/button&gt;
  </code></pre>