你可以把shout.mp3 換成你喜歡的音樂(lè)
注意：現(xiàn)在好像是chorme為了安全脐供，不能直接打開，需要通過(guò)服務(wù)器（使用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>
