diff --git a/index.html b/index.html index 3d92fdd..16eb727 100644 --- a/index.html +++ b/index.html @@ -30,7 +30,7 @@
diff --git a/static/audio/wukong.mp3 b/static/audio/wukong.mp3 new file mode 100644 index 0000000..4df376b Binary files /dev/null and b/static/audio/wukong.mp3 differ diff --git a/static/js/wukong-sec.js b/static/js/wukong-sec.js index 2ff1d2e..4f78030 100644 --- 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; + // }); /* ============== 鼠标样式 ============== */