問題描述

我正在開發一個使用電子構建的應用程序，它應該與 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);
}

這篇關于在 electron 中打開本地文件并在 wavesurfer.js 中渲染的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！