Source for demo by Mikael Roos.
a=new Audio("data:audio/wav;base64,UklGRtQAAABXQVZFZm10IBAAAAABAAEARKwAAIhYAQACABAAZGF0YbAAAACLVqdX91Y/VHpQnkzxSDdFeUEjPgg8yztGPXA/N0F0QglE90Z5S/tQKlZcWhpeX2IqZyVrZm0LbuJtDW1ba4hoa2SdXmRXw09MSbREhkGnPs87GjqjOg09UT8FQLc/6z9IQdZC70L1P4k5zjDIJ14fiRbrCxIAz/Uc8KrvH/J58yfxR+sH5HzdU9hr1G/RNc/pzUrNaswbysjGuMR8xhbMA9MT2APa49nS2aXaRttD2g==");bm=120;b=document.body;cv=b.children[0];ch=by=cv.height=410;cw=cv.width=180;bx=cw/2;z=82;x=bx+z;rs=400;i=10;c=cv.getContext("2d");h=1;c.fillStyle="#888";function mn(){c.beginPath();c.moveTo(bx,by);d=Math.abs(x-bx);y=by-Math.sqrt(rs*rs-d*d);c.lineTo(x,y);c.stroke();if(d>=z){c.clearRect(0,0,cw,ch);c.moveTo(5,by);c.lineTo(80,0);c.lineTo(100,0);c.lineTo(175,by);c.fill();h=(h==0)?1:0;a.play()}(h==0)?(x=x-k):(x=x+k)}u="BPM";e=document.createElement("b");function sb(){e.innerHTML=bm+u;k=(i*2*z)/(60000/bm)}sb();b.appendChild(e);setInterval(mn,i);cb=document.createElement("button");cb.innerHTML="Change";b.appendChild(cb);cb.onclick=function(){bm=parseInt(prompt(u));sb()};