波形シークバー(クリックでシーク)

<div class="seek07-06-04">
          <div class="bars07-06-04">
            <span style="--h:30%"></span><span style="--h:55%"></span><span style="--h:80%"></span><span style="--h:40%"></span>
            <span style="--h:65%"></span><span style="--h:90%"></span><span style="--h:35%"></span><span style="--h:60%"></span>
            <span style="--h:45%"></span><span style="--h:75%"></span><span style="--h:50%"></span><span style="--h:85%"></span>
            <span style="--h:40%"></span><span style="--h:60%"></span><span style="--h:30%"></span><span style="--h:70%"></span>
          </div>
          <div class="progress07-06-04"></div>
          <div class="knob07-06-04"></div>
        </div>

.d07-06-04 .seek07-06-04{ position:relative; width:90%; max-width:280px; height:60px; cursor:pointer; }
        .d07-06-04 .bars07-06-04{ position:absolute; inset:0; display:flex; align-items:center; gap:3px; }
        .d07-06-04 .bars07-06-04 span{ flex:1; height:var(--h); background:#d8d8e0; border-radius:2px; }
        .d07-06-04 .progress07-06-04{ position:absolute; top:0; left:0; height:100%; width:35%; overflow:hidden; display:flex; align-items:center; gap:3px; pointer-events:none; }
        .d07-06-04 .knob07-06-04{ position:absolute; top:0; left:35%; width:2px; height:100%; background:#4f46e5; pointer-events:none; transition:left .1s linear; }

(function(){
        var root = document.querySelector('.d07-06-04');
        var seek = root.querySelector('.seek07-06-04');
        var bars = root.querySelector('.bars07-06-04');
        var progress = root.querySelector('.progress07-06-04');
        var knob = root.querySelector('.knob07-06-04');
        function buildProgressBars(){
          progress.innerHTML = bars.innerHTML.replace(/background:#d8d8e0/g, 'background:#4f46e5');
        }
        function setPos(ratio){
          ratio = Math.max(0, Math.min(1, ratio));
          progress.style.width = (ratio*100) + '%';
          knob.style.left = (ratio*100) + '%';
        }
        buildProgressBars();
        setPos(0.35);
        seek.addEventListener('click', function(e){
          var rect = seek.getBoundingClientRect();
          setPos((e.clientX - rect.left) / rect.width);
        });
      })();