jquery 如何使用JavaScript将Webaded Audio转换为Blob？

c7rzv4ha 于 2023-10-17 发布在 jQuery

关注(0)|答案(3)|浏览(176)

我试图捕捉用户上传的音频，将其转换为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

另一个问题是，由于用户可能自己上传音频，音频类型可能会有所不同，预计来自本地设备音频记录器。有人能帮忙吗？谢谢.

jquery

来源：https://stackoverflow.com/questions/56096708/how-to-convert-uploaded-audio-to-blob-using-javascript

3条答案

按热度按时间

4bbkushb1#

一个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);
});

赞(0）回复(0）举报 2023-10-17

zour9fqk2#

已经找到答案了。

// 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);
    });
  });

干杯！干杯！

赞(0）回复(0）举报 2023-10-17

smdncfj33#

我知道这可能是一个老主题，但有最好的方法来做到这一点：

const blob = new Blob([file], { type: file.type })

赞(0）回复(0）举报 2023-10-17

我来回答

jquery 如何使用JavaScript将Webaded Audio转换为Blob？

3条答案

相关问题

热门标签

最新问答