问题描述
我正在使用waveurfer映射音频,但是我需要构建一个VuMeter。
我使用了此实现,除了在audioprocess上仅运行一次的事实之外,其他所有功能都正常运行。
function playSound(arraybuffer,vuMeterInput,audioSource,playBtn,pauseBtn,volumeController,waveFormID,startAt = 0,sourceNode = undefined) {
var context = new AudioContext();
var wavesurfer = WaveSurfer.create({
container: waveFormID,waveColor: '#E0E0E0',progressColor: '#64C2EB',barWidth: 3,height: 20,audioContext: context
});
wavesurfer.load(audioSource.src);
console.log(wavesurfer.backend);
var source = wavesurfer.backend.ac.createBufferSource();
wavesurfer.backend.source = source;
var gainNode = wavesurfer.backend.ac.createGain();
wavesurfer.backend.ac.decodeAudioData(arraybuffer,function (buffer) {
wavesurfer.backend.source.buffer = buffer;
});
wavesurfer.loadDecodedBuffer();
wavesurfer.backend.analyser.smoothingTimeConstant = 0.3;
wavesurfer.backend.analyser.fftSize = 1024;
wavesurfer.backend.scriptNode.bufferSize = 4096;
wavesurfer.backend.scriptNode.numberOfInputs = 1;
wavesurfer.backend.scriptNode.numberOfOutputs = 1;
function MapVumeter(){
var array = new Uint8Array(wavesurfer.backend.analyser.frequencyBinCount);
valval = wavesurfer.backend.analyser.getByteFrequencyData(array);
console.log(valval);
console.log(Math.average(array));
vuMeterInput.mono.setAttribute("data-val",Math.average(array));
}
wavesurfer.backend.scriptNode.onaudioprocess = MapVumeter;
wavesurfer.backend.source.onended = function() {
$(playBtn).attr('hidden',false);
$(pauseBtn).attr('hidden',true);
vuMeterInput.mono.setAttribute("data-val",0);
}
var is_paused = false;
$(playBtn).on('click',function(){
$(playBtn).attr('hidden',true);
$(pauseBtn).attr('hidden',false);
wavesurfer.play();
if(is_paused == true){
console.log("called the function again after pause");
}
});
$(pauseBtn).on('click',true);
wavesurfer.pause();
vuMeterInput.mono.setAttribute("data-val",0);
});
我不确定如果在WaveSurfer之外使用AudioContext,Analyzer和gainNode,但在Wavesurfer中仅以0的值运行一次,为什么这会起作用?
Math.average(array);
解决方法
wavesurfer.js也正在使用该ScriptProcessorNode
。可能会覆盖您分配给onaudioprocess
的事件处理程序。
https://github.com/katspaugh/wavesurfer.js/blob/master/src/webaudio.js#L247
您可以尝试向addEventListener()
注册事件处理程序。
wavesurfer.backend.scriptNode.addEventListener('audioprocess',MapVumeter);