← 動的パーツギャラリーへ戻る

パーツ番号 07-12-05 ・ JavaScript使用

ポッドキャスト風音量メーター(VUメーター)

L/R2列のセグメントが音量に応じて緑→黄→赤の順に点灯するVUメーター演出です。ライブ配信や録音アプリの音量モニターに使えます。

js

プレビュー

ソースコード

HTML

<div class="vu07-12-05">
          <div class="col07-12-05" data-col="l">
            <span class="seg07-12-05"></span><span class="seg07-12-05"></span><span class="seg07-12-05"></span><span class="seg07-12-05"></span><span class="seg07-12-05"></span>
            <span class="seg07-12-05"></span><span class="seg07-12-05"></span><span class="seg07-12-05"></span><span class="seg07-12-05"></span><span class="seg07-12-05"></span>
          </div>
          <div class="col07-12-05" data-col="r">
            <span class="seg07-12-05"></span><span class="seg07-12-05"></span><span class="seg07-12-05"></span><span class="seg07-12-05"></span><span class="seg07-12-05"></span>
            <span class="seg07-12-05"></span><span class="seg07-12-05"></span><span class="seg07-12-05"></span><span class="seg07-12-05"></span><span class="seg07-12-05"></span>
          </div>
        </div>

CSS

.d07-12-05{ background:#0b0f14; }
        .d07-12-05 .vu07-12-05{ display:flex; gap:12px; align-items:flex-end; height:150px; }
        .d07-12-05 .col07-12-05{ display:flex; flex-direction:column-reverse; gap:3px; width:26px; }
        .d07-12-05 .seg07-12-05{ height:10px; border-radius:2px; background:#22303c; transition:background .15s; }
        .d07-12-05 .seg07-12-05.on07-12-05-g{ background:#22c55e; }
        .d07-12-05 .seg07-12-05.on07-12-05-y{ background:#eab308; }
        .d07-12-05 .seg07-12-05.on07-12-05-r{ background:#ef4444; }
        @media (prefers-reduced-motion: reduce){
          .d07-12-05 .seg07-12-05{ transition:none; }
        }

JavaScript

(function(){
        var root = document.querySelector('.d07-12-05');
        var cols = root.querySelectorAll('.col07-12-05');
        var reduce = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
        function paint(col, level){
          var segs = col.querySelectorAll('.seg07-12-05');
          segs.forEach(function(seg, i){
            seg.classList.remove('on07-12-05-g','on07-12-05-y','on07-12-05-r');
            if(i < level){
              if(i < 6){ seg.classList.add('on07-12-05-g'); }
              else if(i < 8){ seg.classList.add('on07-12-05-y'); }
              else{ seg.classList.add('on07-12-05-r'); }
            }
          });
        }
        if(reduce){
          cols.forEach(function(col){ paint(col, 5); });
          return;
        }
        function tick(){
          cols.forEach(function(col){
            paint(col, 2 + Math.floor(Math.random()*9));
          });
        }
        tick();
        setInterval(tick, 280);
      })();

クラス名 .d07-12-05 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。