117

Maybe it's late, or maybe it's the sake, but I just read the docs for ArrayBuffer and can't think of a single thing it would be really useful for.

Can someone enlighten me?

Are there any uses anyone can think of that don't involve images?

Improve this question
4
  • 1
    Hmmm, seems like node.js would love this for low level IO related code. Commented Jul 19, 2012 at 4:36
  • 6
    From unconscious memory I remember that such things are used to keep binary data (like binary data of an image) to manipulate and store/send it. Plus if you work on application program then you can know buffers are very useful. And HTML 5 is now gone beyond web programming.... Commented Jul 19, 2012 at 4:39
  • I guess @Imdad is right. The HTML5 canvas context has a method getImageData which returns many properties of the drawn image, including one called buffer of the type ArrayBuffer Commented Jul 19, 2012 at 4:46
  • A small use is described @ developer.mozilla.org/en/JavaScript_typed_arrays Commented Jul 19, 2012 at 6:16

4 Answers 4

Reset to default
90

Basically ArrayBuffer is used to keep binary data. It can be the binary data of an image for example.

In other languages buffers are proved very useful. Yes, of course it is a little more difficult to understand/use than other data types.

ArrayBuffer can be used to get data of jpg image (RGB bytes) and produce a png out of it by adding alpha byte (i.e. RGBA).

Mozilla site has given a small use of ArrayBuffer here

Working with complex data structures

By combining a single buffer with multiple views of different types, starting at different offsets into the buffer, you can interact with data objects containing multiple data types. This lets you, for example, interact with complex data structures from WebGL, data files, or C structures you need to use while using js-ctypes.

Consider this C structure:

struct someStruct {  
  unsigned long id;  
  char username[16];  
  float amountDue;  
};

You can access a buffer containing data in this format like this:

var buffer = new ArrayBuffer(24);  
  
// ... read the data into the buffer ...  
  
var idView = new Uint32Array(buffer, 0, 1);  
var usernameView = new Uint8Array(buffer, 4, 16);  
var amountDueView = new Float32Array(buffer, 20, 1);

Then you can access, for example, the amount due with amountDueView[0].

Note: The data structure alignment in a C structure is platform-dependent. Take precautions and considerations for these padding differences.

Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

So can one assume that an ArrayBuffer is unnecessary if you already know you are working with e.g. pure unsigned 8 bit data, you might as well create a Uint8Array and fill that? What about Blob and FileReader - they seem to work on ArrayBuffer? At least thats how I normally work on binary files in javascript.
Refer to the link developer.mozilla.org/en-US/docs/Web/JavaScript/Typed_arrays
Idview should take 4 bytes not 1
idea is that length parameter is number of elements, not bytes, judging by the example. try new Int32Array(Uint8Array.from([1,2,3,4]).buffer,0,1) to test it.
This really doesn't add much to the answer besides providing a copy-paste from the Mozilla site.
11

An ArrayBuffer is a chunk of binary data in RAM. There are a few ways to "open" an ArrayBuffer for reading and writing:

  • Typed arrays, such as Uint16Array, can read and write the buffer by treating it as an array of integers. They don't let you control endianness; it uses the CPU's preferred endianness. Uint8Array is useful for controlling individual bytes (copying, slicing, etc).

  • DataView is not as simple, but it gives you more control. It lets you choose the endianness, integer size, and byte index (e.g. you can access a 32 bit integer at an index that's not divisible by 32 bits). These things can be specified each time you read and write an integer with the same DataView.

More info: https://javascript.info/arraybuffer-binary-arrays

Improve this answer

Comments

9

Other than images, it's useful for precisely constructing and destructing low level network data packets used in protocols like UDP.

Improve this answer

Comments

2

it was useful for me in case when I needed to download an audio file.

const downloadBtn = document.querySelector("button");

async function downloadAudio(path, name, type) {
  try {
    const audioFile = await fetch(path);
    const audioPuffer = await audioFile.arrayBuffer();
    const blob = new Blob([audioPuffer], { type });
    download(blob, name);
  } catch (err) {
    console.log("Error while download audio file:", err);
  }
}

function download(blob, name) {
  const anchor = document.createElement("a");
  anchor.href = URL.createObjectURL(blob);
  anchor.download = name;
  anchor.click();
  anchor.remove();
}

downloadBtn.addEventListener("click", () =>
  downloadAudio("sounds/deep-show.mp3", "audio", "audio/mpeg")
);
Improve this answer

2 Comments

You can already get a Blob from the Response, ArrayBuffer here is not needed at all.
As you said I just used the blob method on the fetch response, And it worked as expected, Thank you for the into! javascript const blob = await audioFile.blob();

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.