问题
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.
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');
}
and and much easier way with Audio()
and createMediaElementSource()
let audioContainer = new Audio('assets/mp3/pink_noise.wav');
let _sourceNodes = _AudioContext.createMediaElementSource(_audioContainer);
_sourceNodes.connect(_AudioContext.destination);
_audioContainer.play();
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.
Does createMediaElementSource()
use less memory than createBufferSource()
?
Edit:
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
回答1:
I think you've found the answer in the task manager.
You need to be aware of a couple of things.
- 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
来源:https://stackoverflow.com/questions/48403472/does-mediaelementsource-uses-less-memory-than-buffersource-in-web-audio-api