bpk-t/level_meter.html

## level_meter.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Microphone Input Test</title>
    </head>
<body>
    <div>LevelMeter</div>
    <div>
        <button id="start">Start</button>
        <button id="stop">Stop</button>
    </div>
    <canvas id="levelmeter" width="256" height="256"></canvas>

    <script type="text/javascript" src="https://code.jquery.com/jquery-2.2.3.js"></script>
    <script type="text/javascript">

    navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
    window.AudioContext = window.AudioContext || window.webkitAudioContext;
    var audioContext = null;
    var analyser = null;
    var timer = null;
    var canvasContext = null;
    var userStream = null;

    $(function(){
        audioContext = new AudioContext();

        // Low Pass filter
        lowpassFilter = audioContext.createBiquadFilter();
        lowpassFilter.type = 0;
        lowpassFilter.frequency.value = 20000;

        // Analyser
        analyser = audioContext.createAnalyser();
        analyser.fftSize = 1024;
        analyser.smoothingTimeContant = 0.9;

        canvasContext = $("#levelmeter")[0].getContext("2d");

        userMediaOption = {
                  video: false,
                  audio: true
            };
        $("#start").click(function(){
            if (!navigator.getUserMedia) {
                alert("カメラ未対応");
            }
            navigator.getUserMedia(
                userMediaOption,
                function(stream) {
                    userStream = stream;
                    var input = audioContext.createMediaStreamSource(stream);
                    input.connect(lowpassFilter);
	                lowpassFilter.connect(analyser);
                    timer = setInterval(periodicUpdate, 100);
                },
                function(error) {
                    alert('エラーが発生した : ' + error.name);
                });
        });

        $("#stop").click(function(){
            clearInterval(timer);
        });
    });

    var periodicUpdate = function() {
        canvasContext.fillStyle = "rgb(0,0,0)";
        canvasContext.fillRect(0, 0, 256, 256);
        var data = new Uint8Array(256);
        analyser.getByteFrequencyData(data);
        for (var i = 0; i < 256; ++i) {
            canvasContext.fillStyle = "rgb(0,255,204)"
            canvasContext.fillRect(i, 256 - data[i], 1, data[i]);
        }
    }
    </script>
</body>
</html>

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<title>Microphone Input Test</title>
	</head>
	<body>
	<div>LevelMeter</div>
	<div>
	<button id="start">Start</button>
	<button id="stop">Stop</button>
	</div>
	<canvas id="levelmeter" width="256" height="256"></canvas>

	<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.3.js"></script>
	<script type="text/javascript">

	navigator.getUserMedia = navigator.getUserMedia \|\| navigator.webkitGetUserMedia \|\| navigator.mozGetUserMedia \|\| navigator.msGetUserMedia;
	window.AudioContext = window.AudioContext \|\| window.webkitAudioContext;
	var audioContext = null;
	var analyser = null;
	var timer = null;
	var canvasContext = null;
	var userStream = null;

	$(function(){
	audioContext = new AudioContext();

	// Low Pass filter
	lowpassFilter = audioContext.createBiquadFilter();
	lowpassFilter.type = 0;
	lowpassFilter.frequency.value = 20000;

	// Analyser
	analyser = audioContext.createAnalyser();
	analyser.fftSize = 1024;
	analyser.smoothingTimeContant = 0.9;

	canvasContext = $("#levelmeter")[0].getContext("2d");

	userMediaOption = {
	video: false,
	audio: true
	};
	$("#start").click(function(){
	if (!navigator.getUserMedia) {
	alert("カメラ未対応");
	}
	navigator.getUserMedia(
	userMediaOption,
	function(stream) {
	userStream = stream;
	var input = audioContext.createMediaStreamSource(stream);
	input.connect(lowpassFilter);
	lowpassFilter.connect(analyser);
	timer = setInterval(periodicUpdate, 100);
	},
	function(error) {
	alert('エラーが発生した : ' + error.name);
	});
	});

	$("#stop").click(function(){
	clearInterval(timer);
	});
	});

	var periodicUpdate = function() {
	canvasContext.fillStyle = "rgb(0,0,0)";
	canvasContext.fillRect(0, 0, 256, 256);
	var data = new Uint8Array(256);
	analyser.getByteFrequencyData(data);
	for (var i = 0; i < 256; ++i) {
	canvasContext.fillStyle = "rgb(0,255,204)"
	canvasContext.fillRect(i, 256 - data[i], 1, data[i]);
	}
	}
	</script>
	</body>
	</html>