💝 文字跟随音乐跳动网页特效
先看看效果
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>残舞 | 网站正在建设中</title>
<style>
*{
margin:0;
padding:0;
box-sizing:border-box;
}
html,body{
height:100%;
}
body{
background: #FDF3D6 url("/img/bg.png") no-repeat center 5%;
background-size: auto;
font-family:"Microsoft Yahei",sans-serif;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
color:#000;
cursor:pointer;
position: relative;
}
/* 左右音频频谱 */
.audio-spectrum {
position: fixed;
top: 60%;
transform: translateY(-50%);
width: 110px;
height: 420px;
z-index: 2;
pointer-events: none;
}
#canvasLeft {
left: 63%;
}
#canvasRight {
right: 63.4%;
}
/* 文字主体 */
.main-text{
text-align:center;
flex:1;
display:flex;
flex-direction:column;
justify-content:center;
margin-top:280px;
position: relative;
z-index:3;
}
.main-text h1{
font-size:63px;
letter-spacing:6px;
text-shadow: 0 0 8px rgba(0,0,0,0.25);
font-weight:bold;
display: inline-block;
}
.main-text p{
margin-top:22px;
font-size:24px;
opacity:0.95;
letter-spacing:2px;
}
/* 底部版权区域 */
.footer{
padding:30px 15px;
text-align:center;
font-size:14px;
position: relative;
z-index:3;
}
.footer a{
color:#000;
text-decoration:none;
}
.footer a:hover{
text-decoration:underline;
}
</style>
</head>
<body>
<canvas class="audio-spectrum" id="canvasLeft" width="200" height="420"></canvas>
<canvas class="audio-spectrum" id="canvasRight" width="200" height="420"></canvas>
<div class="main-text">
<h1 id="title">网站正在建设中</h1>
<p>敬请期待</p>
</div>
<div class="footer">
© 2026 canwu.net 残舞 All Rights Reserved
<br><br>
<a href="https://beian.miit.gov.cn/" target="_blank">渝ICP备2025063804号-9</a>
</div>
<audio id="bgMusic" src="mp3/music.mp3" preload="auto" crossorigin="anonymous">
<script>
const audio = document.getElementById('bgMusic');
const canvasLeft = document.getElementById('canvasLeft');
const canvasRight = document.getElementById('canvasRight');
const ctxL = canvasLeft.getContext('2d');
const ctxR = canvasRight.getContext('2d');
const title = document.getElementById('title');
let audioCtx = null;
let analyser = null;
let dataArray = null;
let source = null;
const barCount = 60;
// 频谱绘制循环
function drawSpectrum() {
requestAnimationFrame(drawSpectrum);
if (!analyser) return;
analyser.getByteFrequencyData(dataArray);
const w = canvasLeft.width;
const h = canvasLeft.height;
const barW = w / barCount;
ctxL.clearRect(0, 0, w, h);
for (let i = 0; i < barCount; i++) {
const val = dataArray[i * 2];
const barH = val / 255 * h;
ctxL.fillStyle = 'rgba(255,115,0,0.72)';
ctxL.fillRect(i * barW, h / 2 - barH / 2, barW - 1, barH);
}
ctxR.clearRect(0, 0, w, h);
for (let i = 0; i < barCount; i++) {
const val = dataArray[i * 2];
const barH = val / 255 * h;
ctxR.fillStyle = 'rgba(255,115,0,0.72)';
ctxR.fillRect(w - i * barW - barW, h / 2 - barH / 2, barW - 1, barH);
}
// 根据音量控制标题缩放跳动
let total = 0;
for(let v of dataArray) total += v;
let average = total / dataArray.length;
// 缩放区间 1 ~ 1.16，如需更大幅度修改0.16即可
let scale = 1 + (average / 255) * 0.16;
title.style.transform = `scale(${scale})`;
}
function initAudioAnalyser() {
if (audioCtx) {
if (audioCtx.state === "suspended") audioCtx.resume();
return;
}
try {
audioCtx = new (window.AudioContext || window.webkitAudioContext)();
analyser = audioCtx.createAnalyser();
analyser.fftSize = 256;
source = audioCtx.createMediaElementSource(audio);
source.connect(analyser);
analyser.connect(audioCtx.destination);
dataArray = new Uint8Array(analyser.frequencyBinCount);
drawSpectrum();
} catch (e) {
console.error("音频初始化失败：", e);
}
}
let isClicking = false;
document.body.addEventListener('click', async () => {
if(isClicking) return;
isClicking = true;
initAudioAnalyser();
if (audioCtx && audioCtx.state === 'suspended') await audioCtx.resume();
if(audio.paused){
await audio.play();
}else{
audio.pause();
//暂停时恢复原始大小
title.style.transform = 'scale(1)';
}
setTimeout(()=>isClicking=false,300);
})
</script>
</body>
</html>演示效果https://5blog.cn/tx/tdong.html
阅读：61
发布时间：