JSFiddle - React, Tailwind, and code Playground

by Sean Coker

HTML

<div id=meter></div>

CSS

#meter {
  width: 0%;
  height: 15px;
  margin: 2px 0;
  background: green;
  -webkit-transition: width .05s;
}

JavaScript

var ctx = new webkitAudioContext();
  var url = 'https://cf-media.sndcdn.com/46mgL3aOd1eT.128.mp3?Policy=eyJTdGF0ZW1lbnQiOlt7IlJlc291cmNlIjoiKjovL2NmLW1lZGlhLnNuZGNkbi5jb20vNDZtZ0wzYU9kMWVULjEyOC5tcDMiLCJDb25kaXRpb24iOnsiRGF0ZUxlc3NUaGFuIjp7IkFXUzpFcG9jaFRpbWUiOjE0OTA2Mzk0MzB9fX1dfQ__&Signature=plKzT4Ydw2i8Cj0aMjnve1e8qxJWnINUvzI8s2DQoUBSFcwIYdEb94qZdzDjG7UWAsQWIJPee8nJ0pCDcgkVFqvcHBK9vPhcnULX0nTbsLhM37bqeWR8nL9du-gzDEGYIln5iP0T7KYFdWEA5bo~qkAtwKD-7JYA2VpecN5Lru16k2FSayYfoFo~rLT3OQ2fPc93K2cimvFQTVMmWfMRlSYBwmR3jRL-L1zMvWbelb-IFYcJuFkrwdirwRZMt~34LNTNIsyyEf6KreIMYh5Egp~ZelHAt5D3sEmc90StrBHAx5LT3c5kwEHfYEVrTjdQT~YOQpbI4JdnGnjYeEML9g__&Key-Pair-Id=APKAJAGZ7VMH2PFPW6UQ';
  var audio = new Audio(url);
  audio.crossOrigin = "anonymous";
 // debugger;
    // 2048 sample buffer, 1 channel in, 1 channel out  
  var processor = ctx.createScriptProcessor(2048, 1, 1);
  var meter = document.getElementById('meter');
  var source;
    
  audio.addEventListener('canplaythrough', function(){
    source = ctx.createMediaElementSource(audio)
    source.connect(processor)
    source.connect(ctx.destination)
    processor.connect(ctx.destination)
    audio.play()
  }, false);
  
  // loop through PCM data and calculate average
  // volume for a given 2048 sample buffer
  processor.onaudioprocess = function(evt){
    var input = evt.inputBuffer.getChannelData(0)
      , len = input.length   
      , total = i = 0
      , rms
    while ( i < len ) total += Math.abs( input[i++] )
    rms = Math.sqrt( total / len )
    meter.style.width = ( rms * 100 ) + '%'
  }