Decibel Meter

by Ben Gillbanks

HTML

<h1>Decibel Meter</h1>
  <button id="startButton">Start Listening</button>
  <div id="meter" style="display: none;">
    <div id="bar"></div>
    <div id="level">0 dB</div>
  </div>

CSS

body {
      font-family: Arial, sans-serif;
      text-align: center;
    }
    #meter {
      width: 300px;
      height: 50px;
      border: 1px solid #ccc;
      margin: 50px auto;
      position: relative;
    }
    #meter #bar {
      width: 0;
      height: 100%;
      background-color: #4CAF50;
    }
    #meter #level {
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
    }

JavaScript

let audioContext;
    let analyser;
    let source;

    function startListening() {
      navigator.mediaDevices.getUserMedia({ audio: true })
        .then(function (stream) {
          audioContext = new AudioContext();
          analyser = audioContext.createAnalyser();
          source = audioContext.createMediaStreamSource(stream);
          source.connect(analyser);

          analyser.fftSize = 256;
          const bufferLength = analyser.frequencyBinCount;
          const dataArray = new Uint8Array(bufferLength);

          function drawMeter() {
            requestAnimationFrame(drawMeter);

            analyser.getByteFrequencyData(dataArray);
            const average = dataArray.reduce((acc, val) => acc + val, 0) / bufferLength;
            const dB = 20 * Math.log10(average / 128);

            const meterWidth = dB * 3;
            const bar = document.getElementById('bar');
            bar.style.width = meterWidth + 'px';

            const level = document.getElementById('level');
            level.textContent = Math.round(dB) + ' dB';
          }

          drawMeter();

          document.getElementById('startButton').style.display = 'none';
          document.getElementById('meter').style.display = 'block';
        })
        .catch(function (err) {
          console.error('Error accessing microphone:', err);
        });
    }

    document.getElementById('startButton').addEventListener('click', startListening);