Wavesurfer scriptNode onaudioprocress 只运行一次

Question

我正在使用 wavesurfer 来映射音频，但是我需要构建一个 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', function(){
        $(playBtn).attr('hidden',false);
        $(pauseBtn).attr('hidden',true);


        wavesurfer.pause();
        vuMeterInput.mono.setAttribute("data-val", 0);
    });

我不确定为什么如果我在 WaveSurfer 之外使用 AudioContext、Analyzer 和 gainNode 但在 wavesurfer 中它只有运行一次且值为 0 Math.average(array);

Answer 1

wavesurfer.js 也在使用 ScriptProcessorNode。它可能会覆盖您分配给 onaudioprocess.

的事件处理程序

https://github.com/katspaugh/wavesurfer.js/blob/master/src/webaudio.js#L247

您可以尝试使用 addEventListener().

注册您的事件处理程序

wavesurfer.backend.scriptNode.addEventListener('audioprocess', MapVumeter);

Wavesurfer scriptNode onaudioprocress 只运行一次

Wavesurfer scriptNode onaudioprocress runs only once

javascript

web-audio-api

wavesurfer.js