gangadharjannu/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
<style id="jsbin-css">
#visualizer {
    background-color: #ddd;
}
</style>
</head>
<body>
<canvas id="visualizer"></canvas>
<button type="button" id="start">start</button>
<script id="jsbin-javascript">
window.AudioContext = window.AudioContext || window.webkitAudioContext;
navigator.getUserMedia = navigator.getUserMedia ||
  navigator.webkitGetUserMedia ||
  navigator.mozGetUserMedia;

var context = new AudioContext();
var analyser = context.createAnalyser();
var gain = context.createGain();
gain.gain.value = 0;
analyser.fftSize = 2048;
var frequencyData = new Float32Array(analyser.frequencyBinCount);

analyser.connect(gain);
gain.connect(context.destination);

// Visualizer
var analyzerSamples = analyser.frequencyBinCount;
var canvas = document.querySelector("#visualizer");
var ctx = canvas.getContext("2d");
canvas.width = analyser.frequencyBinCount;
canvas.height = 256;

function showFrequency() {
  var inp = frequencyData;
  analyser.getFloatFrequencyData(inp);
  ctx.clearRect(0, 0, analyzerSamples, 256);
  ctx.beginPath();
  ctx.moveTo(0.5, 255.5 - 255.5 * 20 * Math.pow(10, inp[0] / 20));
  for (var i = 1; i < inp.length; i++) {
    ctx.lineTo(Math.log(i) * 120, 255.5 - 255.5 * 20 * Math.pow(10, inp[i] / 20));
  }
  ctx.stroke();
}

setInterval(showFrequency, 1000 / 50);

document.getElementById('start').addEventListener('click', function() {
  navigator.getUserMedia({
    audio: true,
    video: false
  }, function(stream) {
    var mic = context.createMediaStreamSource(stream);
    mic.connect(analyser);
  }, function(err) {
    throw new Error(err.name)
  });
});
</script>


<script id="jsbin-source-css" type="text/css">#visualizer {
    background-color: #ddd;
}
</script>

<script id="jsbin-source-javascript" type="text/javascript">window.AudioContext = window.AudioContext || window.webkitAudioContext;
navigator.getUserMedia = navigator.getUserMedia ||
  navigator.webkitGetUserMedia ||
  navigator.mozGetUserMedia;

var context = new AudioContext();
var analyser = context.createAnalyser();
var gain = context.createGain();
gain.gain.value = 0;
analyser.fftSize = 2048;
var frequencyData = new Float32Array(analyser.frequencyBinCount);

analyser.connect(gain);
gain.connect(context.destination);

// Visualizer
var analyzerSamples = analyser.frequencyBinCount;
var canvas = document.querySelector("#visualizer");
var ctx = canvas.getContext("2d");
canvas.width = analyser.frequencyBinCount;
canvas.height = 256;

function showFrequency() {
  var inp = frequencyData;
  analyser.getFloatFrequencyData(inp);
  ctx.clearRect(0, 0, analyzerSamples, 256);
  ctx.beginPath();
  ctx.moveTo(0.5, 255.5 - 255.5 * 20 * Math.pow(10, inp[0] / 20));
  for (var i = 1; i < inp.length; i++) {
    ctx.lineTo(Math.log(i) * 120, 255.5 - 255.5 * 20 * Math.pow(10, inp[i] / 20));
  }
  ctx.stroke();
}

setInterval(showFrequency, 1000 / 50);

document.getElementById('start').addEventListener('click', function() {
  navigator.getUserMedia({
    audio: true,
    video: false
  }, function(stream) {
    var mic = context.createMediaStreamSource(stream);
    mic.connect(analyser);
  }, function(err) {
    throw new Error(err.name)
  });
});
</script></body>
</html>

## jsbin.untitled.css
#visualizer {
    background-color: #ddd;
}

## jsbin.untitled.js
window.AudioContext = window.AudioContext || window.webkitAudioContext;
navigator.getUserMedia = navigator.getUserMedia ||
  navigator.webkitGetUserMedia ||
  navigator.mozGetUserMedia;

var context = new AudioContext();
var analyser = context.createAnalyser();
var gain = context.createGain();
gain.gain.value = 0;
analyser.fftSize = 2048;
var frequencyData = new Float32Array(analyser.frequencyBinCount);

analyser.connect(gain);
gain.connect(context.destination);

// Visualizer
var analyzerSamples = analyser.frequencyBinCount;
var canvas = document.querySelector("#visualizer");
var ctx = canvas.getContext("2d");
canvas.width = analyser.frequencyBinCount;
canvas.height = 256;

