Geek Answers Handbook

Javascript readAsArrayBuffer returns an empty Array buffer

I am trying to read a local file using the ReadAsArrayBuffer FileReader property. Reading is also successful in the onload callback, I see the Array Buffer object in reader.result. But the array buffer is just empty. The length is specified, but not the data. How to get this data?

Here is my code

<!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>

console output for reader.result

 e.target.result ArrayBuffer {} e.target.result.byteLength 25312

Can someone tell me how to get this data? is there a security issue? No error, it is not running.

From comments: Could you tell me how to access the contents of the buffer? I'm actually trying to play an audio file using AudioContext ... For this, I will need buffer data ...

+8
javascript arraybuffer audiocontext
source share
2 answers

Well, playing audio using AudioContext is actually not that difficult.

  • Set the context.
  • Load any data into the buffer (for example, FileReader for local files, XHR for deleted files).
  • Install a new source and run it.

In general, 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);

Watch this live jsfiddle , which works for me in Firefox and Chrome.

I chose console.log(new Uint8Array()) for a good estimate, since the browser usually logs the content directly (if the buffer is not huge). For other things you can do with ArrayBuffer s, see, for example, the corresponding MDN documentation .

+4
source share

Here's how to read an array buffer and convert it to a binary string,

 function onfilechange(evt) { var reader = new FileReader(); reader.onload = function(evt) { var chars = new Uint8Array(evt.target.result); var CHUNK_SIZE = 0x8000; var index = 0; var length = chars.length; var result = ''; var slice; while (index < length) { slice = chars.subarray(index, Math.min(index + CHUNK_SIZE, length)); result += String.fromCharCode.apply(null, slice); index += CHUNK_SIZE; } // Here you have file content as Binary String in result var }; reader.readAsArrayBuffer(evt.target.files[0]); }

If you try to print an ArrayBuffer using console.log, you always get an empty object {}

+7
source share

More articles:


All Articles