Release audio Buffer Web Audio API

Question

I'm using WEB Audio API for a Webapp to render an Audio Signal. But, I have a problem, being loading an audio file each second, chrome use more and more RAM and I have no idea how to release buffers / sounds that I no longer need.

Is there any way to solve my problem from my javascript program or changing chrome propieties?

My code:

loadSounds(this, {
    buffer: this.url
});

function loadSounds(obj, soundMap, callback) {
    // Array-ify
    var names = [];
    var paths = [];

    for (var name in soundMap) {
        var path = soundMap[name];
        names.push(name);
        paths.push(path);
    }

    bufferLoader = new BufferLoader(context, paths, function(bufferList) {
        for (var i = 0; i < bufferList.length; i++) {
            var buffer = bufferList[i];
            var name = names[i];
            obj[name] = buffer;
        }
        if (callback) {
            callback();
        }
    });
    bufferLoader.load();
}
function BufferLoader(context, urlList, callback) {
    this.context = context;
    this.urlList = urlList;
    this.onload = callback;
    this.bufferList = bufferListG;
    this.loadCount = 0;
}
BufferLoader.prototype.load = function() {
    for (var i = 0; i < this.urlList.length; ++i)
        this.loadBuffer(this.urlList[i], i);
};
BufferLoader.prototype.loadBuffer = function(url, index) {
    // Load buffer asynchronously
    var request = new XMLHttpRequest();
    request.open("GET", url, true);
    request.responseType = "arraybuffer";

    var loader = this;

    request.onload = function() {
        // Asynchronously decode the audio file data in request.response
        loader.context.decodeAudioData(
            request.response,
            function(buffer) {
                if (!buffer) {
                    alert('error decoding file data: ' + url);
                    return;
                }
                loader.bufferList[index] = buffer;
                if (++loader.loadCount == loader.urlList.length)
                    loader.onload(loader.bufferList);
            },
            function(error) {
                console.error('decodeAudioData error', error);
            }
        );
    }

    request.onerror = function() {
        alert('BufferLoader: XHR error');
    }

    request.send();
};

Answer 1

loader.context.decodeAudioData(
  request.response,
  function(buffer) {
    if (!buffer) {
      alert('error decoding file data: ' + url);
      return;
    }
    loader.bufferList[index] = buffer;
    if (++loader.loadCount == loader.urlList.length)
      loader.onload(loader.bufferList);
  },
  function(error) {
    console.error('decodeAudioData error', error);
  }
);

In the above piece of code extracted from your code, you'll see each time you decode the audio, you get a new AudioBuffer Object, which you're adding to this array loader.bufferList[index] = buffer; That buffer is then later assigned to a Map with the URL being the key. obj[name] = buffer;

While the array still holds reference to the AudioBuffer object it won't be garbage collected. These AudioBuffers are actually pretty large since they hold the decoded audio. Hence you're seeing large amounts of memory being used up.

The actual XHR responses request.response should be garbage collected automatically based on your code, but they wouldn't add much to the memory use especially if you're downloading compressed files (mp3, etc)

To ensure that the AudioBuffer is garbage collected you should remove it from that sound Map when you're done using them.