JSFiddle - React, Tailwind, and code Playground

by Daedalus

HTML

<audio id='v' controls crossOrigin="anonymous" src="https://upload.wikimedia.org/wikipedia/en/3/3d/Sample_of_Daft_Punk%27s_Da_Funk.ogg" type="video/mp4"></audio><br />
<div id="l" class="meter">

</div>
<div id="r" class="meter">

</div>

CSS

#l {
  height: 20px;
  display: block;
  background-color: green;
}
#r {
  height: 20px;
  display: block;
  background-color: red;
}

JavaScript

// Create an AudioContext
const audioContext = new (window.AudioContext || window.webkitAudioContext)();

// Get the audio element
const audioElement = document.getElementById('v');

// Create a MediaElementSourceNode
const sourceNode = audioContext.createMediaElementSource(audioElement);

// Create a ScriptProcessorNode for analyzing the audio
const scriptNode = audioContext.createScriptProcessor(2048, 2, 2);

// Connect the nodes
sourceNode.connect(scriptNode);
sourceNode.connect(audioContext.destination);

// Process the audio data
scriptNode.onaudioprocess = function(e) {
  const inputData = e.inputBuffer.getChannelData(0);
  let sum = 0;
  for (let i = 0; i < inputData.length; i++) {
    sum += Math.abs(inputData[i]);
  }
  const rms = Math.sqrt(sum / inputData.length);
  const db = 20 * Math.log10(rms);
  console.log('Channel 1 dB level: ' + db.toFixed(2));

  const inputData2 = e.inputBuffer.getChannelData(1);
  let sum2 = 0;
  for (let i = 0; i < inputData2.length; i++) {
    sum2 += Math.abs(inputData2[i]);
  }
  const rms2 = Math.sqrt(sum2 / inputData2.length);
  const db2 = 20 * Math.log10(rms2);
  console.log('Channel 2 dB level: ' + db2.toFixed(2));
};

// Start the audio
audioElement.play();