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

Posted 2023-03-07

【中文标题】在 electron 中打开本地文件并在 wavesurfer.js 中渲染

【英文标题】：Open local file in electron and render in wavesurfer.js

【发布时间】：2015-09-27 10:33:38

【问题描述】：

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

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

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

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

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

这是代码……

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

【参考方案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);

【讨论】：

谢谢！它也适用于window.createObjectURL