Öffnen Sie lokale Datei in Elektron und render in wavesurfer.js

Question

Ich arbeite an einer App mit Elektronen gebaut, sollte es mit Wavesurfer.js arbeiten, um eine Wellenform anzuzeigen, die die Audiodatei darstellt. Ich habe jedoch Probleme beim Öffnen der Datei mit dem fs Modul und Schieben der Datei Inhalt zu Wavesurfer über einen Blob. Die Datei lädt und alles scheint zu funktionieren, aber beim Decodieren von Wavesurfer sagt Error decoding audiobuffer.

Zwei Dinge dachte ich, vielleicht dies beeinflussen könnten:

• Die fs.readFile Funktion
• Der Blob Konstruktor nimmt eine Options Objekt als zweiter Parameter, whithin dies eine Codierung als zweiten Parameter führt die MIME-Typ über definieren Die type Eigenschaft

Bis jetzt jedoch beide Ansätze das Problem nicht beheben konnten.

Ich hoffe, jemand hat eine Lösung. (Könnte auch sein die fs.readFile Funktion ist völlig die falsche Art und Weise zu gehen und es gibt einen viel besseren Weg; Ich bin nur auf der Suche nach einer relativ performanten Art, eine Datei zu öffnen, jede Hilfe wird geschätzt) Prost! ein Skript-Tag zu main.js im index.html, fügen Sie ein div mit der ID wave-area Fügen -

Hier ist der Code ...

(Ich verlasse die vorformulierten Elektron alle aus, können Sie es leicht, indem Sie git clone https://github.com/sindresorhus/electron-boilerplate/ bekommen) irgendwo in der html und fügen Sie ein Skript-Tag der wavesurfer.js library. Außerdem benötigen Sie eine lokale Kopie des demo wav-file.

Dann in der main.js Datei ...

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 && !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); 
}); 

Answer 1

ich endlich die Lösung gefunden! Der Blob, die übergeben wird durch die loadBlob Methode Wavesurfer muss transformiert in eine Uint8Array

Der Arbeits Code wie folgt aussieht

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