MediaElementSource 使用的内存是否比 Web Audio API 中的 BufferSource 少? [英] Does MediaElementSource uses less memory than BufferSource in Web Audio API?

问题描述

我正在制作一个可以播放音频文件(mp3、wav)的小应用程序，并且能够在它们上使用均衡器(比如一个普通的音频播放器)，为此我使用了网络音频 Api.

I am making a little app that will play audio files (mp3,wav) with the ability to use an equalizer on them (say a regular Audio Player), for this I am using the Web Audio Api.

我设法通过两种方式获得了游戏角色.使用 decodeAudioData 的 BaseAudioContext

I manage to get the play part in two ways. Using decodeAudioData of BaseAudioContext

function getData() {
  source = audioCtx.createBufferSource();
  var request = new XMLHttpRequest();

  request.open('GET', 'viper.ogg', true);

  request.responseType = 'arraybuffer';


  request.onload = function() {
    var audioData = request.response;

    audioCtx.decodeAudioData(audioData, function(buffer) {
        source.buffer = buffer;

        source.connect(audioCtx.destination);
        source.loop = true;
      },

      function(e){ console.log("Error with decoding audio data" + e.err); });

  }

  request.send();
}

// wire up buttons to stop and play audio

play.onclick = function() {
  getData();
  source.start(0);
  play.setAttribute('disabled', 'disabled');
}

以及使用 Audio() 和 createMediaElementSource()

let audioContainer = new Audio('assets/mp3/pink_noise.wav');
let _sourceNodes = _AudioContext.createMediaElementSource(_audioContainer);
_sourceNodes.connect(_AudioContext.destination);
_audioContainer.play();

我认为第二个使用的内存比 createBufferSource() 少，因为 createBufferSource() 将完整的音频文件存储在内存中.但我不确定这一点，我真的没有太多使用 Chrome Dev 工具等工具的经验来正确阅读它.

I think the second one use less memory than createBufferSource() because createBufferSource() stores the complete audio file in memory. But I am not sure about this I really do not have to much experience with tools like Chrome Dev tools to read it correctly.

createMediaElementSource() 是否比 createBufferSource() 使用更少的内存?

Does createMediaElementSource() use less memory than createBufferSource() ?

使用 Chrome 的任务管理器似乎在使用 createBufferSource() 时，只需加载文件就会将 Memory 列增加大约 40000k，而 createMediaElementSource() 和 Javascript Memory 会增加 +/-60k1000k vs 20k

Using Chrome's Task Manager seems like when using createBufferSource() just loading the file increases the Memory column something around 40000k against +/-60k with createMediaElementSource(), and the Javascript Memory 1000k vs 20k

推荐答案

我想您已经在任务管理器中找到了答案.

I think you've found the answer in the task manager.

您需要注意几件事.

• 使用媒体元素，您将失去样本精确控制；这对你来说可能不重要
• 使用 MediaElementAudioSourceNode 时需要适当的访问权限；如果您的所有资产都在同一台服务器上，这可能不是问题

• With a media element, you lose sample-accurate control; this may not be important to you
• You need appropriate access permissions when using a MediaElementAudioSourceNode; this may not be a problem if all of your assets are on the same server

这篇关于MediaElementSource 使用的内存是否比 Web Audio API 中的 BufferSource 少?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！