在電子中打開本地文件並在wavesurfer.js中渲染

Question

我正在開發一個用電子構建的應用程序，它應該與wavesurfer.js一起顯示表示音頻文件的波形。 但是，我無法使用fs模塊打開文件，並通過Blob將文件內容推送到waveurfer。 文件加載，一切似乎都工作，但解碼waveurfer說Error decoding audiobuffer 。

我認為可能有兩件事可能影響到這一點：

• fs.readFile函數將編碼作為第二個參數
• Blob構造函數將選項對象作為第二個參數，在此您可以通過type屬性定義mimetype

但是，到目前為止，這兩種方法都無法解決問題。

我希望有人有解決方案。 （也可能是fs.readFile函數完全是錯誤的方式，並且有一個更好的方法;我只是在尋找一種相對fs.readFile的打開文件的方式，感謝任何幫助）干杯！

這是代碼......

（我要省略所有的電子樣板，你可以通過git clone https://github.com/sindresorhus/electron-boilerplate/輕松搞定） - 在index.html包含一個腳本標簽到main.js ，在html中的某處添加一個id為wave-area的div，並將一個腳本標記添加到wavesurfer.js庫中 。 您還需要演示wav文件的本地副本。

然后在main.js文件中...

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

我終於找到了解決方案！ 通過loadBlob方法傳遞給waveurfer的blob需要轉換為Uint8Array

工作代碼看起來像這樣

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