arthurbarros/index.html

## index.html
<!doctype html>
<html>
    <head>

        <script  src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
        <script src=" http://blaiprat.github.io/jquery.animateSprite/js/jquery.animateSprite.js"></script>

        <style type="text/css">
            .scott {
                height: 140px;
                width: 108px;
                background-image: url(http://blaiprat.github.io/jquery.animateSprite/img/scottpilgrim_multiple.png);
            }
        </style>
        <script type="text/javascript">
        $(function(){

        $(".scott").animateSprite({
            fps: 12,
            animations: {
                walkRight: [0, 1, 2, 3, 4, 5, 6, 7],
                walkLeft: [15, 14, 13, 12, 11, 10, 9, 8]
            },
            loop: true,
            complete: function(){
                // use complete only when you set animations with 'loop: false'
                alert("animation End");
            }
        });

        function createAudioMeter(audioContext,clipLevel,averaging,clipLag) {
            var processor = audioContext.createScriptProcessor(512);
            processor.onaudioprocess = volumeAudioProcess;
            processor.clipping = false;
            processor.lastClip = 0;
            processor.volume = 0;
            processor.clipLevel = clipLevel || 0.98;
            processor.averaging = averaging || 0.95;
            processor.clipLag = clipLag || 750;

            processor.connect(audioContext.destination);

            processor.checkClipping =
                function(){
                    if (!this.clipping)
                        return false;
                    if ((this.lastClip + this.clipLag) < window.performance.now())
                        this.clipping = false;
                    return this.clipping;
                };

            processor.shutdown =
                function(){
                    this.disconnect();
                    this.onaudioprocess = null;
                };

            return processor;
        }

        function volumeAudioProcess( event ) {
            var buf = event.inputBuffer.getChannelData(0);
            var bufLength = buf.length;
            var sum = 0;
            var x;

            for (var i=0; i<bufLength; i++) {
                x = buf[i];
                if (Math.abs(x)>=this.clipLevel) {
                    this.clipping = true;
                    this.lastClip = window.performance.now();
                }
                sum += x * x;
            }

            var rms =  Math.sqrt(sum / bufLength);
            this.volume = Math.max(rms, this.volume*this.averaging);
        }
        var audioContext = null;
        var meter = null;
        var canvasContext = null;
        var WIDTH=500;
        var HEIGHT=50;
        var rafID = null;

        window.onload = function() {

            // grab our canvas
            canvasContext = document.getElementById( "meter" ).getContext("2d");

            // monkeypatch Web Audio
            window.AudioContext = window.AudioContext || window.webkitAudioContext;

            // grab an audio context
            audioContext = new AudioContext();

            // Attempt to get audio input
            try {
                // monkeypatch getUserMedia
                navigator.getUserMedia =
                    navigator.getUserMedia ||
                    navigator.webkitGetUserMedia ||
                    navigator.mozGetUserMedia;

                // ask for an audio input
                navigator.getUserMedia(
                {
                    "audio": {
                        "mandatory": {
                            "googEchoCancellation": "false",
                            "googAutoGainControl": "false",
                            "googNoiseSuppression": "false",
                            "googHighpassFilter": "false"
                        },
                        "optional": []
                    },
                }, gotStream, didntGetStream);
            } catch (e) {
                alert('getUserMedia threw exception :' + e);
            }

        }

        function didntGetStream() {
            alert('Stream generation failed.');
        }

        var mediaStreamSource = null;

        function gotStream(stream) {
            // Create an AudioNode from the stream.
            mediaStreamSource = audioContext.createMediaStreamSource(stream);

            // Create a new volume meter and connect it.
            meter = createAudioMeter(audioContext,0.2,0.95,50);
            mediaStreamSource.connect(meter);

            // kick off the visual updating
            drawLoop();
        }

        function drawLoop( time ) {
            // clear the background
            canvasContext.clearRect(0,0,WIDTH,HEIGHT);

            // check if we're currently clipping
            if (meter.checkClipping()){
                canvasContext.fillStyle = "red";
                console.log(123)
                $(".scott").animateSprite('frame', 1)

            }else{
                canvasContext.fillStyle = "green";
                console.log(456)
                $(".scott").animateSprite('frame', 3)
            }

            // draw a bar based on the current volume
            canvasContext.fillRect(0, 0, meter.volume*WIDTH*1.4, HEIGHT);

            // set up the next visual callback
            rafID = window.requestAnimationFrame( drawLoop );
        }


        })
        </script>
    </head>
    <body>
        <canvas id="meter" width="1" height="1"></canvas>
        <div class="scott"></div>

    </body>
</html>
	<!doctype html>
	<html>
	<head>

	<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
	<script src=" http://blaiprat.github.io/jquery.animateSprite/js/jquery.animateSprite.js"></script>

	<style type="text/css">
	.scott {
	height: 140px;
	width: 108px;
	background-image: url(http://blaiprat.github.io/jquery.animateSprite/img/scottpilgrim_multiple.png);
	}
	</style>
	<script type="text/javascript">
	$(function(){

	$(".scott").animateSprite({
	fps: 12,
	animations: {
	walkRight: [0, 1, 2, 3, 4, 5, 6, 7],
	walkLeft: [15, 14, 13, 12, 11, 10, 9, 8]
	},
	loop: true,
	complete: function(){
	// use complete only when you set animations with 'loop: false'
	alert("animation End");
	}
	});

	function createAudioMeter(audioContext,clipLevel,averaging,clipLag) {
	var processor = audioContext.createScriptProcessor(512);
	processor.onaudioprocess = volumeAudioProcess;
	processor.clipping = false;
	processor.lastClip = 0;
	processor.volume = 0;
	processor.clipLevel = clipLevel \|\| 0.98;
	processor.averaging = averaging \|\| 0.95;
	processor.clipLag = clipLag \|\| 750;

	processor.connect(audioContext.destination);

	processor.checkClipping =
	function(){
	if (!this.clipping)
	return false;
	if ((this.lastClip + this.clipLag) < window.performance.now())
	this.clipping = false;
	return this.clipping;
	};

	processor.shutdown =
	function(){
	this.disconnect();
	this.onaudioprocess = null;
	};

	return processor;
	}

	function volumeAudioProcess( event ) {
	var buf = event.inputBuffer.getChannelData(0);
	var bufLength = buf.length;
	var sum = 0;
	var x;

	for (var i=0; i<bufLength; i++) {
	x = buf[i];
	if (Math.abs(x)>=this.clipLevel) {
	this.clipping = true;
	this.lastClip = window.performance.now();
	}
	sum += x * x;
	}

	var rms = Math.sqrt(sum / bufLength);
	this.volume = Math.max(rms, this.volume*this.averaging);
	}
	var audioContext = null;
	var meter = null;
	var canvasContext = null;
	var WIDTH=500;
	var HEIGHT=50;
	var rafID = null;

	window.onload = function() {

	// grab our canvas
	canvasContext = document.getElementById( "meter" ).getContext("2d");

	// monkeypatch Web Audio
	window.AudioContext = window.AudioContext \|\| window.webkitAudioContext;

	// grab an audio context
	audioContext = new AudioContext();

	// Attempt to get audio input
	try {
	// monkeypatch getUserMedia
	navigator.getUserMedia =
	navigator.getUserMedia \|\|
	navigator.webkitGetUserMedia \|\|
	navigator.mozGetUserMedia;

	// ask for an audio input
	navigator.getUserMedia(
	{
	"audio": {
	"mandatory": {
	"googEchoCancellation": "false",
	"googAutoGainControl": "false",
	"googNoiseSuppression": "false",
	"googHighpassFilter": "false"
	},
	"optional": []
	},
	}, gotStream, didntGetStream);
	} catch (e) {
	alert('getUserMedia threw exception :' + e);
	}

	}

	function didntGetStream() {
	alert('Stream generation failed.');
	}

	var mediaStreamSource = null;

	function gotStream(stream) {
	// Create an AudioNode from the stream.
	mediaStreamSource = audioContext.createMediaStreamSource(stream);

	// Create a new volume meter and connect it.
	meter = createAudioMeter(audioContext,0.2,0.95,50);
	mediaStreamSource.connect(meter);

	// kick off the visual updating
	drawLoop();
	}

	function drawLoop( time ) {
	// clear the background
	canvasContext.clearRect(0,0,WIDTH,HEIGHT);

	// check if we're currently clipping
	if (meter.checkClipping()){
	canvasContext.fillStyle = "red";
	console.log(123)
	$(".scott").animateSprite('frame', 1)

	}else{
	canvasContext.fillStyle = "green";
	console.log(456)
	$(".scott").animateSprite('frame', 3)
	}

	// draw a bar based on the current volume
	canvasContext.fillRect(0, 0, meter.volumeWIDTH1.4, HEIGHT);

	// set up the next visual callback
	rafID = window.requestAnimationFrame( drawLoop );
	}


	})
	</script>
	</head>
	<body>
	<canvas id="meter" width="1" height="1"></canvas>
	<div class="scott"></div>

	</body>
	</html>