ポッドキャスト再生速度切替UI

<div class="podwrap07-06-10">
          <div class="podinfo07-06-10"><b>#42 デザインの余白</b><small>再生速度を選択</small></div>
          <div class="speedbtns07-06-10">
            <button class="sp07-06-10 active07-06-10" data-sp="1">1x</button>
            <button class="sp07-06-10" data-sp="1.5">1.5x</button>
            <button class="sp07-06-10" data-sp="2">2x</button>
          </div>
        </div>

.d07-06-10 .podwrap07-06-10{ display:flex; flex-direction:column; align-items:center; gap:16px; }
        .d07-06-10 .podinfo07-06-10{ text-align:center; font-size:13px; color:#333; }
        .d07-06-10 .podinfo07-06-10 small{ display:block; color:#999; margin-top:3px; }
        .d07-06-10 .speedbtns07-06-10{ display:flex; background:#f0f0f3; border-radius:99px; padding:4px; gap:2px; }
        .d07-06-10 .sp07-06-10{ border:none; background:transparent; padding:7px 14px; border-radius:99px; font-size:12px; color:#666; cursor:pointer; transition:background .2s,color .2s; }
        .d07-06-10 .sp07-06-10.active07-06-10{ background:#111; color:#fff; }

(function(){
        var root = document.querySelector('.d07-06-10');
        var btns = root.querySelectorAll('.sp07-06-10');
        btns.forEach(function(b){
          b.addEventListener('click', function(){
            btns.forEach(function(x){ x.classList.remove('active07-06-10'); });
            b.classList.add('active07-06-10');
          });
        });
      })();