aylarov/mic_activity.html

## mic_activity.html
<!doctype html>
<html>
<head>
    <title>VoxImplant Mic Activity Visualization Demo</title>
    <script type="text/javascript" src="//cdn.voximplant.com/voximplant.min.js"></script>
</head>
<body>
<canvas id="mic_activity" width="30" height="150" style="border: solid 1px #ccc;"></canvas>
<script>
var vox = VoxImplant.getInstance();
vox.addEventListener(VoxImplant.Events.SDKReady, function(e) { vox.connect(); });
vox.addEventListener(VoxImplant.Events.MicAccessResult, onMicAccessResult);

vox.init({
	micRequired: true
});

function onMicAccessResult(e) {
	if (e.result) createMicActivityIndicator(e.stream);
}

function createMicActivityIndicator(stream) {

	var audioContext = new AudioContext(),
		analyser = audioContext.createAnalyser(),
		microphone = audioContext.createMediaStreamSource(stream),
		javascriptNode = audioContext.createScriptProcessor(2048, 1, 1);

    analyser.smoothingTimeConstant = 0.3;
    analyser.fftSize = 1024;

    microphone.connect(analyser);
    analyser.connect(javascriptNode);
    javascriptNode.connect(audioContext.destination);

    var ctx = document.getElementById("mic_activity").getContext("2d");

    javascriptNode.onaudioprocess = function() {
        var array =  new Uint8Array(analyser.frequencyBinCount);
        analyser.getByteFrequencyData(array);
        var values = 0,
        	length = array.length;

        for (var i = 0; i < length; i++) values += array[i];

        var average = values / length;
        ctx.clearRect(0, 0, 30, 150);
        var grad = ctx.createLinearGradient(1,1,28,148);
		grad.addColorStop(0,"#FF0000");
		grad.addColorStop(0.5, "yellow");
		grad.addColorStop(1,"#00FF00");
		ctx.fillStyle=grad;
        ctx.fillRect(1,148-average,28,148);
    }

}
</script>
</body>
	<!doctype html>
	<html>
	<head>
	<title>VoxImplant Mic Activity Visualization Demo</title>
	<script type="text/javascript" src="//cdn.voximplant.com/voximplant.min.js"></script>
	</head>
	<body>
	<canvas id="mic_activity" width="30" height="150" style="border: solid 1px #ccc;"></canvas>
	<script>
	var vox = VoxImplant.getInstance();
	vox.addEventListener(VoxImplant.Events.SDKReady, function(e) { vox.connect(); });
	vox.addEventListener(VoxImplant.Events.MicAccessResult, onMicAccessResult);

	vox.init({
	micRequired: true
	});

	function onMicAccessResult(e) {
	if (e.result) createMicActivityIndicator(e.stream);
	}

	function createMicActivityIndicator(stream) {

	var audioContext = new AudioContext(),
	analyser = audioContext.createAnalyser(),
	microphone = audioContext.createMediaStreamSource(stream),
	javascriptNode = audioContext.createScriptProcessor(2048, 1, 1);

	analyser.smoothingTimeConstant = 0.3;
	analyser.fftSize = 1024;

	microphone.connect(analyser);
	analyser.connect(javascriptNode);
	javascriptNode.connect(audioContext.destination);

	var ctx = document.getElementById("mic_activity").getContext("2d");

	javascriptNode.onaudioprocess = function() {
	var array = new Uint8Array(analyser.frequencyBinCount);
	analyser.getByteFrequencyData(array);
	var values = 0,
	length = array.length;

	for (var i = 0; i < length; i++) values += array[i];

	var average = values / length;
	ctx.clearRect(0, 0, 30, 150);
	var grad = ctx.createLinearGradient(1,1,28,148);
	grad.addColorStop(0,"#FF0000");
	grad.addColorStop(0.5, "yellow");
	grad.addColorStop(1,"#00FF00");
	ctx.fillStyle=grad;
	ctx.fillRect(1,148-average,28,148);
	}

	}
	</script>
	</body>