Building circle meter gauge

Question

I was wondering if someone could help me with a circle meter gauage i have taken some code from a different example and i am just protypting stuff to see if i can get it to work here is a working example.

http://jsbin.com/ixuyid/28/edit

Click run with javascript

Code below

var context;

    canvas = document.getElementById('myCanvas');
      context = canvas.getContext('2d');

    //use a reusable function
    function drawCircle(num){
      console.log(num);
      var x = canvas.width / 2;
      var y = canvas.height / 2;
      var radius = 75;
      var startAngle = 0 * Math.PI;
      var endAngle = num * Math.PI;
      var counterClockwise = false;

      context.beginPath();
      context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
      context.lineWidth = 5;

      // line color
      context.strokeStyle = 'black';
      context.stroke();

    }

    drawCircle();

      var num = 1;
      setInterval(function(){

      },1000);

+function(){

  var ctx = new webkitAudioContext()
    , url = '//kevincennis.com/sound/loudpipes.mp3'  
    , audio = new Audio(url)
    // 2048 sample buffer, 1 channel in, 1 channel out  
    , processor = ctx.createJavaScriptNode(2048, 1, 1)
    , meter = document.getElementById('meter')
    , 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 ) + '%';
    context.clearRect(100,50,200,200);
    drawCircle(rms);
  }

}()

I seem to be having issue with the levels???

Any help

Answer 1

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