In this tutorial, you will learn step-by-step how to create a stunning music graphic equalizer on your WordPress website. We will use free tools and easy-to-install plugins to bring your audio tracks to life with dynamic and engaging visual effects. Whether you are a musician, podcaster, or just a web design enthusiast, this video will help you integrate a graphic equalizer that will impress your visitors. Don't miss out and subscribe for more WordPress tutorials!
<!-- 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>
