如何使用Javascript將上傳的音頻轉換為Blob？

Question

我正在嘗試捕獲用戶上傳的音頻，將其轉換為Blob，然后使用wavesurfer.js顯示波形。

我在這里遵循這個指示https://bl.ocks.org/nolanlawson/62e747cea7af01542479

這是代碼

// Convert audio to Blob
  $('#audioFileInput').on('change', function () {
    var file = $('#audioFileInput')[0].files[0];
    var fileName = file.name;
    var fileType = file.type;
    var fileReader = new FileReader();
    fileReader.onloadend = function (e) {
      var arrayBuffer = e.target.result;
      blobUtil.arrayBufferToBlob(arrayBuffer, fileType).then(function (blob) {
        console.log('here is a blob', blob);
        console.log('its size is', blob.size);
        console.log('its type is', blob.type);
        surfTheBlob(blob);
      }).catch(console.log.bind(console));
    };
    fileReader.readAsArrayBuffer(file);
  });

但它說

blobUtil.arrayBufferToBlob(...).then is not a function

另一個問題是，由於用戶可能自己上傳音頻，因此音頻類型可能會有所不同，預計來自本機設備錄音機。 有人可以幫忙嗎？ 謝謝。

Answer 1

已經找到了答案。

// Convert audio to Blob
$('#audioFileInput').on('change', function () {
    var file = $('#audioFileInput')[0].files[0];
    var fileName = file.name;
    var fileType = file.type;
    var url = URL.createObjectURL(file);
    fetch(url).then(function(response) {
      if(response.ok) {
        return response.blob();
      }
      throw new Error('Network response was not ok.');
    }).then(function(blob) {
      surfTheBlob(blob);
    }).catch(function(error) {
      console.log('There has been a problem with your fetch operation: ', error.message);
    });
  });

干杯!

Answer 2

File對象，就像你在input.files File獲得的input.files ，已經是一個Blob：

 inp.onchange = e => console.log(inp.files[0] instanceof Blob) // true 

 <input type="file" id="inp"> 

所以你真正需要的是直接將這個文件傳遞給你的庫：

$('#audioFileInput').on('change', function () {
  var file = this.files[0];
  surfTheBlob(file);
});