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

2022-01-10 00:00:00 readfile electron javascript fs

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

I'm working on an app built with electron, it should work with wavesurfer.js to display a waveform representing the audio file. However, I'm having trouble opening the file using the fs module and pushing the file content to wavesurfer via a Blob. The file loads and everything seems to work but when decoding wavesurfer says Error decoding audiobuffer.

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

Two things I thought maybe could influence this:

  • fs.readFile 函数将编码作为第二个参数
  • Blob 构造函数将选项对象作为第二个参数，在此您可以通过 type 属性定义 mimetype
  • The fs.readFile function takes an encoding as second parameter
  • The Blob constructor takes an options object as second parameter, whithin this you can define the mimetype via the type property

但是，到目前为止，这两种方法都未能解决问题.

However, until now both approaches have failed to fix the problem.

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

I hope somebody has a solution. (Could also be the fs.readFile function is entirely the wrong way to go and there's a much better way; I'm just looking for a relatively performant way of opening a file, any help is appreciated) Cheers!

这是代码……

(我省略了所有电子样板，您可以通过 git clone https://github.com/sindresorhus/electron-boilerplate/ 轻松获得它) - 包含一个脚本标签到 index.html 中的 main.js，在 html 的某处添加一个 id 为 wave-area 的 div 并添加一个 script 标签到wavesurfer.js 库.您还需要 demo wav 文件的本地副本.

(I'm leaving out all the electron boilerplate, you can get it easily by doing git clone https://github.com/sindresorhus/electron-boilerplate/) – Include a script tag to main.js in the index.html, add a div with the id wave-area somewhere in the html and add a script tag to the the 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);
});

推荐答案

我终于找到了解决方案！通过 loadBlob 方法传递给 wavesurfer 的 blob 需要转换为 Uint8Array

I finally found the solution! The blob which is passed to wavesurfer through the loadBlob method needs to transformed into an Uint8Array

工作代码如下所示

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

相关文章