簡易プレーヤーバー

<div class="d07-03-10-player">
          <div class="d07-03-10-screen"><svg viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg></div>
          <div class="d07-03-10-bar">
            <button class="d07-03-10-toggle" aria-label="再生 / 一時停止">
              <svg class="d07-03-10-i-play" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>
              <svg class="d07-03-10-i-pause" viewBox="0 0 24 24"><path d="M6 5h4v14H6zM14 5h4v14h-4z"/></svg>
            </button>
            <div class="d07-03-10-track"><div class="d07-03-10-fill"></div></div>
            <span class="d07-03-10-time">0:00 / 1:00</span>
          </div>
        </div>

.prev.d07-03-10{background:#0f172a}
        .d07-03-10-player{width:100%;max-width:340px;border-radius:14px;overflow:hidden;box-shadow:0 12px 28px rgba(0,0,0,.45)}
        .d07-03-10-screen{aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;
          background:linear-gradient(135deg,#4f46e5,#db2777)}
        .d07-03-10-screen svg{width:44px;height:44px;fill:rgba(255,255,255,.75)}
        .d07-03-10-bar{display:flex;align-items:center;gap:10px;padding:10px 12px;background:#1e293b}
        .d07-03-10-toggle{flex:0 0 auto;width:34px;height:34px;border:none;border-radius:50%;background:#22d3ee;cursor:pointer;
          display:flex;align-items:center;justify-content:center}
        .d07-03-10-toggle svg{width:16px;height:16px;fill:#0f172a}
        .d07-03-10-i-pause{display:none}
        .d07-03-10-player.playing .d07-03-10-i-play{display:none}
        .d07-03-10-player.playing .d07-03-10-i-pause{display:block}
        .d07-03-10-track{flex:1;height:6px;border-radius:3px;background:#334155;overflow:hidden}
        .d07-03-10-fill{width:0;height:100%;background:#22d3ee;border-radius:3px}
        .d07-03-10-time{flex:0 0 auto;color:#cbd5e1;font-size:.68rem;font-variant-numeric:tabular-nums}

(function(){
        var root=document.querySelector('#item-07-03-10');
        if(!root)return;
        var player=root.querySelector('.d07-03-10-player'),
            btn=root.querySelector('.d07-03-10-toggle'),
            fill=root.querySelector('.d07-03-10-fill'),
            time=root.querySelector('.d07-03-10-time'),
            total=60,cur=0,timer=null;
        function fmt(s){var m=Math.floor(s/60),ss=Math.floor(s%60);return m+':'+(ss<10?'0':'')+ss;}
        function tick(){
          cur+=0.2;
          if(cur>=total){cur=total;stop();}
          fill.style.width=(cur/total*100)+'%';
          time.textContent=fmt(cur)+' / '+fmt(total);
        }
        function play(){player.classList.add('playing');timer=setInterval(tick,200);}
        function stop(){player.classList.remove('playing');clearInterval(timer);timer=null;}
        btn.addEventListener('click',function(){
          if(timer){stop();}
          else{if(cur>=total){cur=0;fill.style.width='0';}play();}
        });
      })();