javascript readAsArrayBuffer返回空数组缓冲区 [英] javascript readAsArrayBuffer returns empty Array Buffer
问题描述
我正在尝试使用FileReader readAsArrayBuffer属性读取本地文件。
读取成功，在onload回调中，我在reader.result中看到了Array Buffer对象。但是Array Buffer只是空的。设置长度，但不设置数据。我如何获得这些数据？
I am trying to read a local file using the FileReader readAsArrayBuffer property. The read is success and in the "onload" callback, I see the Array Buffer object in reader.result. But the Array Buffer is just empty. The length is set, but not the data. How do I get this data?
这是我的代码
<!DOCTYPE html>
<html>
<body>
<input type="file" id="file" />
</body>
<script>
function handleFileSelect(evt) {
var files = evt.target.files; // FileList object
var selFile = files[0];
var reader = new FileReader();
reader.onload = function(e) {
console.log(e.target.result);
};
reader.onerror = function(e) {
console.log(e);
};
reader.readAsArrayBuffer(selFile);
}
document.getElementById('file').addEventListener('change', handleFileSelect, false);
</script>
</html>
reader.result的控制台输出
the console output for reader.result
e.target.result
ArrayBuffer {}
e.target.result.byteLength
25312
谁能告诉我如何获取这些数据？
有一些安全问题吗？
没有错误，onerror没有被执行。
Can anyone tell me how to get this data? is there some security issue? There is no error, the onerror is not executed.
来自评论：你可以告诉我如何访问缓冲内容？我实际上是在尝试使用 AudioContext 播放音频文件......为此，我需要缓冲区数据......
From comments: Can you please let me know how to access the buffer contents? I am actually trying to play an audio file using AudioContext... For that I would need the buffer data...
推荐答案
好吧，使用 AudioContext 播放声音并不是那么难。
Well, playing a sound using the AudioContext stuff isn't actually that hard.
- 设置上下文。
- 将任何数据加载到缓冲区中（例如
FileReader对于本地文件，XHR用于远程资料）。 - 设置新资源并启动它。
- Set up the context.
- Load any data into the buffer (e.g.
FileReaderfor local files,XHRfor remote stuff). - Setup a new source, and start it.
总而言之，这样的事情：
All in all, something like this:
var context = new(window.AudioContext || window.webkitAudioContext)();
function playsound(raw) {
console.log("now playing a sound, that starts with", new Uint8Array(raw.slice(0, 10)));
context.decodeAudioData(raw, function (buffer) {
if (!buffer) {
console.error("failed to decode:", "buffer null");
return;
}
var source = context.createBufferSource();
source.buffer = buffer;
source.connect(context.destination);
source.start(0);
console.log("started...");
}, function (error) {
console.error("failed to decode:", error);
});
}
function onfilechange(then, evt) {
var reader = new FileReader();
reader.onload = function (e) {
console.log(e);
then(e.target.result);
};
reader.onerror = function (e) {
console.error(e);
};
reader.readAsArrayBuffer(evt.target.files[0]);
}
document.getElementById('file')
.addEventListener('change', onfilechange.bind(null, playsound), false);
现场观看 jsfiddle ，适用于Firefox和Chrome。
See this live in a jsfiddle, which works for me in Firefox and Chrome.
我投入了一个 console.log（新的Uint8Array（））用于衡量，因为浏览器通常会直接记录内容（如果缓冲区不是很大）。
对于你可以用 ArrayBuffer s做的其他事情，请参阅例如： 相应的MDN文档。
I threw in a console.log(new Uint8Array()) for good measure, as browser will usually log the contents directly (if the buffer isn't huge).
For other stuff that you can do with ArrayBuffers, see e.g. the corresponding MDN documentation.
这篇关于javascript readAsArrayBuffer返回空数组缓冲区的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
