我正在制作一个小应用程序,它将播放音频文件(mp3、wav),并能够在它们上使用均衡器(例如常规音频播放器),为此我使用 Web Audio Api。
我设法通过两种方式获得戏剧部分。使用解码音频数据 https://developer.mozilla.org/en-US/docs/Web/API/BaseAudioContext/decodeAudioData of 基础音频上下文 https://developer.mozilla.org/en-US/docs/Web/API/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()
and 创建媒体元素源() https://developer.mozilla.org/en-US/docs/Web/API/AudioContext/createMediaElementSource
let audioContainer = new Audio('assets/mp3/pink_noise.wav');
let _sourceNodes = _AudioContext.createMediaElementSource(_audioContainer);
_sourceNodes.connect(_AudioContext.destination);
_audioContainer.play();
我认为第二个使用的内存比createBufferSource()
因为createBufferSource()
将完整的音频文件存储在内存中。但我对此不确定,我真的没有太多使用 Chrome 开发工具等工具的经验来正确阅读它。
Does createMediaElementSource()
使用的内存少于createBufferSource()
?
Edit:使用 Chrome 的任务管理器时看起来就像createBufferSource()
仅仅加载文件就会增加内存列大约 40000k,而不是 +/-60kcreateMediaElementSource()
,以及 Javascript 内存 1000k 与 20k