HTML-Audioanalysator verhindert das Abspielen von Musik

Question

Ich versuche, einen Visualizer für einen Musik-Player zu erstellen, indem ich die native Audio-API verwende. Alles funktioniert gut, außer wenn ich einen Analysator anschließe, hört die Musik auf zu spielen.

Sehen Sie es hier, laden Sie einfach eine Audiodatei hoch, um zu beginnen.

https://codepen.io/jane-fox/pen/RgjgJN

audioSource = audioCtx.createMediaElementSource(audio); 
audioSource.connect(analyser); 

Kommentieren Sie diese Zeilen, dass die Musik spielt, gut zu sehen, bis der Analysator angeschlossen ist.

Wie kann ich verhindern, dass der Analyzer/die visuellen Effekte die Musik stören?

Answer 1

Ich habe einen Analysator nicht allzu langer Zeit gemacht: https://codepen.io/Cooorsin/pen/zKPbEm und http://simple-music-player.corsins.space/

Wenn Sie den gesamten Code des zweiten Lenkers möchte ich es auf GitHub für Sie setzen.

Ich habe den folgenden Code verwendet, um die Audio-initialisieren:

function initAudio(src){ 
    var AudioContext = window.AudioContext || window.webkitAudioContext; 
    audioContext = new AudioContext(); 
    analyser = audioContext.createAnalyser(); 

    //analyser.smoothingTimeConstant = 1; 
    analyser.fftSize = barAmount; 

    audio = new Audio(); 
    audio.src = src; 


    audio.addEventListener('canplay', function(){ 
     sourceNode = audioContext.createMediaElementSource(audio); 
     sourceNode.connect(analyser); 
     sourceNode.connect(audioContext.destination); 
     audio.play(); 
    }); 
}