ArrayBuffer vs AudioBuffer

An ArrayBuffer is raw binary memory. An AudioBuffer is decoded audio data ready for the Web Audio API to play or process.

The Basic Difference

Feature ArrayBuffer AudioBuffer
Purpose Raw binary memory Decoded audio samples
JavaScript Type Built-in ECMAScript object Web Audio API object
Stores Arbitrary bytes Floating-point PCM audio data
Typical Source File downloads, network packets, images, compressed audio files Decoded audio created by decodeAudioData()
Access Method Typed arrays like Uint8Array or Float32Array getChannelData()
Directly Playable? No Yes, through an AudioBufferSourceNode

ArrayBuffer

An ArrayBuffer is just a block of memory. It does not know whether the bytes represent an image, an MP3, a save file, a network packet, or anything else. 

const buffer = new ArrayBuffer(1024);
const bytes = new Uint8Array(buffer);

bytes[0] = 255;

Think of it as: “Here are 1024 bytes. Do whatever you want with them.”

If you download an MP3, the downloaded data can be stored in an ArrayBuffer: 

const response = await fetch("song.mp3");
const arrayBuffer = await response.arrayBuffer();

At this stage, the data is still compressed MP3 data. It has not yet become playable sample data for the Web Audio API.

AudioBuffer

An AudioBuffer contains decoded audio samples. It represents audio in a form the Web Audio API can play, inspect, or process. 

const audioBuffer = await audioContext.decodeAudioData(arrayBuffer);

After decoding, you can inspect the audio: 

console.log(audioBuffer.numberOfChannels);
console.log(audioBuffer.sampleRate);
console.log(audioBuffer.duration);

You can also access the sample data for each channel: 

const leftChannel = audioBuffer.getChannelData(0);

console.log(leftChannel[0]);

Each sample is usually a floating-point value from -1.0 to +1.0, representing speaker movement.

Typical Web Audio Workflow

MP3, WAV, OGG, or other audio file
↓
ArrayBuffer
↓ decodeAudioData()
AudioBuffer
↓
AudioBufferSourceNode
↓
Speakers
const response = await fetch("song.mp3");
const arrayBuffer = await response.arrayBuffer();

const audioBuffer = await audioContext.decodeAudioData(arrayBuffer);

const source = audioContext.createBufferSource();
source.buffer = audioBuffer;
source.connect(audioContext.destination);
source.start();

Why AudioBuffers Are Often Much Larger

A compressed MP3 might be only a few megabytes, but once decoded into raw audio samples, it can take much more memory.

Downloaded File

ArrayBuffer

May contain compressed MP3 data.

Example: about 4 MB.

Decoded Audio

AudioBuffer

Contains uncompressed floating-point samples.

Example: about 63 MB for 3 minutes of stereo 44.1 kHz audio.

180 seconds × 44,100 samples/second × 2 channels × 4 bytes/sample
≈ 63 MB

Simple Analogy

ArrayBuffer

Like a ZIP file or sealed box of bytes. The browser has the data, but it has not interpreted it as playable audio yet.

AudioBuffer

Like the fully extracted audio samples. The browser can now play, analyze, or process the sound.

Summary

Use an ArrayBuffer when you need raw binary data. Use an AudioBuffer when you need decoded audio samples for playback or processing.

In Web Audio applications, the common path is: download audio into an ArrayBuffer, decode it into an AudioBuffer, then play it through an AudioBufferSourceNode.