frost-craft/code-snippets
1
0
Fork 0
Code Releases Activity
Files
main
code-snippets/HTML/audio-visualization/4.html

945 lines
28 KiB
HTML
Raw Permalink Normal View History

chore(HTML): 添加 audio-visualization
2026-06-21 22:40:41 +08:00
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>音频可视化 - Audio Visualizer</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: #000;
overflow: hidden;
font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
color: #fff;
}
canvas {
display: block;
position: fixed;
top: 0;
left: 0;
}
/* 控制面板 */
.controls {
position: fixed;
bottom: 24px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 6px;
align-items: center;
z-index: 100;
padding: 6px 12px;
}
.btn {
padding: 6px 14px;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 13px;
font-weight: 400;
transition: all 0.2s ease;
background: transparent;
color: rgba(255, 255, 255, 0.55);
outline: none;
letter-spacing: 0.5px;
}
.btn:hover {
color: rgba(255, 255, 255, 0.9);
background: rgba(255, 255, 255, 0.08);
}
.btn:active {
color: #fff;
}
.btn.active {
color: #fff;
background: rgba(255, 255, 255, 0.12);
}
.btn.mic-btn.active {
color: #fff;
animation: pulse 1.5s infinite;
}
@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.6; }
}
input[type="file"] {
display: none;
}
/* 标题 */
.title {
position: fixed;
top: 24px;
left: 50%;
transform: translateX(-50%);
font-size: 13px;
font-weight: 400;
letter-spacing: 8px;
text-transform: uppercase;
z-index: 100;
color: rgba(255, 255, 255, 0.3);
user-select: none;
}
/* 音量条 */
.volume-bar {
position: fixed;
right: 20px;
top: 50%;
transform: translateY(-50%);
width: 3px;
height: 120px;
background: rgba(255, 255, 255, 0.08);
border-radius: 2px;
overflow: hidden;
z-index: 100;
}
.volume-fill {
position: absolute;
bottom: 0;
width: 100%;
background: rgba(255, 255, 255, 0.5);
border-radius: 2px;
transition: height 0.1s ease;
}
/* 速度指示器 */
.speed-indicator {
position: fixed;
left: 20px;
top: 50%;
transform: translateY(-50%);
width: 3px;
height: 120px;
background: rgba(255, 255, 255, 0.08);
border-radius: 2px;
overflow: hidden;
z-index: 100;
}
.speed-fill {
position: absolute;
bottom: 0;
width: 100%;
background: rgba(255, 255, 255, 0.6);
border-radius: 2px;
transition: height 0.08s ease;
}
.speed-label {
position: fixed;
left: 20px;
top: calc(50% + 70px);
transform: translateX(-50%);
font-size: 9px;
letter-spacing: 2px;
color: rgba(255, 255, 255, 0.4);
z-index: 100;
writing-mode: vertical-rl;
}
/* 提示文字 */
.hint {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 14px;
opacity: 0.25;
text-align: center;
z-index: 50;
pointer-events: none;
transition: opacity 0.5s ease;
letter-spacing: 3px;
font-weight: 300;
}
.hint.hidden {
opacity: 0;
}
/* 音频信息 */
.track-info {
position: fixed;
top: 55px;
left: 50%;
transform: translateX(-50%);
font-size: 12px;
opacity: 0;
z-index: 100;
text-align: center;
transition: opacity 0.5s ease;
color: rgba(255, 255, 255, 0.4);
}
.track-info.visible {
opacity: 1;
}
/* 播放进度 */
.progress-container {
position: fixed;
bottom: 60px;
left: 50%;
transform: translateX(-50%);
width: 240px;
z-index: 100;
opacity: 0;
transition: opacity 0.3s ease;
}
.progress-container.visible {
opacity: 1;
}
.progress-bar {
width: 100%;
height: 2px;
background: rgba(255, 255, 255, 0.1);
border-radius: 1px;
cursor: pointer;
position: relative;
}
.progress-fill {
height: 100%;
background: rgba(255, 255, 255, 0.5);
border-radius: 1px;
width: 0%;
transition: width 0.1s linear;
}
.time-display {
display: flex;
justify-content: space-between;
font-size: 10px;
opacity: 0.3;
margin-top: 4px;
}
/* 分割线 */
.divider {
width: 1px;
height: 14px;
background: rgba(255, 255, 255, 0.12);
margin: 0 4px;
}
/* 曲速闪光 */
.warp-flash {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 90;
opacity: 0;
background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.15) 0%, transparent 70%);
transition: opacity 0.1s ease;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<div class="warp-flash" id="warpFlash"></div>
<div class="title">AUDIO VISUALIZER</div>
<div class="track-info" id="trackInfo"></div>
<div class="hint" id="hint">
请选择音频文件或开启麦克风
</div>
<!-- 速度指示器 -->
<div class="speed-indicator">
<div class="speed-fill" id="speedFill"></div>
</div>
<div class="speed-label">WARP</div>
<div class="volume-bar">
<div class="volume-fill" id="volumeFill"></div>
</div>
<div class="progress-container" id="progressContainer">
<div class="progress-bar" id="progressBar">
<div class="progress-fill" id="progressFill"></div>
</div>
<div class="time-display">
<span id="currentTime">0:00</span>
<span id="totalTime">0:00</span>
</div>
</div>
<div class="controls">
<input type="file" id="fileInput" accept="audio/*">
<button class="btn" id="uploadBtn">打开文件</button>
<button class="btn mic-btn" id="micBtn">麦克风</button>
<div class="divider"></div>
<button class="btn" id="playBtn" style="display:none;">播放</button>
<div class="divider"></div>
<button class="btn" id="fullscreenBtn">全屏</button>
</div>
<script>
// ==================== 初始化 ====================
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
let width, height;
let cx, cy; // 中心点（消失点）
function resize() {
width = canvas.width = window.innerWidth;
height = canvas.height = window.innerHeight;
cx = width / 2;
cy = height / 2;
initStars();
initNebula();
}
window.addEventListener('resize', resize);
// ==================== 音频相关 ====================
let audioContext;
let analyser;
let source;
let audio = new Audio();
let dataArray;
let bufferLength;
let isPlaying = false;
let isMicActive = false;
let micStream;
let animationId;
// 初始化音频上下文
function initAudio() {
if (audioContext) return;
audioContext = new (window.AudioContext || window.webkitAudioContext)();
analyser = audioContext.createAnalyser();
analyser.fftSize = 256;
analyser.smoothingTimeConstant = 0.82;
bufferLength = analyser.frequencyBinCount;
dataArray = new Uint8Array(bufferLength);
}
// 播放音频文件
function playFile(file) {
initAudio();
if (audioContext.state === 'suspended') {
audioContext.resume();
}
stopMic();
const url = URL.createObjectURL(file);
audio.src = url;
if (source) {
source.disconnect();
}
source = audioContext.createMediaElementSource(audio);
source.connect(analyser);
analyser.connect(audioContext.destination);
audio.play();
isPlaying = true;
document.getElementById('playBtn').style.display = 'inline-block';
document.getElementById('playBtn').textContent = '暂停';
document.getElementById('hint').classList.add('hidden');
document.getElementById('progressContainer').classList.add('visible');
document.getElementById('trackInfo').classList.add('visible');
document.getElementById('trackInfo').textContent = file.name.replace(/\.[^/.]+$/, '');
audio.addEventListener('loadedmetadata', () => {
document.getElementById('totalTime').textContent = formatTime(audio.duration);
});
}
// 使用麦克风
async function toggleMic() {
if (isMicActive) {
stopMic();
return;
}
initAudio();
if (audioContext.state === 'suspended') {
audioContext.resume();
}
try {
micStream = await navigator.mediaDevices.getUserMedia({ audio: true });
audio.pause();
isPlaying = false;
if (source) source.disconnect();
source = audioContext.createMediaStreamSource(micStream);
source.connect(analyser);
isMicActive = true;
document.getElementById('micBtn').classList.add('active');
document.getElementById('hint').classList.add('hidden');
document.getElementById('playBtn').style.display = 'none';
document.getElementById('progressContainer').classList.remove('visible');
document.getElementById('trackInfo').classList.add('visible');
document.getElementById('trackInfo').textContent = '麦克风输入';
} catch (err) {
alert('无法访问麦克风，请检查权限设置。');
console.error(err);
}
}
function stopMic() {
if (micStream) {
micStream.getTracks().forEach(track => track.stop());
micStream = null;
}
isMicActive = false;
document.getElementById('micBtn').classList.remove('active');
}
// 格式化时间
function formatTime(seconds) {
if (isNaN(seconds)) return '0:00';
const mins = Math.floor(seconds / 60);
const secs = Math.floor(seconds % 60);
return `${mins}:${secs.toString().padStart(2, '0')}`;
}
// ==================== 频率分析 ====================
function getFrequencyData() {
if (!analyser) return { bass: 0, mid: 0, treble: 0, avg: 0 };
analyser.getByteFrequencyData(dataArray);
const bassEnd = Math.floor(bufferLength * 0.08);
const midEnd = Math.floor(bufferLength * 0.35);
let bassSum = 0, midSum = 0, trebleSum = 0, totalSum = 0;
for (let i = 0; i < bufferLength; i++) {
totalSum += dataArray[i];
if (i < bassEnd) bassSum += dataArray[i];
else if (i < midEnd) midSum += dataArray[i];
else trebleSum += dataArray[i];
}
return {
bass: bassSum / bassEnd / 255,
mid: midSum / (midEnd - bassEnd) / 255,
treble: trebleSum / (bufferLength - midEnd) / 255,
avg: totalSum / bufferLength / 255
};
}
// ==================== 节拍检测 ====================
let beatHistory = [];
let beatCooldown = 0;
let warpBurst = 0; // 曲速爆发强度（0~1 衰减）
function detectBeat(bass) {
beatHistory.push(bass);
if (beatHistory.length > 40) beatHistory.shift();
const avg = beatHistory.reduce((a, b) => a + b, 0) / beatHistory.length;
const variance = beatHistory.reduce((a, b) => a + (b - avg) ** 2, 0) / beatHistory.length;
const threshold = avg + Math.sqrt(variance) * 1.3;
if (beatCooldown > 0) {
beatCooldown--;
return false;
}
if (bass > threshold && bass > 0.3) {
beatCooldown = 5;
return true;
}
return false;
}
// ==================== 星云背景 ====================
let nebulaCanvas, nebulaCtx;
function initNebula() {
nebulaCanvas = document.createElement('canvas');
nebulaCanvas.width = width;
nebulaCanvas.height = height;
nebulaCtx = nebulaCanvas.getContext('2d');
drawNebula();
}
function drawNebula() {
const nc = nebulaCtx;
nc.clearRect(0, 0, width, height);
// 深空底色
const bgGrad = nc.createRadialGradient(cx, cy, 0, cx, cy, Math.max(width, height) * 0.7);
bgGrad.addColorStop(0, 'rgba(10, 10, 15, 1)');
bgGrad.addColorStop(0.5, 'rgba(5, 5, 8, 1)');
bgGrad.addColorStop(1, 'rgba(2, 2, 4, 1)');
nc.fillStyle = bgGrad;
nc.fillRect(0, 0, width, height);
// 多层星云（灰白色调）
const nebulaColors = [
{ x: cx * 0.3, y: cy * 0.4, r: Math.max(width, height) * 0.4, color: 'rgba(100, 100, 120, 0.08)' },
{ x: cx * 1.6, y: cy * 0.6, r: Math.max(width, height) * 0.35, color: 'rgba(80, 90, 110, 0.07)' },
{ x: cx * 0.7, y: cy * 1.5, r: Math.max(width, height) * 0.3, color: 'rgba(120, 120, 140, 0.06)' },
{ x: cx * 1.3, y: cy * 1.3, r: Math.max(width, height) * 0.25, color: 'rgba(90, 100, 120, 0.05)' },
{ x: cx * 0.5, y: cy * 1.0, r: Math.max(width, height) * 0.2, color: 'rgba(140, 140, 160, 0.04)' },
];
for (const n of nebulaColors) {
const grad = nc.createRadialGradient(n.x, n.y, 0, n.x, n.y, n.r);
grad.addColorStop(0, n.color);
grad.addColorStop(1, 'rgba(0,0,0,0)');
nc.fillStyle = grad;
nc.fillRect(0, 0, width, height);
}
}
// ==================== 星星系统（3D 星际飞行） ====================
const STAR_COUNT = 600;
const MAX_DEPTH = 1000;
let stars = [];
function initStars() {
stars = [];
for (let i = 0; i < STAR_COUNT; i++) {
stars.push(createStar(true));
}
}
function createStar(randomDepth = false) {
// 星星在3D空间中的位置，以屏幕中心为原点
const angle = Math.random() * Math.PI * 2;
// 初始分布：一部分从边缘开始，一部分随机分布
const spread = randomDepth ? Math.random() : 1;
const radius = (0.2 + spread * 0.8) * Math.max(width, height) * 0.8;
return {
x: Math.cos(angle) * radius,
y: Math.sin(angle) * radius,
z: randomDepth ? Math.random() * MAX_DEPTH : MAX_DEPTH, // z=MAX_DEPTH 最远，z=0 最近
pz: 0, // 上一帧的 z 值，用于绘制拖尾
size: Math.random() * 0.8 + 0.3,
hue: 200 + Math.random() * 40, // 冷白色调
saturation: 5 + Math.random() * 15, // 低饱和度，接近白色
twinkle: Math.random() * Math.PI * 2
};
}
function updateAndDrawStars(speed, bass, mid, treble, isBeat) {
const baseSpeed = 2;
const audioSpeed = speed * (3 + bass * 12 + mid * 5);
const currentSpeed = baseSpeed + audioSpeed + warpBurst * 25;
for (let i = 0; i < stars.length; i++) {
const s = stars[i];
s.pz = s.z;
// 星星飞向观察者（z 值减小）
s.z -= currentSpeed;
s.twinkle += 0.03;
// 当星星飞出屏幕（z <= 0），重新放到远处
if (s.z <= 0) {
stars[i] = createStar(false);
stars[i].pz = stars[i].z;
continue;
}
// 3D 到 2D 投影
const k = 200; // 焦距
const sx = (s.x / s.z) * k + cx;
const sy = (s.y / s.z) * k + cy;
const psx = (s.x / s.pz) * k + cx;
const psy = (s.y / s.pz) * k + cy;
// 星星大小和亮度随距离变化（越近越亮越大）
const depthRatio = 1 - s.z / MAX_DEPTH; // 0=最远, 1=最近
const size = s.size * (0.5 + depthRatio * 3) * (1 + treble * 0.5);
const brightness = Math.min(1, 0.3 + depthRatio * 1.2);
const twinkleFactor = 0.8 + Math.sin(s.twinkle) * 0.2 * (treble + 0.3);
// 颜色根据音频偏移
const hueShift = mid * 30; // 中频使色调偏移
const hue = s.hue + hueShift;
const lightness = 50 + brightness * 40 + bass * 10;
// 绘制拖尾线（从上次位置到当前位置）
const trailLength = Math.sqrt((sx - psx) ** 2 + (sy - psy) ** 2);
if (trailLength > 1 && s.z < MAX_DEPTH * 0.9) {
const trailAlpha = brightness * twinkleFactor * (0.4 + depthRatio * 0.6);
const trailWidth = size * 0.5 + depthRatio * 1.5;
ctx.save();
// 拖尾渐变
const trailGrad = ctx.createLinearGradient(psx, psy, sx, sy);
trailGrad.addColorStop(0, `hsla(${hue}, ${s.saturation}%, ${lightness - 20}%, 0)`);
trailGrad.addColorStop(0.3, `hsla(${hue}, ${s.saturation}%, ${lightness - 10}%, ${trailAlpha * 0.3})`);
trailGrad.addColorStop(1, `hsla(${hue}, ${s.saturation}%, ${lightness}%, ${trailAlpha})`);
ctx.strokeStyle = trailGrad;
ctx.lineWidth = trailWidth;
ctx.lineCap = 'round';
ctx.shadowBlur = 8 + depthRatio * 12;
ctx.shadowColor = `rgba(255, 255, 255, ${trailAlpha * 0.5})`;
ctx.beginPath();
ctx.moveTo(psx, psy);
ctx.lineTo(sx, sy);
ctx.stroke();
ctx.restore();
}
// 绘制星星光点
if (sx > -50 && sx < width + 50 && sy > -50 && sy < height + 50) {
ctx.save();
const alpha = brightness * twinkleFactor;
const coreSize = size * (0.5 + depthRatio);
// 外层光晕
if (depthRatio > 0.3) {
const glowGrad = ctx.createRadialGradient(sx, sy, 0, sx, sy, coreSize * 6);
glowGrad.addColorStop(0, `hsla(${hue}, ${s.saturation}%, ${lightness + 10}%, ${alpha * 0.3})`);
glowGrad.addColorStop(0.5, `hsla(${hue}, ${s.saturation}%, ${lightness}%, ${alpha * 0.1})`);
glowGrad.addColorStop(1, 'rgba(0,0,0,0)');
ctx.fillStyle = glowGrad;
ctx.beginPath();
ctx.arc(sx, sy, coreSize * 6, 0, Math.PI * 2);
ctx.fill();
}
// 核心亮点
ctx.fillStyle = `hsla(${hue}, ${Math.min(30, s.saturation + 10)}%, ${Math.min(95, lightness + 20)}%, ${alpha})`;
ctx.shadowBlur = 6 + depthRatio * 15;
ctx.shadowColor = `rgba(255, 255, 255, ${alpha * 0.8})`;
ctx.beginPath();
ctx.arc(sx, sy, coreSize, 0, Math.PI * 2);
ctx.fill();
ctx.restore();
}
}
}
// ==================== 速度线（曲速效果） ====================
let warpLines = [];
function spawnWarpLines(count, intensity) {
for (let i = 0; i < count; i++) {
const angle = Math.random() * Math.PI * 2;
const minR = Math.max(width, height) * 0.1;
const maxR = Math.max(width, height) * 0.6;
const r = minR + Math.random() * (maxR - minR);
warpLines.push({
angle: angle,
r: r,
length: 20 + Math.random() * 60 * intensity,
life: 1,
decay: 0.02 + Math.random() * 0.03,
width: 0.5 + Math.random() * 1.5,
hue: 200 + Math.random() * 20,
speed: 1 + Math.random() * 2
});
}
}
function updateAndDrawWarpLines(bass, treble) {
for (let i = warpLines.length - 1; i >= 0; i--) {
const w = warpLines[i];
w.r += w.length * w.speed * (1 + bass * 3);
w.life -= w.decay;
if (w.life <= 0 || w.r > Math.max(width, height) * 0.9) {
warpLines.splice(i, 1);
continue;
}
const x1 = cx + Math.cos(w.angle) * w.r;
const y1 = cy + Math.sin(w.angle) * w.r;
const x2 = cx + Math.cos(w.angle) * (w.r - w.length);
const y2 = cy + Math.sin(w.angle) * (w.r - w.length);
ctx.save();
const alpha = w.life * (0.3 + treble * 0.4);
const grad = ctx.createLinearGradient(x2, y2, x1, y1);
grad.addColorStop(0, 'rgba(200, 210, 230, 0)');
grad.addColorStop(0.5, `rgba(220, 230, 245, ${alpha * 0.5})`);
grad.addColorStop(1, `rgba(255, 255, 255, ${alpha})`);
ctx.strokeStyle = grad;
ctx.lineWidth = w.width * w.life;
ctx.lineCap = 'round';
ctx.shadowBlur = 10;
ctx.shadowColor = `rgba(255, 255, 255, ${alpha * 0.5})`;
ctx.beginPath();
ctx.moveTo(x2, y2);
ctx.lineTo(x1, y1);
ctx.stroke();
ctx.restore();
}
}
// ==================== 中心辉光（消失点） ====================
function drawCenterGlow(bass, mid, treble, isBeat) {
const baseRadius = 30;
const beatRadius = isBeat ? 50 + bass * 80 : 0;
const audioRadius = baseRadius + bass * 40 + mid * 20;
const totalRadius = audioRadius + beatRadius;
const intensity = 0.15 + bass * 0.25 + mid * 0.1 + treble * 0.05;
// 外层大光晕
const outerGlow = ctx.createRadialGradient(cx, cy, 0, cx, cy, totalRadius * 3);
outerGlow.addColorStop(0, `rgba(200, 210, 230, ${intensity * 0.15})`);
outerGlow.addColorStop(0.3, `rgba(150, 160, 180, ${intensity * 0.08})`);
outerGlow.addColorStop(1, 'rgba(0,0,0,0)');
ctx.fillStyle = outerGlow;
ctx.beginPath();
ctx.arc(cx, cy, totalRadius * 3, 0, Math.PI * 2);
ctx.fill();
// 内层亮光核心
const innerGlow = ctx.createRadialGradient(cx, cy, 0, cx, cy, totalRadius);
innerGlow.addColorStop(0, `rgba(255, 255, 255, ${intensity * 0.8})`);
innerGlow.addColorStop(0.2, `rgba(230, 235, 245, ${intensity * 0.4})`);
innerGlow.addColorStop(0.5, `rgba(180, 190, 210, ${intensity * 0.15})`);
innerGlow.addColorStop(1, 'rgba(0,0,0,0)');
ctx.fillStyle = innerGlow;
ctx.beginPath();
ctx.arc(cx, cy, totalRadius, 0, Math.PI * 2);
ctx.fill();
// 核心白热点
if (bass > 0.2 || isBeat) {
const whiteRadius = 3 + bass * 8 + (isBeat ? 15 : 0);
const whiteGrad = ctx.createRadialGradient(cx, cy, 0, cx, cy, whiteRadius);
whiteGrad.addColorStop(0, `rgba(255, 255, 255, ${0.6 + bass * 0.4})`);
whiteGrad.addColorStop(0.5, `rgba(240, 245, 255, ${0.3 + bass * 0.3})`);
whiteGrad.addColorStop(1, 'rgba(0,0,0,0)');
ctx.fillStyle = whiteGrad;
ctx.beginPath();
ctx.arc(cx, cy, whiteRadius, 0, Math.PI * 2);
ctx.fill();
}
}
// ==================== 粒子爆发（曲速跳跃特效） ====================
let particles = [];
function spawnParticles(intensity) {
const count = Math.floor(20 + intensity * 40);
for (let i = 0; i < count; i++) {
const angle = Math.random() * Math.PI * 2;
const speed = 2 + Math.random() * 8 * intensity;
const dist = 5 + Math.random() * 30;
particles.push({
x: cx + Math.cos(angle) * dist,
y: cy + Math.sin(angle) * dist,
vx: Math.cos(angle) * speed,
vy: Math.sin(angle) * speed,
size: Math.random() * 2 + 0.5,
life: 1,
decay: 0.01 + Math.random() * 0.025,
hue: 200 + Math.random() * 20
});
}
}
function updateAndDrawParticles() {
for (let i = particles.length - 1; i >= 0; i--) {
const p = particles[i];
p.x += p.vx;
p.y += p.vy;
p.vx *= 0.97;
p.vy *= 0.97;
p.life -= p.decay;
p.size *= 0.98;
if (p.life <= 0) {
particles.splice(i, 1);
continue;
}
ctx.save();
ctx.globalAlpha = p.life;
ctx.fillStyle = `hsl(${p.hue}, 15%, ${60 + p.life * 35}%)`;
ctx.shadowBlur = 8;
ctx.shadowColor = `rgba(255, 255, 255, ${p.life * 0.5})`;
ctx.beginPath();
ctx.arc(p.x, p.y, p.size, 0, Math.PI * 2);
ctx.fill();
ctx.restore();
}
}
// ==================== 主渲染循环 ====================
let lastTime = 0;
let warpLineTimer = 0;
let speedValue = 0;
function render(time) {
animationId = requestAnimationFrame(render);
const dt = time - lastTime;
lastTime = time;
// 获取音频数据
const { bass, mid, treble, avg } = getFrequencyData();
// 节拍检测
const isBeat = detectBeat(bass);
// 曲速爆发衰减
if (isBeat) {
warpBurst = Math.min(1, warpBurst + 0.5 + bass * 0.5);
}
warpBurst *= 0.94;
// 计算速度值（用于UI显示）
const targetSpeed = Math.min(1, avg * 0.5 + bass * 0.8 + warpBurst * 0.5);
speedValue += (targetSpeed - speedValue) * 0.1;
// 更新UI
document.getElementById('volumeFill').style.height = `${avg * 100}%`;
document.getElementById('speedFill').style.height = `${speedValue * 100}%`;
// 更新播放进度
if (isPlaying && audio.duration) {
const progress = (audio.currentTime / audio.duration) * 100;
document.getElementById('progressFill').style.width = `${progress}%`;
document.getElementById('currentTime').textContent = formatTime(audio.currentTime);
}
// 曲速闪光效果
const warpFlash = document.getElementById('warpFlash');
warpFlash.style.opacity = warpBurst * 0.8;
// 绘制星云背景
ctx.drawImage(nebulaCanvas, 0, 0);
// 半透明覆盖产生轻微拖尾（当速度快时拖尾更明显）
const trailAlpha = 0.15 + speedValue * 0.2;
ctx.fillStyle = `rgba(3, 3, 6, ${trailAlpha})`;
ctx.fillRect(0, 0, width, height);
// 绘制中心辉光
drawCenterGlow(bass, mid, treble, isBeat);
// 绘制星星（3D飞行效果）
updateAndDrawStars(speedValue, bass, mid, treble, isBeat);
// 生成和绘制速度线
warpLineTimer += dt;
const warpLineInterval = Math.max(30, 100 - avg * 80);
if (warpLineTimer > warpLineInterval) {
warpLineTimer = 0;
spawnWarpLines(Math.floor(2 + avg * 4), 0.5 + avg);
}
if (isBeat) {
spawnWarpLines(Math.floor(8 + bass * 15), 1 + bass);
}
updateAndDrawWarpLines(bass, treble);
// 节拍粒子爆发
if (isBeat && bass > 0.3) {
spawnParticles(0.5 + bass);
}
updateAndDrawParticles();
// 边缘暗角效果
drawVignette(speedValue);
}
// ==================== 暗角效果 ====================
function drawVignette(speed) {
const vignetteStrength = 0.4 + speed * 0.3;
const grad = ctx.createRadialGradient(cx, cy, Math.min(width, height) * 0.3, cx, cy, Math.max(width, height) * 0.7);
grad.addColorStop(0, 'rgba(0,0,0,0)');
grad.addColorStop(1, `rgba(0,0,0,${vignetteStrength})`);
ctx.fillStyle = grad;
ctx.fillRect(0, 0, width, height);
}
resize();
requestAnimationFrame(render);
// ==================== 事件绑定 ====================
// 文件上传
document.getElementById('uploadBtn').addEventListener('click', () => {
document.getElementById('fileInput').click();
});
document.getElementById('fileInput').addEventListener('change', (e) => {
const file = e.target.files[0];
if (file) {
playFile(file);
}
});
// 麦克风
document.getElementById('micBtn').addEventListener('click', toggleMic);
// 播放/暂停
document.getElementById('playBtn').addEventListener('click', () => {
if (audio.paused) {
audio.play();
isPlaying = true;
document.getElementById('playBtn').textContent = '暂停';
} else {
audio.pause();
isPlaying = false;
document.getElementById('playBtn').textContent = '播放';
}
});
// 进度条点击
document.getElementById('progressBar').addEventListener('click', (e) => {
if (!audio.duration) return;
const rect = e.currentTarget.getBoundingClientRect();
const percent = (e.clientX - rect.left) / rect.width;
audio.currentTime = percent * audio.duration;
});
// 全屏
const fullscreenBtn = document.getElementById('fullscreenBtn');
fullscreenBtn.addEventListener('click', () => {
if (!document.fullscreenElement) {
document.documentElement.requestFullscreen();
} else {
document.exitFullscreen();
}
});
document.addEventListener('fullscreenchange', () => {
fullscreenBtn.textContent = document.fullscreenElement ? '退出全屏' : '全屏';
});
// 音频结束
audio.addEventListener('ended', () => {
isPlaying = false;
document.getElementById('playBtn').textContent = '播放';
});
</script>
</body>
</html>
Copy Permalink