title: Open local file in electron and render in wavesurfer.js
body: <p>I'm working on an app built with electron, it should work with wavesurfer.js to display a waveform representing the audio file. However, I'm having trouble opening the file using the <code>fs</code> module and pushing the file content to wavesurfer via a Blob. The file loads and everything seems to work but when decoding wavesurfer says <code>Error decoding audiobuffer</code>.</p>
  
  <p>Two things I thought maybe could influence this:</p>
  
  <ul>
  <li>The <code>fs.readFile</code> function takes an encoding as second parameter</li>
  <li>The Blob constructor takes an options object as second parameter, whithin this you can define the mimetype via the <code>type</code> property</li>
  </ul>
  
  <p>However, until now both approaches have failed to fix the problem.</p>
  
  <p>I hope somebody has a solution. (Could also be the <code>fs.readFile</code> function is entirely the wrong way to go and there's a much better way; I'm just looking for a relatively performant way of opening a file, any help is appreciated) Cheers!</p>
  
  <p>Here's the code …</p>
  
  <p>(I'm leaving out all the electron boilerplate, you can get it easily by doing <code>git clone https://github.com/sindresorhus/electron-boilerplate/</code>) – Include a script tag to <code>main.js</code> in the <code>index.html</code>, add a div with the id <code>wave-area</code> somewhere in the html and add a script tag to the the <a href="https://raw.githubusercontent.com/katspaugh/wavesurfer.js/master/dist/wavesurfer.min.js" rel="noreferrer">wavesurfer.js library</a>. Also you will need a local copy of the <a href="https://raw.githubusercontent.com/katspaugh/wavesurfer.js/master/example/media/demo.wav" rel="noreferrer">demo wav-file</a>.</p>
  
  <p>Then in the <code>main.js</code> file …</p>
  
  <pre><code>var fs = require('fs');
  
  var wavesurfer = Object.create(WaveSurfer);
  wavesurfer.init({
    container: '#wave-area'
  });
  
  fs.readFile('/path/to/demo.wav', function(err, data) {
    if (data &amp;&amp; !err) {
      console.log('has data and no error!');
    }
    var file = new window.Blob([data]);
    wavesurfer.loadBlob(file);
  }
  
  wavesurfer.on('loading', function(e) {
    console.log('loading', e);
  });
  
  wavesurfer.on('error', function(err) {
    console.log(err);
  });
  </code></pre>