Javascript 在electron中打开本地文件并在wavesurfer.js中渲染

我正在开发一个用electron构建的应用程序，它应该与wavesurfer.js配合使用，以显示代表音频文件的波形。但是，我在使用

fs

模块打开文件并通过Blob将文件内容推送到wavesurfer时遇到问题。文件加载，一切似乎都正常，但在解码wavesurfer时，会说

解码音频缓冲区时出错

我认为有两件事可能会影响这一点：

• fs.readFile

  函数将编码作为第二个参数
• Blob构造函数将options对象作为第二个参数，在这个参数中，您可以通过

  type

  属性定义mimetype

然而，到目前为止，这两种方法都未能解决问题

我希望有人能找到解决办法。（也可能是

fs.readFile

函数是完全错误的方法，还有更好的方法；我只是在寻找一种相对高效的打开文件的方法，非常感谢任何帮助）干杯

这是密码

（我省去了所有的电子模板，你可以通过做

git克隆来轻松获得它https://github.com/sindresorhus/electron-boilerplate/

）–在

index.html

中包含一个脚本标记到

main.js

，在html中的某个地方添加一个id为

wave area

的div，并向脚本添加一个脚本标记。此外，您还需要一份本地副本

然后在

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

---

我终于找到了解决办法！通过

loadBlob

方法传递给wavesurfer的blob需要转换为

工作代码如下所示

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

---

谢谢你！它也适用于

window.createObjectURL