add: bgm

WuKongSecurity · Aug 25, 2024 · 7d55891 · 7d55891
1 parent a512f95
commit 7d55891
Show file tree

Hide file tree

Showing 3 changed files with 61 additions and 61 deletions.
diff --git a/index.html b/index.html
@@ -30,7 +30,7 @@
     </div>
 
     <audio id="audio" autoplay loop>
-        <source src="static/audio/only-in-the-dark.mp3" type="audio/mpeg">
+        <source src="static/audio/wukong.mp3" type="audio/mpeg">
     </audio>
     <canvas id="canvas"></canvas>
     <div class='cursor' id="cursor"></div>

diff --git a/static/audio/wukong.mp3 b/static/audio/wukong.mp3
diff --git a/static/js/wukong-sec.js b/static/js/wukong-sec.js
@@ -21,66 +21,66 @@ document.addEventListener('DOMContentLoaded', function() {
 	document.addEventListener("touchstart", playAudio);
 
 	// 防止重复播放, 添加律动效果
-	audio.addEventListener("playing", () => {
-		isPlaying = true;
-
-		const context = new AudioContext();
-		const src = context.createMediaElementSource(audio);
-		const analyser = context.createAnalyser();
-
-		const canvas = document.getElementById("canvas");
-		canvas.width = window.innerWidth;
-		canvas.height = window.innerHeight;
-		const ctx = canvas.getContext("2d");
-
-		src.connect(analyser);
-		analyser.connect(context.destination);
-
-		analyser.fftSize = 256;
-
-		const bufferLength = analyser.frequencyBinCount;
-		console.log(bufferLength);
-
-		const dataArray = new Uint8Array(bufferLength);
-
-		const WIDTH = canvas.width;
-		const HEIGHT = canvas.height;
-
-		const barWidth = (WIDTH / bufferLength) * 2.5;
-		let barHeight;
-		let x = 0;
-
-		function renderFrame() {
-			requestAnimationFrame(renderFrame);
-
-			x = 0;
-
-			analyser.getByteFrequencyData(dataArray);
-
-			ctx.fillStyle = "#000";
-			ctx.fillRect(0, 0, WIDTH, HEIGHT);
-
-			for (let i = 0; i < bufferLength; i++) {
-				barHeight = dataArray[i];
-
-				const r = barHeight + (25 * (i / bufferLength));
-				const g = 250 * (i / bufferLength);
-				const b = 50;
-
-				ctx.fillStyle = "rgb(" + r + "," + g + "," + b + ")";
-				ctx.fillRect(x, HEIGHT - barHeight, barWidth, barHeight);
-
-				x += barWidth + 1;
-			}
-		}
-
-		// audio.play();
-		renderFrame();
-	});
-
-	audio.addEventListener("pause", () => {
-		isPlaying = false;
-	});
+	// audio.addEventListener("playing", () => {
+	// 	isPlaying = true;
+	//
+	// 	const context = new AudioContext();
+	// 	const src = context.createMediaElementSource(audio);
+	// 	const analyser = context.createAnalyser();
+	//
+	// 	const canvas = document.getElementById("canvas");
+	// 	canvas.width = window.innerWidth;
+	// 	canvas.height = window.innerHeight;
+	// 	const ctx = canvas.getContext("2d");
+	//
+	// 	src.connect(analyser);
+	// 	analyser.connect(context.destination);
+	//
+	// 	analyser.fftSize = 256;
+	//
+	// 	const bufferLength = analyser.frequencyBinCount;
+	// 	console.log(bufferLength);
+	//
+	// 	const dataArray = new Uint8Array(bufferLength);
+	//
+	// 	const WIDTH = canvas.width;
+	// 	const HEIGHT = canvas.height;
+	//
+	// 	const barWidth = (WIDTH / bufferLength) * 2.5;
+	// 	let barHeight;
+	// 	let x = 0;
+	//
+	// 	function renderFrame() {
+	// 		requestAnimationFrame(renderFrame);
+	//
+	// 		x = 0;
+	//
+	// 		analyser.getByteFrequencyData(dataArray);
+	//
+	// 		ctx.fillStyle = "#000";
+	// 		ctx.fillRect(0, 0, WIDTH, HEIGHT);
+	//
+	// 		for (let i = 0; i < bufferLength; i++) {
+	// 			barHeight = dataArray[i];
+	//
+	// 			const r = barHeight + (25 * (i / bufferLength));
+	// 			const g = 250 * (i / bufferLength);
+	// 			const b = 50;
+	//
+	// 			ctx.fillStyle = "rgb(" + r + "," + g + "," + b + ")";
+	// 			ctx.fillRect(x, HEIGHT - barHeight, barWidth, barHeight);
+	//
+	// 			x += barWidth + 1;
+	// 		}
+	// 	}
+	//
+	// 	// audio.play();
+	// 	renderFrame();
+	// });
+	//
+	// audio.addEventListener("pause", () => {
+	// 	isPlaying = false;
+	// });
 
 	/* ============== 鼠标样式 ============== */