Cómo crear un ecualizador gráfico musical para WordPress

				
					<!-- Reproductor -->

<audio id="audio" controls>
<source src="https://infozoos.byteweb.es/wp-content/uploads/2024/05/AC_DC-Back-In-Black-Official-4K-Video_pAgnJDJN4VA.mp3" type="audio/mpeg">
Tu navegador no soporta la etiqueta de audio
</audio>

<!-- Estilos para le ID del contenedor del ecualizador -->
 #equalizer {
            overflow: hidden;
            position: relative;
            background-color: #000;
        }
        canvas {
            position: absolute;
            top: 0;
            left: 0;
        }

<!-- Estilos para la sombra de imagen-->
selector {
  filter: drop-shadow(15px 15px 15px #000); 
}
<!-- script del ecualizador -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
   <script>
        let audioElement;
        let audioContext;
        let analyser;
        let frequencyData;
        let numBars = 25; // Número de barras
        let barWidth;
        let gradients = [];
        let gap = 14; // Espacio entre barras

        function setup() {
            let cnv = createCanvas(document.getElementById('equalizer').clientWidth, document.getElementById('equalizer').clientHeight);
            cnv.parent('equalizer');
            setupAudio();
            noLoop();
            window.addEventListener('resize', resizeCanvasToParent);
            barWidth = (width / numBars) - gap;
            createGradients();
        }

        function resizeCanvasToParent() {
            resizeCanvas(document.getElementById('equalizer').clientWidth, document.getElementById('equalizer').clientHeight);
            barWidth = (width / numBars) - gap;
        }

        function setupAudio() {
            audioElement = document.getElementById('audio');
            audioContext = new (window.AudioContext || window.webkitAudioContext)();
            analyser = audioContext.createAnalyser();
            analyser.fftSize = 256;
            audioElement.addEventListener('play', () => {
                if (audioContext.state === 'suspended') {
                    audioContext.resume();
                }
                loop();
            });
            audioElement.addEventListener('pause', () => {
                noLoop();
            });
            let source = audioContext.createMediaElementSource(audioElement);
            source.connect(analyser);
            analyser.connect(audioContext.destination);
            frequencyData = new Uint8Array(analyser.frequencyBinCount);
        }

        function createGradients() {
            gradients = [
                { start: color(0, 0, 255), end: color(0, 255, 0) }, // Degradado de Azul a Verde para bajos
                { start: color(255, 0, 0), end: color(255, 165, 0) }, // Degradado de Rojo a Naranja para bajos medios
                { start: color(128, 0, 128), end: color(255, 192, 203) }, // Degradado de Púrpura a Rosa para medios
                { start: color(0, 255, 255), end: color(0, 0, 139) }, // Degradado de Cian a Azul Marino para medios agudos
                { start: color(255, 255, 0), end: color(107, 142, 35) } // Degradado de Amarillo a Verde Oliva para agudos
            ];
        }

        function draw() {
            clear(); // Limpiar el lienzo en cada cuadro
            analyser.getByteFrequencyData(frequencyData);

            let gradientRanges = [
                Math.floor(numBars * 0.2), // Bajos
                Math.floor(numBars * 0.4), // Bajos medios
                Math.floor(numBars * 0.6), // Medios
                Math.floor(numBars * 0.8), // Medios agudos
                numBars // Agudos
            ];

            for (let i = 0; i < numBars; i++) {
                let barHeight = map(frequencyData[i], 0, 255, 0, height);
                let gradientIndex;

                if (i < gradientRanges[0]) {
                    gradientIndex = 0; // Bajos
                } else if (i < gradientRanges[1]) {
                    gradientIndex = 1; // Bajos medios
                } else if (i < gradientRanges[2]) {
                    gradientIndex = 2; // Medios
                } else if (i < gradientRanges[3]) {
                    gradientIndex = 3; // Medios agudos
                } else {
                    gradientIndex = 4; // Agudos
                }

                let gradient = gradients[gradientIndex];
                drawGradientBar(i * (barWidth + gap), height - barHeight, barWidth, barHeight, gradient.start, gradient.end);
            }
        }

        function drawGradientBar(x, y, w, h, startColor, endColor) {
            for (let i = y; i < y + h; i++) {
                let inter = map(i, y, y + h, 0, 1);
                let c = lerpColor(startColor, endColor, inter);
                stroke(c);
                line(x, i, x + w, i);
            }
        }
    </script>