Play/pauze die morpht Nieuw

<!-- Play/pauze die morpht · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="kpp">
<div class="kpp__card">
<div class="kpp__row">
<button class="kpp__btn" type="button" aria-label="Afspelen: Zonnepanelen op een rijtjeshuis"><span class="kpp__ic" aria-hidden="true"><span class="kpp__h kpp__h--l"></span><span class="kpp__h kpp__h--r"></span></span></button>
<div class="kpp__info">
<p class="kpp__title">Zonnepanelen op een rijtjeshuis</p>
<p class="kpp__sub">De Bouwpodcast Utrecht, aflevering 14</p>
</div>
</div>
<div class="kpp__track" aria-hidden="true"><span class="kpp__fill"></span></div>
<div class="kpp__time"><span class="kpp__now">12:40</span><span>31:05</span></div>
</div>
</div>
</div>

/* Play/pauze die morpht · NedDev · eigen werk. */
.kpp{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:14px;background:#f4f3f1;font-family:'Switzer',sans-serif;color:#0a0a0a}
.kpp *,.kpp *::before,.kpp *::after{box-sizing:border-box}
.kpp__card{width:min(340px,100%);padding:16px;background:#fff;border:1px solid #e2dfda;border-radius:8px}
.kpp__row{display:flex;align-items:center;gap:14px}
.kpp__btn{appearance:none;flex:none;width:52px;height:52px;margin:0;padding:0;display:grid;place-items:center;border:0;border-radius:8px;background:#0a0a0a;color:#fff;cursor:pointer;transition:background-color .16s ease,transform .12s ease}
.kpp__btn:hover{background:#F5480F;color:#0a0a0a}
.kpp__btn:active{transform:scale(.95)}
.kpp__btn:focus-visible{outline:2px solid #F5480F;outline-offset:3px}
.kpp__ic{position:relative;display:block;width:18px;height:20px;transform:translateX(2px);transition:transform .3s cubic-bezier(.4,0,.2,1)}
.kpp__h{position:absolute;inset:0;background:currentColor;transition:clip-path .3s cubic-bezier(.4,0,.2,1)}
.kpp__h--l{clip-path:polygon(0 0,50% 25%,50% 75%,0 100%)}
.kpp__h--r{clip-path:polygon(50% 25%,100% 50%,100% 50%,50% 75%)}
.kpp.is-playing .kpp__ic{transform:none}
.kpp.is-playing .kpp__h--l{clip-path:polygon(0 0,36% 0,36% 100%,0 100%)}
.kpp.is-playing .kpp__h--r{clip-path:polygon(64% 0,100% 0,100% 100%,64% 100%)}
.kpp__info{min-width:0}
.kpp__title{margin:0;font:600 15px/1.25 'Switzer',sans-serif}
.kpp__sub{margin:3px 0 0;font:400 13px/1.3 'Switzer',sans-serif;color:#5d5953}
.kpp__track{margin-top:16px;height:4px;background:#e8e5e0;border-radius:4px;overflow:hidden}
.kpp__fill{display:block;height:100%;width:40.8%;background:#F5480F;transition:width .9s linear}
.kpp__time{display:flex;justify-content:space-between;margin-top:7px;font:500 12px/1 'Switzer',sans-serif;color:#5d5953;font-variant-numeric:tabular-nums}
@media (prefers-reduced-motion:reduce){.kpp__ic,.kpp__h,.kpp__fill,.kpp__btn{transition:none}}

// Play/pauze die morpht · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
var w=root.querySelector('.kpp');if(!w)return;
var b=w.querySelector('.kpp__btn'),fill=w.querySelector('.kpp__fill'),now=w.querySelector('.kpp__now');
var pos=760,len=1865,timer=null,name='Zonnepanelen op een rijtjeshuis';
function fmt(s){var m=Math.floor(s/60),r=s%60;return m+':'+(r<10?'0':'')+r;}
function draw(){now.textContent=fmt(pos);fill.style.width=(pos/len*100).toFixed(2)+'%';}
function set(p){w.classList.toggle('is-playing',p);b.setAttribute('aria-label',(p?'Pauzeren: ':'Afspelen: ')+name);clearInterval(timer);timer=null;
  if(p)timer=setInterval(function(){pos=Math.min(len,pos+1);draw();if(pos>=len)set(false);},1000);}
b.addEventListener('click',function(){set(!w.classList.contains('is-playing'));});
document.addEventListener('visibilitychange',function(){if(document.hidden&&timer)set(false);});
draw();
}
init(document.querySelector('.jouw-container'));