title: Javascript - WAV file data to byte array conversion issue - getting lot of noise
body: <p>I have an API that returns a WAV file. In my Javascript I am trying to convert the raw data to a byte array. I am getting a lot of noise/static in the final audio.
  Can someone please tell me how I can fix the byte array conversion (getByteArray method). Thank you!</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>  var fileElem = document.getElementById('file-input');
    fileElem.addEventListener('change', readSingleFile, false);
  
    function readSingleFile(e) {
      var file = e.target.files[0];
      if (!file) {
        return;
      }
      var reader = new FileReader();
      reader.onload = function(e) {
        var contents = e.target.result;
        playAudio(contents);
      };
      reader.readAsText(file);
    }
  
    function playAudio(dataStr) {
      var array = getByteArray(dataStr);
      var isWAV = array[0] === 82 &amp;&amp; array[1] === 73 &amp;&amp; array[2] === 70 &amp;&amp; array[3] === 70 &amp;&amp;
        array[8] === 87 &amp;&amp; array[9] === 65 &amp;&amp; array[10] === 86 &amp;&amp; array[11] === 69;
      console.log("Is a valid WAV File? : " + isWAV);
      var message = document.getElementById('message');
      if (isWAV) {
        message.innerHTML = "";
        // Create blob from Uint8Array &amp; Object URL.
        var blob = new Blob([array], {
          type: 'audio/wav'
        });
        var url = URL.createObjectURL(blob);
  
        // Get DOM elements.
        var audio = document.getElementById('audio');
        var source = document.getElementById('source');
  
        // Insert blob object URL into audio element &amp; play.
        source.src = url;
        audio.load();
        audio.play();
      } else {
        message.innerHTML = "You selected a non WAV file!!!";
      }
    }
  
    function getByteArray(dataStr) {
      var array = new Uint8Array(dataStr.length);
      for (var i = 0; i &lt; dataStr.length; i++) {
        array[i] = dataStr.charCodeAt(i);
      }
      return array;
    }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;h4&gt;Select an WAV File&lt;/h4&gt;
  &lt;h4&gt;&lt;span id="message" style="color: red"&gt;&lt;/span&gt;&lt;/h4&gt;
  &lt;input type="file" id="file-input" /&gt;
  &lt;hr/&gt;
  &lt;audio controls="controls" id="audio"&gt;
    Your browser does not support the &amp;lt;audio&amp;gt; tag.
    &lt;source id="source" src="" type="audio/wav" /&gt;
  &lt;/audio&gt;</code></pre>
  </div>
  </div>
  </p>