mspae mspae - 6 months ago 29
Javascript Question

Open local file in electron and render in wavesurfer.js

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

module and pushing the file content to wavesurfer via a Blob. The file loads and everything seems to work but when decoding wavesurfer says
Error decoding audiobuffer

Two things I thought maybe could influence this:

  • The
    function takes an encoding as second parameter

  • The Blob constructor takes an options object as second parameter, whithin this you can define the mimetype via the

However, until now both approaches have failed to fix the problem.

I hope somebody has a solution. (Could also be the
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!

Here's the code …

(I'm leaving out all the electron boilerplate, you can get it easily by doing
git clone
) – Include a script tag to
in the
, add a div with the id
somewhere in the html and add a script tag to the the wavesurfer.js library. Also you will need a local copy of the demo wav-file.

Then in the
file …

var fs = require('fs');

var wavesurfer = Object.create(WaveSurfer);
container: '#wave-area'

fs.readFile('/path/to/demo.wav', function(err, data) {
if (data && !err) {
console.log('has data and no error!');
var file = new window.Blob([data]);

wavesurfer.on('loading', function(e) {
console.log('loading', e);

wavesurfer.on('error', function(err) {


I finally found the solution! The blob which is passed to wavesurfer through the loadBlob method needs to transformed into an Uint8Array

The working code looks like this

fs.readFile('/path/to/demo.wav', function(err, buffer) {
  // …
  var blob = new window.Blob([new Uint8Array(buffer)]);