![](/img/trans.png)
[英]How to convert .wav response in to blob url so that I can play as audio in client side using javascript
[英]How to Convert Uploaded Audio to Blob using Javascript?
我正在尝试捕获用户上传的音频,将其转换为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
另一个问题是,由于用户可能自己上传音频,因此音频类型可能会有所不同,预计来自本机设备录音机。 有人可以帮忙吗? 谢谢。
已经找到了答案。
// 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);
});
});
干杯!
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);
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.