你可以把shout.mp3 换成你喜欢的音乐
注意：现在好像是chorme为了安全，不能直接打开，需要通过服务器（使用localhost打开）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body onload="init()">
<canvas id="canvasOne" width="840px"></canvas>
<audio src="shout.mp3" autoplay="autoplay" controls="controls" id="Audioa"></audio>
<script>
var canvas;
var audio1;
var ctx;
var Analyser;
function init(){
audio1 = document.getElementById("Audioa");
canvas = document.getElementById("canvasOne");
ctx = canvas.getContext("2d");
audioctx= new(window.AudioContext|| window.webkitAudioContext);
Analyser =audioctx.createAnalyser();
source=audioctx.createMediaElementSource(audio1);
source.connect(Analyser);
Analyser.connect(audioctx.destination);
draw();
}
function draw(){
var width = canvas.width;
var height = canvas.height;
var array1 = new Uint8Array(128);
Analyser.getByteFrequencyData(array1);
grd=ctx.createLinearGradient(0,0,0,300);
grd.addColorStop(0,"red");
grd.addColorStop(1,"yellow");
ctx.clearRect(0,0,width,height);
for(var i = 1; i<array1.length;i++)
{
ctx.fillStyle=grd;
ctx.fillRect(i * 5,height-array1[i]+100,3,height+300);
}
requestAnimationFrame(draw);
}
</script>
</body>
</html>
