Строительный метр метра здания

Question

Мне было интересно, может ли кто-нибудь помочь мне с помощью измерителя кругового счетчика, я взял какой-то код из другого примера, и я просто проталкиваю вещи, чтобы посмотреть, могу ли я заставить его работать здесь, рабочий пример.

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

Нажмите пуск с яваскриптом

ниже кодом

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); 
    } 

}() 

Я, кажется, имеющими проблемы с уровнями ???

Любая помощь

Answer 1

Изменить эти две строки в функции drawCircle:

var startAngle = 0; //multiplying with 0 will result in 0 
var endAngle = 360 * num * Math.PI/180; 

Ваш num, кажется, значение между 0 и 1, поэтому мы должны добавить, что мы используем, что с, здесь 360 градусов, затем конвертировать с помощью PI/180.

Другая проблема заключается в том, что clearRect не был продлен достаточно далеко, поэтому он оставил часть дуги, не очищенную вправо.

Совет: Чтобы сделать его более реалистичным, вы можете обновить свой rms только в том случае, если новый rms выше, а если не просто вычесть небольшое значение для каждого кадра.

Например:

//global scope 
var oldRMS = 0; 

Внутри вашего processor.onaudioprocess после Варс:

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