console 命令行工具 X clear

console

var AudioContext = window.AudioContext || window.webkitAudioContext; //Cross browser variant.

var canvas, ctx;
var audioContext;
var file;
var fileContent;
var audioBufferSourceNode;
var analyser;

var loadFile = function () {
    var fileReader = new FileReader();
    fileReader.onload = function (e) {
        fileContent = e.target.result;
        decodecFile();
    }
    fileReader.readAsArrayBuffer(file);
}

var decodecFile = function () {
    audioContext.decodeAudioData(fileContent, function (buffer) {
        start(buffer);
    });
}

var start = function (buffer) {
    if (audioBufferSourceNode) {
        audioBufferSourceNode.stop();
    }

    audioBufferSourceNode = audioContext.createBufferSource();
    audioBufferSourceNode.connect(analyser);
    analyser.connect(audioContext.destination);
    audioBufferSourceNode.buffer = buffer;
    audioBufferSourceNode.start(0);
    showTip(false);
    window.requestAnimationFrame(render); //先判断是否已经调用一次
}

var showTip = function (show) {
    var tip = document.getElementById('tip');
    if (show) {
        tip.className = "show";
    } else {
        tip.className = "";
    }
}

var render = function () {
    ctx = canvas.getContext("2d");
    ctx.strokeStyle = "#ffff00";
    ctx.lineWidth = 5;
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    var dataArray = new Uint8Array(analyser.frequencyBinCount);
    analyser.getByteFrequencyData(dataArray);
    var step = Math.round(dataArray.length / 60);

    for (var i = 0; i < 10; i++) {
        var energy = (dataArray[step * i] / 256.0) * 50;
        for (var j = 0; j < energy; j++) {
            ctx.beginPath();
            ctx.moveTo(20 * i + 2, 200 + 4 * j);
            ctx.lineTo(20 * (i + 1) - 2, 200 + 4 * j);
            ctx.stroke();
            ctx.beginPath();
            ctx.moveTo(20 * i + 2, 200 - 4 * j);
            ctx.lineTo(20 * (i + 1) - 2, 200 - 4 * j);
            ctx.stroke();
        }
        ctx.beginPath();
        ctx.moveTo(20 * i + 2, 200);
        ctx.lineTo(20 * (i + 1) - 2, 200);
        ctx.stroke();
    }

    window.requestAnimationFrame(render);
}

window.onload = function () {
    audioContext = new AudioContext();
    analyser = audioContext.createAnalyser();
    analyser.fftSize = 256;

    var fileChooser = document.getElementById('fileChooser');
    fileChooser.onchange = function () {
        if (fileChooser.files[0]) {
            file = fileChooser.files[0];
            showTip(true);
            loadFile();
        }
    }

    canvas = document.getElementById('visualizer');
}

<html>

<head>
	<title>HTML5 Audio Visualizing</title>
	<style type="text/css">
		body {
			background-color: #222222
		}

		input {
			color: #ffffff
		}

		#wrapper {
			display: table;
			width: 100%;
			height: 100%;
		}

		#wrapper-inner {
			display: table-cell;
			vertical-align: middle;
			padding-left: 25%;
			padding-right: 25%;
		}

		#tip {
			color: #fff;
			opacity: 0;
			transition: opacity 1s;
			-moz-transition: opacity 1s;
			-webkit-transition: opacity 1s;
			-o-transition: opacity 1s;
		}

		#tip.show {
			opacity: 1
		}
	</style>
	<script type="text/javascript" src="./index.js">

	</script>
</head>

<body>
	<div id="wrapper">
		<div id="wrapper-inner">
			<p id="tip">Decoding...</p>
			<input id="fileChooser" type="file" />
                <br>
                <canvas id="visualizer" width="800" height="400">Your browser does not support Canvas tag.</canvas>
            </div>
        </div>
    </body>
</html>