Change these two lines in the drawCircle
function:
var startAngle = 0; //multiplying with 0 will result in 0
var endAngle = 360 * num * Math.PI / 180;
Your num
seem to be a value between 0 and 1 so we need to add what we're using that with, here 360 degrees, then convert by using PI / 180
.
The other problem is that the clearRect
wasn't extended far enough so it left part of the arc uncleared to the right.
Tip: To make it look more realistic you can update your rms
only when the new rms
is higher, and if not just subtract a small value for each frame.
For example:
//global scope
var oldRMS = 0;
Inside your processor.onaudioprocess
after vars:
if (rms > oldRMS) oldRMS = rms;
meter.style.width = ( oldRMS * 100 ) + '%';
context.clearRect(100,50,canvas.width,canvas.height);
drawCircle(oldRMS);
oldRMS -= 0.04; //speed of fallback
Modifcations:
http://jsbin.com/ixuyid/29/edit