音频动效

<!DOCTYPE html>
<html>
	<head>
		<title>audio</title>
	</head>
	<body>
		<div>芒种</div>
		<audio id="audio" controls muted>
		   <source src="1.mp3" type="audio/mpeg">
		</audio> 
		<!-- <audio id="audio" src="./It's realme.mp3">芒种</audio> -->
		<!-- <audio id="audio" src="./mangzhong.mp3">芒种</audio> -->
		<canvas width="1200" height="700" id="canvas"></canvas>
	</body>
	<script type="text/javascript">
		window.AudioContext = window.AudioContext || window.webkitAudioContext;
		//音频上下文对象
		let audioCtx = new AudioContext();
		//创建音频资源文件
		let source = audioCtx.createMediaElementSource(document.getElementById("audio"));
		//创建音量
		let gainNode = audioCtx.createGain();
		//创建分析器
		let analyser = audioCtx.createAnalyser();
		//设置快速傅里叶频域值
		analyser.fftSize = 128*4;
		//初始化音量
		gainNode.gain.setValueAtTime(1,audioCtx.currentTime);
		//资源连接分析器
		source.connect(analyser);
		//分析器连接音量
		analyser.connect(gainNode);
		//音量连接目的对象
		gainNode.connect(audioCtx.destination);
		document.getElementById("audio").play();
		//gainNode.gain.linearRampToValueAtTime(0,audioCtx.currentTime+12);
		analysis()
		//document.getElementById("audio").suspend();

		function analysis(){
			//实际得到频域数据个数
			let length = analyser.frequencyBinCount
			let audioDataArr = new Uint8Array(length);
			function a(){
				analyser.getByteFrequencyData(audioDataArr);
				draw(audioDataArr);
				requestAnimationFrame(a);
			}
			requestAnimationFrame(a);
		}

					/**
			@type {HTMLCanvasElement}
			**/
			let canvas = document.getElementById("canvas");
			let ctx = canvas.getContext("2d");
			let devicePixelRatio = window.devicePixelRatio || 1;
    		let backingStoreRatio = ctx.webkitBackingStorePixelRatio ||
			ctx.mozBackingStorePixelRatio ||
			ctx.msBackingStorePixelRatio ||
			ctx.oBackingStorePixelRatio ||
			ctx.backingStorePixelRatio || 1;
			let ratio = devicePixelRatio / backingStoreRatio;
			canvas.style.width = canvas.width + 'px';
			canvas.style.height = canvas.height + 'px';
			canvas.width = canvas.width * ratio;
			canvas.height = canvas.height * ratio;
			ctx.scale(ratio, ratio);
    		ctx.translate(0.5, 0.5);

		function draw(arr){
			ctx.clearRect(0,0,canvas.width,canvas.height);
			let w = canvas.width / 128;
			for(let i = 0;i < arr.length;i++){
				ctx.beginPath();
				let graident = ctx.createLinearGradient(w*i,arr[i],canvas.width/ratio,canvas.height/ratio);
				graident.addColorStop(1,"#1E90FF");
				graident.addColorStop(0,"#00FF7F");
				ctx.fillStyle = graident;
				ctx.fillRect(w*i*2/ratio,(canvas.height - arr[i])/ratio,w*0.8/ratio,arr[i]/ratio);
			}
			let r = 100/ratio;
			ctx.beginPath();
			ctx.arc(canvas.width/2/ratio,canvas.height/2/ratio,r,0,2*Math.PI);
			ctx.fillStyle = "#20212d";
			ctx.fill();
			ctx.closePath()

			let offset = 2*Math.PI / 128;
			let x0 = canvas.width/2/ratio;
			let y0 = canvas.height/2/ratio;
			let n = 0;
			for(let i = -Math.PI/2;i < Math.PI/2;i += offset){
				ctx.beginPath();
				let x1 = x0 +r * Math.cos(i);
				let y1 = y0 - r * Math.sin(i);
				ctx.moveTo(x1,y1);
				let x2 = x0 + (arr[n]*0.5 + r) * Math.cos(i);
				let y2 = y0 - (arr[n]*0.5 + r) * Math.sin(i);
				ctx.lineWidth = 3;
				ctx.lineTo(x2,y2);
				//console.log(x2,y2)
				let g = ctx.createLinearGradient(x1,y1,x2,y2);
				g.addColorStop(1,"#0077ff");
				g.addColorStop(0.8,"#00aaff");
				g.addColorStop(0,"#00ffff");
				ctx.strokeStyle = g;
				ctx.stroke();
				n++;
				ctx.closePath();
			}
			let m = 0;
			for(let i = Math.PI*3/2;i > Math.PI/2;i -= offset){
				ctx.beginPath();
				let x1 = x0 +r * Math.cos(i);
				let y1 = y0 - r * Math.sin(i);
				ctx.moveTo(x1,y1);
				let x2 = x0 + (arr[m]*0.5 + r) * Math.cos(i);
				let y2 = y0 - (arr[m]*0.5 + r) * Math.sin(i);
				ctx.lineWidth = 3;
				ctx.lineTo(x2,y2);
				//console.log(x2,y2)
				let g = ctx.createLinearGradient(x1,y1,x2,y2);
				g.addColorStop(1,"#0077ff");
				g.addColorStop(0.8,"#00aaff");
				g.addColorStop(0,"#00ffff");
				ctx.strokeStyle = g;
				ctx.stroke();
				m++;
				ctx.closePath();
			}
			//console.log(arr.length)
		}
	</script>
</html>
猜你喜欢
