Question

我正在制作一个可以播放音频文件（mp3，wav）的小应用程序，可以在它们上使用均衡器（比如普通的音频播放器），为此我使用的是Web Audio Api。

我设法以两种方式获得游戏部分。使用decodeAudioData的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工具等工具来正确阅读它。

createMediaElementSource()使用的内存少于createBufferSource()吗？

修改使用Chrome的任务管理器似乎在使用createBufferSource()时只需加载文件就会使内存列增加大约40000k，而createMediaElementSource()增加+/- 60k，而Javascript内存1000k则增加20k

Answer 1

我认为你在任务管理器中找到了答案。

你需要了解一些事情。

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

MediaElementSource在Web Audio API中使用的内存少于BufferSource吗？

1 个答案: