JSFiddle - React, Tailwind, and code Playground

by techsin

HTML

<script src="https://www.google.com/jsapi"></script>
<video id='v' controls>
    <source src="http://easyhtml5video.com/images/happyfit2.mp4" type="video/mp4">
</video>
<p class="l">0</p>
<canvas class="cht" width='100' height='100'></canvas>
<!-- <div class="cir"></div> -->

CSS

.cir {
    height: 100px; width: 100px; min-height: 20px; min-width: 20px;
    border-radius:1000px; background-color: red; position: absolute; bottom: 50px; left: 50%;  
}

JavaScript

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

var c=$('.cht')[0].getContext('2d'),imgData;

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.getByteTimeDomainData(arr);
    for(l=i=0; i<arr.length;i++){
        abs=Math.abs(arr[i]-128);
        if (l<abs) l=abs;
    }
    p.text(l);
    h=(l/127)*100;
    cir.height(h).width(h);
    translate(100-h);
}



var py=100;
function draw(y){ 
c.beginPath();
c.moveTo(98,py);
c.lineTo(99,y);
c.stroke();
py=y;    
}

function translate(x){
    imgData=c.getImageData(0,0,100,100);
    c.clearRect(0,0,100,100);
    c.putImageData(imgData,-1,0);
    draw(x);    
}