CodePen Embed - CSS Grid Audio bar equalizer animation

<audio src="https://files.freemusicarchive.org/storage-freemusicarchive-org/music/ccCommunity/Mark_Smeby/En_attendant_Nol/Mark_Smeby_-_07_-_Jingle_Bell_Swing.mp3" crossorigin="anonymous" type="audio/mpeg"></audio>
<div class="controls"><input id="volume" type="range" min="0" max="1" value="0.5" step="0.01"/>
 <label for="volume">- volume +</label></div>
<div class="case"><div class="glass"><div class="screen">
 <div class="led"></div><div class="led"></div><div class="led"></div><div class="led"></div>
 <div class="led"></div><div class="led"></div><div class="led"></div><div class="led"></div>
 <div class="led"></div><div class="led"></div><div class="led"></div><div class="led"></div>
 <div class="led"></div><div class="led"></div><div class="led"></div><div class="led"></div>
 <div class="led"></div><div class="led"></div><div class="led"></div><div class="led"></div>
 <div class="led"></div><div class="led"></div><div class="led"></div><div class="led"></div>
 <div class="led"></div><div class="led"></div><div class="led"></div><div class="led"></div>
 <div class="led"></div><div class="led"></div><div class="led"></div><div class="led"></div>
 <div class="led"></div><div class="led"></div><div class="led"></div><div class="led"></div>
 <div class="led"></div><div class="led"></div><div class="led"></div><div class="led"></div>
 <div class="led"></div><div class="led"></div><div class="led"></div><div class="led"></div>
 <div class="led"></div><div class="led"></div><div class="led"></div><div class="led"></div>
 <div class="led"></div><div class="led"></div><div class="led"></div><div class="led"></div>
 <div class="led"></div><div class="led"></div><div class="led"></div><div class="led"></div>
 <div class="led"></div><div class="led"></div><div class="led"></div><div class="led"></div>
 <div class="led"></div><div class="led"></div><div class="led"></div><div class="led"></div>
 <div class="led"></div><div class="led"></div><div class="led"></div><div class="led"></div>
 <div class="led"></div><div class="led"></div><div class="led"></div><div class="led"></div>
 <div class="led"></div><div class="led"></div><div class="led"></div><div class="led"></div>
 <div class="led"></div><div class="led"></div><div class="led"></div><div class="led"></div>
 <div class="led"></div><div class="led"></div><div class="led"></div><div class="led"></div>
 <div class="led"></div><div class="led"></div><div class="led"></div><div class="led"></div>
 <div class="led"></div><div class="led"></div><div class="led"></div><div class="led"></div>
 <div class="led"></div><div class="led"></div><div class="led"></div><div class="led"></div>
 <div class="led"></div><div class="led"></div><div class="led"></div><div class="led"></div>
 <div class="led"></div><div class="led"></div><div class="led"></div><div class="led"></div>
 <div class="led"></div><div class="led"></div><div class="led"></div><div class="led"></div>
 <div class="led"></div><div class="led"></div><div class="led"></div><div class="led"></div>
 <div class="led"></div><div class="led"></div><div class="led"></div><div class="led"></div>
 <div class="led"></div><div class="led"></div><div class="led"></div><div class="led"></div>
 <div class="led"></div><div class="led"></div><div class="led"></div><div class="led"></div>
 <div class="led"></div><div class="led"></div><div class="led"></div><div class="led"></div>
 <div class="led"></div><div class="led"></div><div class="led"></div><div class="led"></div>
 <div class="led"></div><div class="led"></div><div class="led"></div><div class="led"></div>
 <div class="led"></div><div class="led"></div><div class="led"></div><div class="led"></div>
 <div class="led"></div><div class="led"></div><div class="led"></div><div class="led"></div>
 <div class="led"></div><div class="led"></div><div class="led"></div><div class="led"></div>
 <div class="led"></div><div class="led"></div><div class="led"></div><div class="led"></div>
 <div class="led"></div><div class="led"></div><div class="led"></div><div class="led"></div>
 <div class="led"></div><div class="led"></div><div class="led"></div><div class="led"></div>
 <div class="led"></div><div class="led"></div><div class="led"></div><div class="led"></div>
 <div class="led"></div><div class="led"></div><div class="led"></div><div class="led"></div>
 <div class="led"></div><div class="led"></div><div class="led"></div><div class="led"></div>
 <div class="led"></div><div class="led"></div><div class="led"></div><div class="led"></div>
 <div class="led"></div><div class="led"></div><div class="led"></div><div class="led"></div>
 <div class="led"></div><div class="led"></div><div class="led"></div><div class="led"></div>
 <div class="led"></div><div class="led"></div><div class="led"></div><div class="led"></div>
 <div class="led"></div><div class="led"></div><div class="led"></div><div class="led"></div>
 <div class="led"></div><div class="led"></div><div class="led"></div><div class="led"></div>
 <div class="led"></div><div class="led"></div><div class="led"></div><div class="led"></div>
 <div class="led"></div><div class="led"></div><div class="led"></div><div class="led"></div>
 <div class="led"></div><div class="led"></div><div class="led"></div><div class="led"></div>
 <div class="led"></div><div class="led"></div><div class="led"></div><div class="led"></div>
 <div class="led"></div><div class="led"></div><div class="led"></div><div class="led"></div>
 <div class="led"></div><div class="led"></div><div class="led"></div><div class="led"></div>
 <div class="led"></div><div class="led"></div><div class="led"></div><div class="led"></div>
 <div class="led"></div><div class="led"></div><div class="led"></div><div class="led"></div>
 <div class="led"></div><div class="led"></div><div class="led"></div><div class="led"></div>
 <div class="led"></div><div class="led"></div><div class="led"></div><div class="led"></div>
 <div class="led"></div><div class="led"></div><div class="led"></div><div class="led"></div>
 <div class="led"></div><div class="led"></div><div class="led"></div><div class="led"></div>
 <div class="led"></div><div class="led"></div><div class="led"></div><div class="led"></div>
 <div class="led"></div><div class="led"></div><div class="led"></div><div class="led"></div>
 <div class="led"></div><div class="led"></div><div class="led"></div>
