在电子中打开本地文件并在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);
}