JSFiddle - React, Tailwind, and code Playground

HTML

<video id='v' controls>
    <source src="http://easyhtml5video.com/images/happyfit2.mp4" type="video/mp4">
</video>
<p class="l"></p>

JavaScript

var v= document.getElementById('v'),
    ctx= new webkitAudioContext(),
    src= ctx.createMediaElementSource(v),
    alyz= ctx.createAnalyser(),
    arr= null, l=0, i=0,
    t=true, p=$('.l');


v.addEventListener('play',update);
v.addEventListener('ended',function(){t=false;});

src.connect(alyz);
alyz.connect(ctx.destination);
arr= new Uint8Array(alyz.frequencyBinCount);

function update(){
    if(t) requestAnimationFrame(update);
    alyz.getByteFrequencyData(arr);
    l=0;
    for(i=0; i<arr.length;i++) { l= (l<arr[i])?arr[i]:l; }
    p.text(l);
}