释放音频缓冲区 Web Audio API答案

【问题标题】：Release audio Buffer Web Audio API释放音频缓冲区 Web Audio API
【发布时间】：2017-08-11 17:53:09
【问题描述】：

我正在使用 Web 应用程序的 WEB 音频 API 来呈现音频信号。但是，我有一个问题，每秒加载一个音频文件，chrome 使用越来越多的 RAM，我不知道如何释放我不再需要的缓冲区/声音。

有什么办法可以通过我的 javascript 程序或更改 chrome 属性来解决我的问题？

我的代码：

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();
};

【问题讨论】：

您能否显示您的代码（如果可能，匿名）以便有人可以给您一个具体的答案？
+1。我不知道，但我希望你的问题是你持有缓冲区对象而不是释放它们（在这种情况下，正常的垃圾收集应该摆脱它们）。

标签： javascript web-applications web-audio-api

【解决方案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);
  }
);

在上面从您的代码中提取的代码中，您会看到每次解码音频时，您都会得到一个新的 AudioBuffer 对象，您将其添加到该数组loader.bufferList[index] = buffer; 该缓冲区随后被分配给以 URL 为键的 Map。 obj[name] = buffer;

虽然数组仍然持有对 AudioBuffer 对象的引用，但它不会被垃圾回收。这些 AudioBuffers 实际上非常大，因为它们保存解码后的音频。因此，您会看到大量内存被用完。

实际的 XHR 响应 request.response 应根据您的代码自动进行垃圾收集，但它们不会增加内存使用量，尤其是在您下载压缩文件（mp3 等）时

为确保 AudioBuffer 被垃圾回收，您应该在使用完毕后将其从声音映射中删除。

【讨论】：