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

Question

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

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

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

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

我希望有人有解决方案。（也可能是 fs.readFile 函数完全是错误的方法，还有更好的方法；我只是在寻找一种相对高效的打开文件的方法，我们将不胜感激）干杯！

这是代码……

（我省略了所有电子样板，你可以通过 git clone https://github.com/sindresorhus/electron-boilerplate/ 轻松获得它）——在 index.html 中包含一个脚本标签到 main.js，添加一个div 在 html 的某处使用 ID wave-area 并向 wavesurfer.js library. Also you will need a local copy of the demo wav-file.

添加脚本标签

然后在 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 方法传递给 wavesurfer 的 blob 需要转换为 Uint8Array

工作代码如下所示

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

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

Open local file in electron and render in wavesurfer.js

javascript

fs

readfile

electron