function showFrequency() {
  var inp = frequencyData;
  analyser.getFloatFrequencyData(inp);
  ctx.clearRect(0, 0, analyzerSamples, 256);
  ctx.beginPath();
  ctx.moveTo(0.5, 255.5 - 255.5 * 20 * Math.pow(10, inp[0] / 20));
  for (var i = 1; i < inp.length; i++) {
    ctx.lineTo(Math.log(i) * 120, 255.5 - 255.5 * 20 * Math.pow(10, inp[i] / 20));
  }
  ctx.stroke();
}

setInterval(showFrequency, 1000 / 50);

document.getElementById('start').addEventListener('click', function() {
  navigator.getUserMedia({
    audio: true,
    video: false
  }, function(stream) {
    var mic = context.createMediaStreamSource(stream);
    mic.connect(analyser);
  }, function(err) {
    throw new Error(err.name)
  });
});
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>JS Bin</title>
	<style id="jsbin-css">
	#visualizer {
	background-color: #ddd;
	}
	</style>
	</head>
	<body>
	<canvas id="visualizer"></canvas>
	<button type="button" id="start">start</button>
	<script id="jsbin-javascript">
	window.AudioContext = window.AudioContext \|\| window.webkitAudioContext;
	navigator.getUserMedia = navigator.getUserMedia \|\|
	navigator.webkitGetUserMedia \|\|
	navigator.mozGetUserMedia;

	var context = new AudioContext();
	var analyser = context.createAnalyser();
	var gain = context.createGain();
	gain.gain.value = 0;
	analyser.fftSize = 2048;
	var frequencyData = new Float32Array(analyser.frequencyBinCount);

	analyser.connect(gain);
	gain.connect(context.destination);

	// Visualizer
	var analyzerSamples = analyser.frequencyBinCount;
	var canvas = document.querySelector("#visualizer");
	var ctx = canvas.getContext("2d");
	canvas.width = analyser.frequencyBinCount;
	canvas.height = 256;

	function showFrequency() {
	var inp = frequencyData;
	analyser.getFloatFrequencyData(inp);
	ctx.clearRect(0, 0, analyzerSamples, 256);
	ctx.beginPath();
	ctx.moveTo(0.5, 255.5 - 255.5 * 20 * Math.pow(10, inp[0] / 20));
	for (var i = 1; i < inp.length; i++) {
	ctx.lineTo(Math.log(i) * 120, 255.5 - 255.5 * 20 * Math.pow(10, inp[i] / 20));
	}
	ctx.stroke();
	}

	setInterval(showFrequency, 1000 / 50);

	document.getElementById('start').addEventListener('click', function() {
	navigator.getUserMedia({
	audio: true,
	video: false
	}, function(stream) {
	var mic = context.createMediaStreamSource(stream);
	mic.connect(analyser);
	}, function(err) {
	throw new Error(err.name)
	});
	});
	</script>


	<script id="jsbin-source-css" type="text/css">#visualizer {
	background-color: #ddd;
	}
	</script>

	<script id="jsbin-source-javascript" type="text/javascript">window.AudioContext = window.AudioContext \|\| window.webkitAudioContext;
	navigator.getUserMedia = navigator.getUserMedia \|\|
	navigator.webkitGetUserMedia \|\|
	navigator.mozGetUserMedia;

	var context = new AudioContext();
	var analyser = context.createAnalyser();
	var gain = context.createGain();
	gain.gain.value = 0;
	analyser.fftSize = 2048;
	var frequencyData = new Float32Array(analyser.frequencyBinCount);

	analyser.connect(gain);
	gain.connect(context.destination);

	// Visualizer
	var analyzerSamples = analyser.frequencyBinCount;
	var canvas = document.querySelector("#visualizer");
	var ctx = canvas.getContext("2d");
	canvas.width = analyser.frequencyBinCount;
	canvas.height = 256;

	function showFrequency() {
	var inp = frequencyData;
	analyser.getFloatFrequencyData(inp);
	ctx.clearRect(0, 0, analyzerSamples, 256);
	ctx.beginPath();
	ctx.moveTo(0.5, 255.5 - 255.5 * 20 * Math.pow(10, inp[0] / 20));
	for (var i = 1; i < inp.length; i++) {
	ctx.lineTo(Math.log(i) * 120, 255.5 - 255.5 * 20 * Math.pow(10, inp[i] / 20));
	}
	ctx.stroke();
	}

	setInterval(showFrequency, 1000 / 50);

	document.getElementById('start').addEventListener('click', function() {
	navigator.getUserMedia({
	audio: true,
	video: false
	}, function(stream) {
	var mic = context.createMediaStreamSource(stream);
	mic.connect(analyser);
	}, function(err) {
	throw new Error(err.name)
	});
	});
	</script></body>
	</html>