<div class="led"></div>
</div></div></div>
<div id="playpause" data-playing="false" role="switch" aria-checked="false">play/pause</div>

body {
 display: flex;
 flex-direction: column;
 justify-content: center;
 align-items: center;
 margin: 0;
 padding: 0;
 height: 100vh;
 background-image: linear-gradient(#000, #fff, #000);
}
.case {
 display: grid;
 padding: 20px;
 border: 1px solid #AAA;
 border-radius: 10px;
 box-shadow: 0 2px 4px rgba(0, 0, 0, 0.7);
}
.glass {
 background: linear-gradient(225deg, rgba(255, 255, 255, 0) 0%, rgba(241, 241, 241, 0.05) 50%, rgba(225, 225, 225, 0.05) 51%, rgba(246, 246, 246, 0.01) 100%);
 z-index: 99;
}

.screen {
 display: grid;
 grid-template-columns: repeat(16, 20px);
 grid-template-rows: repeat(16, 5px);
 grid-column-gap: 10px;
 grid-row-gap: 1px;
 align-items: end;
 grid-auto-flow: column;
 padding: 15px 20px;
 background-color: #0F151D;
 box-shadow: 0 0 4px #0F151D;
}

.led {
 width: 20px;
 height: 5px;
 background-color: #262640;
}

.controls {
 position: absolute;
 top: 0;
 left: 0;
 display: inline-block;
 display: flex;
 flex-direction: column;
 text-align: center;
 padding: 0 10px;
 font-size:0.675em;
 color: #FFF;
}
.playing {
color: #FFF;
font-weight:bold;
text-shadow: -1px 0px #000, 0px 1px #000, 1px 0px #000, 0px -1px #000;
}
.paused{
color: #000;
font-weight:bold;
}
#playpause{
font-weight:bold;
}

const audioElement = document.querySelector('audio');
const playButton = document.querySelector('#playpause');
const volumeControl = document.querySelector('#volume');
const leds = [...document.querySelectorAll('.led')].reverse();
const bars = Array(Math.ceil(leds.length / 16)).fill().map((_, i) => leds.slice(i * 16, i * 16 + 16)).reverse();
//Web Audio Setup
const AudioContext = window.AudioContext || window.webkitAudioContext;
const audioCtx = new AudioContext();
const track = audioCtx.createMediaElementSource(audioElement);
const gainNode = audioCtx.createGain();
const analyser = audioCtx.createAnalyser();
gainNode.gain.value = 0.5;
track.connect(gainNode).connect(analyser).connect(audioCtx.destination);
//Analyser Setup
analyser.fftSize = 32;
analyser.smoothingTimeConstant = 0.5;
const bufferLength = analyser.frequencyBinCount;
const dataArray = new Uint8Array(bufferLength);
//Light it up!
const draw = () => {
 requestAnimationFrame(draw);
 analyser.getByteFrequencyData(dataArray);
 bars.forEach((bar, i) => {
 bar.forEach((led, j) => {
 if (j >= 12) {
 led.style.backgroundColor = `${dataArray[i] > j * 16 ? "#FF1EAD" : "#262640"}`;
 led.style.boxShadow = `${dataArray[i] > j * 16 ? "0 0 12px rgba(255,30,173,0.7)" : "none"}`;
 } else {
 led.style.backgroundColor = `${dataArray[i] > j * 16 ? "#FFF" : "#262640"}`;
 led.style.boxShadow = `${dataArray[i] > j * 16 ? "0 0 12px rgba(255,255,255,0.7)" : "none"}`;
 }
 });
 });
};
draw();
//Controls 
playButton.addEventListener('click', function () {
 if (audioCtx.state === 'suspended') {
 audioCtx.resume();
 }
 if (this.dataset.playing === 'false') {
 audioElement.play();
 this.dataset.playing = 'true';
 this.className = "playing";
 } else if (this.dataset.playing === 'true') {
 audioElement.pause();
 this.dataset.playing = 'false';
 this.className = "paused";
 }
});
volumeControl.addEventListener('input', function () {
 gainNode.gain.value = this.value;
});
audioElement.addEventListener('ended', () => {
 playButton.dataset.playing = 'false';
 playButton.className = "paused";
});

This Pen is owned by SMART WEB on CodePen.

See more by @efalan on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.