Mini Player Bars

<!-- Mini Player Bars · Bron: CodeShack · licentie MIT. Laat deze vermelding staan bij hergebruik. -->
<div class="jouw-container">
<div class="abp-card"><button class="abp-btn" aria-label="play"><span class="abp-ico abp-play"></span></button><div class="abp-meta"><b>Static Waves</b><small>Neddev FM</small><div class="abp-bars"><i style="--d:.9s"></i><i style="--d:1.3s"></i><i style="--d:.7s"></i><i style="--d:1.1s"></i><i style="--d:.8s"></i><i style="--d:1.4s"></i><i style="--d:.6s"></i><i style="--d:1.0s"></i></div></div></div>
</div>

/* Mini Player Bars · Bron: CodeShack · licentie MIT. Laat deze vermelding staan bij hergebruik. */
.abp-card{display:flex;align-items:center;gap:16px;padding:16px 20px;border-radius:16px;background:#fff;border:1px solid rgba(10,10,10,.12);box-shadow:0 8px 24px rgba(10,10,10,.07);font-family:'Switzer',system-ui,sans-serif;width:280px}
.abp-btn{flex:none;width:46px;height:46px;border-radius:50%;border:none;background:#0a0a0a;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s}.abp-btn:hover{background:#F5480F}
.abp-play{width:0;height:0;border-left:13px solid #fff;border-top:8px solid transparent;border-bottom:8px solid transparent;margin-left:3px}
.abp-pause{width:13px;height:15px;border-left:4px solid #fff;border-right:4px solid #fff;box-sizing:border-box}
.abp-meta{min-width:0}.abp-meta b{display:block;font-size:15px;color:#0a0a0a}.abp-meta small{display:block;font-size:12px;color:rgba(10,10,10,.5);margin-bottom:8px}
.abp-bars{display:flex;align-items:flex-end;gap:3px;height:22px}.abp-bars i{width:3px;height:6px;background:#F5480F;border-radius:2px;transform-origin:bottom}
.abp-card.is-playing .abp-bars i{animation:abp-eq var(--d) ease-in-out infinite alternate}
@keyframes abp-eq{from{height:4px}to{height:22px}}

// Mini Player Bars · Bron: CodeShack · licentie MIT. Laat deze vermelding staan bij hergebruik.
// root = het element waarin de HTML staat
function init(root){
root=root.querySelector('.abp-card')||root;var btn=root.querySelector('.abp-btn'),ico=root.querySelector('.abp-ico');var playing=false;btn.addEventListener('click',function(){playing=!playing;root.classList.toggle('is-playing',playing);ico.className='abp-ico '+(playing?'abp-pause':'abp-play');});
}
init(document.querySelector('.jouw-container'));