jason-shen/volume_meter.html

## volume_meter.html
<!DOCTYPE html>
<html lang="en">
    <head>
        <title> </title>
        <link rel="stylesheet" type="text/css" href="http://cdn.jsdelivr.net/min/1.5/min.min.css">
        <style>
        body,textarea,input,select {
            background:0;
            border-radius:0;
            font:16px sans-serif;
            margin:0
        }
        .addon,.btn-sm,.nav,textarea,input,select{
            outline:0;
            font-size:14px
        }
        .smooth{
            transition:all .2s
        }
        .btn,.nav a{
            text-decoration:none
        }
        .container{
            margin:0 20px;
            width:auto
        }
        @media(min-width:1310px){
            .container{
                margin:auto;
                width:1270px
            }
        }
        .btn,h2{
            font-size:2em
        }
        .msg{
            background:#def;
            border-left:5px solid #59d;
            padding:1.5em
        }
        .warning{
            background:#fdd;
            border-left:5px solid #e44
        }
        #errorMsg{
            display:none
        }
        #meterGraph{
            height:30px;
            width:400px;
            border:1px solid #000;
            margin:10px 10px 10px 10px;
        }
        #meter{
            background: #00ff00;
            width: 0%;
            height: 100%;
        }
        </style>
        <script type="text/javascript">
        function showError(msg) {
            var errorMsg = document.getElementById('errorMsg');
            errorMsg.innerHTML = '<strong>Error:</strong>\n' + msg;
            errorMsg.style.display = 'block';
        }

        function updateMeter(pct) {
            var meter = document.getElementById('meter');
            meter.style.width = pct + '%';
        }

        window.onload = function () {
            window.AudioContext = (window.AudioContext ||
                                   window.webkitAudioContext);
            navigator.getUserMedia = (navigator.getUserMedia ||
                                      navigator.webkitGetUserMedia ||
                                      navigator.mozGetUserMedia);
            navigator.getUserMedia({
                video : false,
                audio : true
            }, function (stream) {
                var audioContext = new AudioContext();
                var mediaStreamSource = audioContext.createMediaStreamSource(stream);
                var processor = audioContext.createScriptProcessor(2048, 1, 1);

                mediaStreamSource.connect(audioContext.destination);
                mediaStreamSource.connect(processor);
                processor.connect(audioContext.destination);

                processor.onaudioprocess = function (e) {
                    var inputData = e.inputBuffer.getChannelData(0);
                    var inputDataLength = inputData.length;
                    var total = 0;

                    for (var i = 0; i < inputDataLength; i++) {
                        total += Math.abs(inputData[i++]);
                    }

                    var rms = Math.sqrt(total / inputDataLength);
                    updateMeter(rms * 100);
                };
            }, function (err) {
                showError(err);
            });
        }
        </script>
    </head>
    <body>
        <div id="errorMsg" class="msg warning">
        </div>

        <div id="meterGraph">
        <div id="meter"></div>
        </div>
    </body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<title> </title>
	<link rel="stylesheet" type="text/css" href="http://cdn.jsdelivr.net/min/1.5/min.min.css">
	<style>
	body,textarea,input,select {
	background:0;
	border-radius:0;
	font:16px sans-serif;
	margin:0
	}
	.addon,.btn-sm,.nav,textarea,input,select{
	outline:0;
	font-size:14px
	}
	.smooth{
	transition:all .2s
	}
	.btn,.nav a{
	text-decoration:none
	}
	.container{
	margin:0 20px;
	width:auto
	}
	@media(min-width:1310px){
	.container{
	margin:auto;
	width:1270px
	}
	}
	.btn,h2{
	font-size:2em
	}
	.msg{
	background:#def;
	border-left:5px solid #59d;
	padding:1.5em
	}
	.warning{
	background:#fdd;
	border-left:5px solid #e44
	}
	#errorMsg{
	display:none
	}
	#meterGraph{
	height:30px;
	width:400px;
	border:1px solid #000;
	margin:10px 10px 10px 10px;
	}
	#meter{
	background: #00ff00;
	width: 0%;
	height: 100%;
	}
	</style>
	<script type="text/javascript">
	function showError(msg) {
	var errorMsg = document.getElementById('errorMsg');
	errorMsg.innerHTML = '<strong>Error:</strong>\n' + msg;
	errorMsg.style.display = 'block';
	}

	function updateMeter(pct) {
	var meter = document.getElementById('meter');
	meter.style.width = pct + '%';
	}

	window.onload = function () {
	window.AudioContext = (window.AudioContext \|\|
	window.webkitAudioContext);
	navigator.getUserMedia = (navigator.getUserMedia \|\|
	navigator.webkitGetUserMedia \|\|
	navigator.mozGetUserMedia);
	navigator.getUserMedia({
	video : false,
	audio : true
	}, function (stream) {
	var audioContext = new AudioContext();
	var mediaStreamSource = audioContext.createMediaStreamSource(stream);
	var processor = audioContext.createScriptProcessor(2048, 1, 1);

	mediaStreamSource.connect(audioContext.destination);
	mediaStreamSource.connect(processor);
	processor.connect(audioContext.destination);

	processor.onaudioprocess = function (e) {
	var inputData = e.inputBuffer.getChannelData(0);
	var inputDataLength = inputData.length;
	var total = 0;

	for (var i = 0; i < inputDataLength; i++) {
	total += Math.abs(inputData[i++]);
	}

	var rms = Math.sqrt(total / inputDataLength);
	updateMeter(rms * 100);
	};
	}, function (err) {
	showError(err);
	});
	}
	</script>
	</head>
	<body>
	<div id="errorMsg" class="msg warning">
	</div>

	<div id="meterGraph">
	<div id="meter"></div>
	</div>
	</body>
	</html>