再生ボタン連動オン/オフビジュアライザー

<div class="wrap07-12-11">
          <button class="playbtn07-12-11" type="button" aria-pressed="false">▶</button>
          <div class="bars07-12-11">
            <span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span>
          </div>
        </div>

.d07-12-11{ background:#0f172a; }
        .d07-12-11 .wrap07-12-11{ display:flex; flex-direction:column; align-items:center; gap:14px; }
        .d07-12-11 .playbtn07-12-11{ width:44px; height:44px; border-radius:50%; border:none; background:linear-gradient(135deg,#818cf8,#6366f1); color:#fff; font-size:15px; cursor:pointer; display:flex; align-items:center; justify-content:center; }
        .d07-12-11 .bars07-12-11{ display:flex; align-items:flex-end; gap:5px; height:80px; }
        .d07-12-11 .bars07-12-11 span{ width:8px; border-radius:3px 3px 0 0; background:linear-gradient(180deg,#a5b4fc,#6366f1); height:22%; transition:height .2s ease; }
        .d07-12-11 .bars07-12-11 span.on07-12-11{ animation:bar1771wave 1s ease-in-out infinite; }
        .d07-12-11 .bars07-12-11 span:nth-child(1){ animation-delay:-0.9s; }
        .d07-12-11 .bars07-12-11 span:nth-child(2){ animation-delay:-0.7s; }
        .d07-12-11 .bars07-12-11 span:nth-child(3){ animation-delay:-0.5s; }
        .d07-12-11 .bars07-12-11 span:nth-child(4){ animation-delay:-0.3s; }
        .d07-12-11 .bars07-12-11 span:nth-child(5){ animation-delay:-0.8s; }
        .d07-12-11 .bars07-12-11 span:nth-child(6){ animation-delay:-0.6s; }
        .d07-12-11 .bars07-12-11 span:nth-child(7){ animation-delay:-0.4s; }
        .d07-12-11 .bars07-12-11 span:nth-child(8){ animation-delay:-0.2s; }
        @keyframes bar1771wave{
          0%,100%{ height:20%; }
          50%{ height:90%; }
        }

(function(){
        var root = document.querySelector('.d07-12-11');
        if(!root) return;
        var btn = root.querySelector('.playbtn07-12-11');
        var bars = root.querySelectorAll('.bars07-12-11 span');
        var playing = false;
        btn.addEventListener('click', function(){
          playing = !playing;
          btn.setAttribute('aria-pressed', String(playing));
          btn.textContent = playing ? '❚❚' : '▶';
          bars.forEach(function(bar){
            bar.classList.toggle('on07-12-11', playing);
            if(!playing){ bar.style.height = (20 + Math.random()*40) + '%'; }
          });
        });
      })();