在电子中打开本地文件并在wavesurfer.js中渲染

Question

我正在处理使用电子构建的应用程序，它应该与wavesurfer.js一起使用以显示表示音频文件的波形。但是，我无法使用fs模块打开文件，并通过Blob将文件内容推送到waveurfer。文件加载，一切似乎都有效，但解码时waveurfer说Error decoding audiobuffer。

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

• fs.readFile函数将编码作为第二个参数
• Blob构造函数将选项对象作为第二个参数，在此您可以通过type属性
定义mimetype

但是，到目前为止，这两种方法都无法解决问题。

我希望有人有解决方案。 （也可能是fs.readFile功能完全是错误的方式，并且那里有更好的方法;我只是在寻找一种相对高效的打开文件的方式，任何帮助都表示赞赏）干杯！

这是代码......

（我将所有电子样板丢弃，您可以通过git clone https://github.com/sindresorhus/electron-boilerplate/轻松获取） - 在main.js的{​​{1}}中添加脚本标记，添加在html中某处带有标识index.html的div，并向wavesurfer.js library添加脚本标记。您还需要demo wav-file的本地副本。

然后在wave-area档案中......

main.js

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