Skip to content
Josh Stovall edited this page Nov 22, 2020 · 1 revision

Some other ideas for future implementation.

VU Meter

Here is a previous implementation using SVG.

TO DO: Rewrite this to render to a <canvas>.

function draw() {
	analyser.getByteFrequencyData(frequencyData);
	var values = 0;
	var length = frequencyData.length;
	for (var i = 0; i < (length/4); i++) { values += (frequencyData[i]); }
	var average = values / length;
	// var loudness = Math.round((average + Number.EPSILON) * 100) / 100;
	// $( "#vu " ).html( loudness  )

$('#lineVU').css('transform','rotate('+ (((inverseRmsLogScale(rmsLogScale(0.80, 1500), values) * 90) * -1) + 90) +'deg)');

}

const rmsLogScale = (v, m) => {return (100 - ((Math.log((1 - v) * 100) / 4.605170185988092) * 100)) / 100 * m;};

const inverseRmsLogScale = (lg, m) => {const x5 = (lg * 100) / m;const x4 = (100 - x5);const x3 = x4 / 100;const x2 = x3 * 4.605170185988092;const x1 = Math.exp(x2);return 1 - ((x1) / 100);};

Audio Level Meter

I would call it a "decibel" meter, but I am not certain it is accurately analyzing decibels.

// Audio Input Meter
function draw() {
	analyser.getByteFrequencyData(frequencyData);
	var values = 0;
	var length = frequencyData.length;
	for (var i = 0; i < (length/4); i++) { values += (frequencyData[i]); }
	var average = (values / length) / 2;
	$("#audioInMeter").val(average);
}
Clone this wiki locally