javascript - 在 Electron 中打开本地文件并在 wavesurfer.js 中渲染

Question

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

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

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

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

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

这是代码……

(我省略了所有 Electron 样板文件，您可以通过 git clone https://github.com/sindresorhus/electron-boilerplate/ 轻松获得它)– 包含一个脚本标签在 index.html 的 main.js 中，在 html 的某处添加一个 id 为 wave-area 的 div，并添加一个脚本标签到wavesurfer.js library .您还需要 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);
}