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

995 lines
28 KiB
HTML
Raw 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: #f5576c;
animation: pulse 1.5s infinite;
}
@keyframes pulse {
0%,
100% {
opacity: 1;
}
50% {
opacity: 0.6;
}
}
input[type="file"] {
display: none;
}
/* 模式切换 */
.mode-switch {
display: flex;
gap: 2px;
align-items: center;
}
.mode-label {
font-size: 12px;
opacity: 0.35;
margin-right: 6px;
letter-spacing: 1px;
}
.mode-btn {
padding: 6px 10px;
border: none;
border-radius: 4px;
background: transparent;
color: rgba(255, 255, 255, 0.4);
cursor: pointer;
font-size: 12px;
font-weight: 400;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
letter-spacing: 0.5px;
}
.mode-btn:hover {
color: rgba(255, 255, 255, 0.75);
background: rgba(255, 255, 255, 0.06);
}
.mode-btn.active {
color: #fff;
background: rgba(255, 255, 255, 0.1);
}
/* 标题 */
.title {
position: fixed;
top: 24px;
left: 50%;
transform: translateX(-50%);
font-size: 13px;
font-weight: 400;
letter-spacing: 6px;
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.4);
border-radius: 2px;
transition: height 0.1s ease;
}
/* 提示文字 */
.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;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<div class="title">AUDIO VISUALIZER</div>
<div class="track-info" id="trackInfo"></div>
<div class="hint" id="hint">
请选择音频文件或开启麦克风
</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" id="micBtn">麦克风</button>
<div class="divider"></div>
<button class="btn" id="playBtn" style="display:none;">播放</button>
<div class="divider"></div>
<div class="mode-switch">
<button class="mode-btn active" data-mode="0">频谱</button>
<button class="mode-btn" data-mode="1">波纹</button>
<button class="mode-btn" data-mode="2">粒子</button>
<button class="mode-btn" data-mode="3">组合</button>
</div>
<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, centerX, centerY;
function resize() {
width = canvas.width = window.innerWidth;
height = canvas.height = window.innerHeight;
centerX = width / 2;
centerY = height / 2;
}
resize();
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 currentMode = 0;
let animationId;
// 粒子系统
let particles = [];
let stars = [];
// 初始化星空背景
function initStars() {
stars = [];
const count = 200;
for (let i = 0; i < count; i++) {
stars.push({
x: Math.random() * width,
y: Math.random() * height,
radius: Math.random() * 1.5 + 0.5,
opacity: Math.random() * 0.8 + 0.2,
speed: Math.random() * 0.5 + 0.1,
twinkleSpeed: Math.random() * 0.02 + 0.01
});
}
}
initStars();
// 初始化音频上下文
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')}`;
}
// ==================== 粒子类 ====================
class Particle {
constructor(x, y, color) {
this.x = x;
this.y = y;
this.color = color;
this.vx = (Math.random() - 0.5) * 5;
this.vy = (Math.random() - 0.5) * 5;
this.life = 1;
this.decay = Math.random() * 0.02 + 0.012;
this.size = Math.random() * 3 + 1.5;
}
update() {
this.x += this.vx;
this.y += this.vy;
this.vx *= 0.98;
this.vy *= 0.98;
this.life -= this.decay;
this.size *= 0.99;
}
draw() {
ctx.save();
ctx.globalAlpha = this.life;
ctx.fillStyle = this.color;
ctx.shadowBlur = 8;
ctx.shadowColor = this.color;
ctx.beginPath();
ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
ctx.fill();
ctx.restore();
}
}
// ==================== 颜色工具 ====================
function hslToColor(h, s, l, alpha) {
return `hsla(${h}, ${s}%, ${l}%, ${alpha})`;
}
// ==================== 可视化模式 ====================
// 模式0：频谱柱状图（居中对称 + 镜像）
function drawSpectrum() {
chore(HTML): 更新 audio-visualization 部分页面，扩展频谱高频范围
2026-07-05 14:56:46 +08:00
const barCount = bufferLength; // 使用全部频段 bin，保留高频
chore(HTML): 添加 audio-visualization
2026-06-21 22:40:41 +08:00
const barWidth = (width * 0.8) / barCount;
const gap = 2;
const maxBarHeight = height * 0.35;
const startX = width * 0.1;
const baseY = centerY + 50;
let totalVolume = 0;
for (let i = 0; i < barCount; i++) {
const value = dataArray[i];
const percent = value / 255;
totalVolume += percent;
const barHeight = percent * maxBarHeight;
const x = startX + i * barWidth;
const hue = (i / barCount) * 280 + 180; // 蓝到紫到红
const saturation = 80 + percent * 20;
const lightness = 50 + percent * 15;
const color = hslToColor(hue, saturation, lightness, 0.9);
const glowColor = hslToColor(hue, saturation, lightness, 0.3);
// 上半部分
ctx.save();
ctx.fillStyle = color;
ctx.shadowBlur = 15;
ctx.shadowColor = glowColor;
const w = barWidth - gap;
ctx.fillRect(x, baseY - barHeight, w, barHeight);
// 镜像（下半部分，稍暗）
ctx.globalAlpha = 0.3;
ctx.fillRect(x, baseY, w, barHeight * 0.5);
ctx.restore();
// 顶部亮块
if (barHeight > 5) {
ctx.save();
ctx.fillStyle = hslToColor(hue, saturation, lightness + 20, 1);
ctx.shadowBlur = 20;
ctx.shadowColor = hslToColor(hue, 90, 70, 1);
ctx.fillRect(x, baseY - barHeight - 3, w, 3);
ctx.restore();
}
}
// 粒子喷发
const avgVolume = totalVolume / barCount;
if (avgVolume > 0.5 && Math.random() < avgVolume * 0.2) {
const randomI = Math.floor(Math.random() * barCount);
const rx = startX + randomI * barWidth;
const rhue = (randomI / barCount) * 280 + 180;
particles.push(new Particle(rx, baseY - (dataArray[randomI] / 255) * maxBarHeight,
hslToColor(rhue, 90, 60, 1)));
}
return totalVolume / barCount;
}
// 模式1：圆形波纹
function drawCircle() {
const radius = Math.min(width, height) * 0.2;
const bars = 180;
const step = (Math.PI * 2) / bars;
let totalVolume = 0;
for (let i = 0; i < bars; i++) {
const dataIndex = Math.floor((i / bars) * (bufferLength / 2));
const value = dataArray[dataIndex];
const percent = value / 255;
totalVolume += percent;
const barLength = percent * radius * 1.2 + 5;
const angle = i * step - Math.PI / 2;
const innerX = centerX + Math.cos(angle) * radius;
const innerY = centerY + Math.sin(angle) * radius;
const outerX = centerX + Math.cos(angle) * (radius + barLength);
const outerY = centerY + Math.sin(angle) * (radius + barLength);
const hue = (i / bars) * 360;
const color = hslToColor(hue, 90, 50 + percent * 20, 0.8);
ctx.save();
ctx.strokeStyle = color;
ctx.lineWidth = 3;
ctx.shadowBlur = 10;
ctx.shadowColor = color;
ctx.lineCap = 'round';
ctx.beginPath();
ctx.moveTo(innerX, innerY);
ctx.lineTo(outerX, outerY);
ctx.stroke();
ctx.restore();
}
// 内圆
const avgVolume = totalVolume / bars;
const innerRadius = radius * 0.7 + avgVolume * 30;
ctx.save();
const gradient = ctx.createRadialGradient(centerX, centerY, 0, centerX, centerY, innerRadius);
gradient.addColorStop(0, 'rgba(102, 126, 234, 0.1)');
gradient.addColorStop(0.5, 'rgba(118, 75, 162, 0.05)');
gradient.addColorStop(1, 'rgba(102, 126, 234, 0.01)');
ctx.fillStyle = gradient;
ctx.beginPath();
ctx.arc(centerX, centerY, innerRadius, 0, Math.PI * 2);
ctx.fill();
// 内圆环
ctx.strokeStyle = `rgba(102, 126, 234, ${0.3 + avgVolume * 0.4})`;
ctx.lineWidth = 2;
ctx.shadowBlur = 20;
ctx.shadowColor = 'rgba(102, 126, 234, 0.8)';
ctx.beginPath();
ctx.arc(centerX, centerY, innerRadius, 0, Math.PI * 2);
ctx.stroke();
ctx.restore();
// 波形环
ctx.save();
ctx.strokeStyle = 'rgba(240, 147, 251, 0.4)';
ctx.lineWidth = 2;
ctx.shadowBlur = 15;
ctx.shadowColor = 'rgba(240, 147, 251, 0.6)';
ctx.beginPath();
for (let i = 0; i <= bufferLength; i++) {
const angle = (i / bufferLength) * Math.PI * 2 - Math.PI / 2;
const waveR = innerRadius * 0.85 + (dataArray[i % bufferLength] / 255) * 20;
const wx = centerX + Math.cos(angle) * waveR;
const wy = centerY + Math.sin(angle) * waveR;
if (i === 0) ctx.moveTo(wx, wy);
else ctx.lineTo(wx, wy);
}
ctx.closePath();
ctx.stroke();
ctx.restore();
// 粒子
if (avgVolume > 0.4 && Math.random() < avgVolume * 0.15) {
const angle = Math.random() * Math.PI * 2;
const pr = innerRadius + Math.random() * 20;
const px = centerX + Math.cos(angle) * pr;
const py = centerY + Math.sin(angle) * pr;
const hue = (angle / (Math.PI * 2)) * 360;
particles.push(new Particle(px, py, hslToColor(hue, 90, 60, 1)));
}
return avgVolume;
}
// 模式2：粒子星空
function drawParticles() {
let totalVolume = 0;
let bass = 0, mid = 0, treble = 0;
for (let i = 0; i < bufferLength; i++) {
const v = dataArray[i] / 255;
totalVolume += v;
if (i < bufferLength * 0.15) bass += v;
else if (i < bufferLength * 0.5) mid += v;
else treble += v;
}
const avgVolume = totalVolume / bufferLength;
bass /= bufferLength * 0.15;
mid /= bufferLength * 0.35;
treble /= bufferLength * 0.5;
// 中心光晕
const glowRadius = 100 + bass * 200;
ctx.save();
const glow = ctx.createRadialGradient(centerX, centerY, 0, centerX, centerY, glowRadius);
glow.addColorStop(0, `rgba(245, 87, 108, ${bass * 0.3})`);
glow.addColorStop(0.3, `rgba(240, 147, 251, ${mid * 0.15})`);
glow.addColorStop(1, 'rgba(0, 0, 0, 0)');
ctx.fillStyle = glow;
ctx.fillRect(0, 0, width, height);
ctx.restore();
// 生成新粒子（跟随低音）
const particleCount = Math.floor(bass * 4) + 1;
for (let i = 0; i < particleCount; i++) {
const angle = Math.random() * Math.PI * 2;
const speed = 2 + bass * 6 + Math.random() * 3;
const hue = treble > mid ? 180 + Math.random() * 120 : 260 + Math.random() * 100;
const p = new Particle(centerX, centerY, hslToColor(hue, 90, 60, 1));
p.vx = Math.cos(angle) * speed;
p.vy = Math.sin(angle) * speed;
p.decay = 0.012 + Math.random() * 0.012;
p.size = 2 + bass * 3 + Math.random() * 2;
particles.push(p);
}
// 连接线（中音强时，限制检测数量优化性能）
if (mid > 0.3) {
const maxDist = 80 + mid * 60;
const maxDistSq = maxDist * maxDist;
const lineLimit = Math.min(particles.length, 80);
ctx.save();
for (let i = 0; i < lineLimit; i++) {
// 只与后续少量粒子比较，避免 O(n²) 过大
const checkLimit = Math.min(i + 12, lineLimit);
for (let j = i + 1; j < checkLimit; j++) {
const dx = particles[i].x - particles[j].x;
const dy = particles[i].y - particles[j].y;
const distSq = dx * dx + dy * dy;
if (distSq < maxDistSq) {
const dist = Math.sqrt(distSq);
ctx.strokeStyle = `rgba(102, 126, 234, ${(1 - dist / maxDist) * mid * 0.25})`;
ctx.lineWidth = 0.5;
ctx.beginPath();
ctx.moveTo(particles[i].x, particles[i].y);
ctx.lineTo(particles[j].x, particles[j].y);
ctx.stroke();
}
}
}
ctx.restore();
}
return avgVolume;
}
// 模式3：组合模式（圆形 + 频谱 + 粒子）
function drawCombined() {
// 底部频谱
const barCount = 64;
const barWidth = width / barCount;
const maxHeight = height * 0.2;
let totalVolume = 0;
for (let i = 0; i < barCount; i++) {
const dataIndex = Math.floor((i / barCount) * (bufferLength / 2));
const value = dataArray[dataIndex];
const percent = value / 255;
totalVolume += percent;
const barHeight = percent * maxHeight;
const x = i * barWidth;
const hue = (i / barCount) * 60 + 200;
ctx.save();
const gradient = ctx.createLinearGradient(0, height - barHeight, 0, height);
gradient.addColorStop(0, hslToColor(hue, 90, 60, 0.8));
gradient.addColorStop(1, hslToColor(hue, 90, 30, 0.2));
ctx.fillStyle = gradient;
ctx.shadowBlur = 10;
ctx.shadowColor = hslToColor(hue, 90, 60, 0.5);
ctx.fillRect(x + 1, height - barHeight, barWidth - 2, barHeight);
ctx.restore();
}
// 中心圆形
const radius = Math.min(width, height) * 0.12;
const avgVolume = totalVolume / barCount;
const circleBars = 120;
ctx.save();
for (let i = 0; i < circleBars; i++) {
const dataIndex = Math.floor((i / circleBars) * (bufferLength / 2));
const value = dataArray[dataIndex];
const percent = value / 255;
const barLength = percent * radius * 1.5 + 3;
const angle = (i / circleBars) * Math.PI * 2 - Math.PI / 2 + performance.now() * 0.0003;
const x1 = centerX + Math.cos(angle) * radius;
const y1 = centerY - 30 + Math.sin(angle) * radius;
const x2 = centerX + Math.cos(angle) * (radius + barLength);
const y2 = centerY - 30 + Math.sin(angle) * (radius + barLength);
const hue = (i / circleBars) * 360 + performance.now() * 0.05;
ctx.strokeStyle = hslToColor(hue % 360, 90, 55 + percent * 15, 0.7);
ctx.lineWidth = 2;
ctx.shadowBlur = 8;
ctx.shadowColor = hslToColor(hue % 360, 90, 60, 0.5);
ctx.lineCap = 'round';
ctx.beginPath();
ctx.moveTo(x1, y1);
ctx.lineTo(x2, y2);
ctx.stroke();
}
ctx.restore();
// 中心圆
const coreR = radius * 0.6 + avgVolume * 25;
ctx.save();
const coreGrad = ctx.createRadialGradient(centerX, centerY - 30, 0, centerX, centerY - 30, coreR);
coreGrad.addColorStop(0, `rgba(255, 255, 255, ${0.3 + avgVolume * 0.3})`);
coreGrad.addColorStop(0.3, 'rgba(240, 147, 251, 0.3)');
coreGrad.addColorStop(1, 'rgba(102, 126, 234, 0)');
ctx.fillStyle = coreGrad;
ctx.beginPath();
ctx.arc(centerX, centerY - 30, coreR, 0, Math.PI * 2);
ctx.fill();
ctx.restore();
// 粒子
if (avgVolume > 0.4 && Math.random() < avgVolume * 0.2) {
const angle = Math.random() * Math.PI * 2;
const pr = radius + Math.random() * 30;
const px = centerX + Math.cos(angle) * pr;
const py = centerY - 30 + Math.sin(angle) * pr;
const hue = Math.random() * 360;
particles.push(new Particle(px, py, hslToColor(hue, 90, 65, 1)));
}
return avgVolume;
}
// ==================== 绘制星空背景 ====================
function drawStars(time) {
for (const star of stars) {
const twinkle = Math.sin(time * star.twinkleSpeed + star.x) * 0.3 + 0.7;
ctx.save();
ctx.globalAlpha = star.opacity * twinkle;
ctx.fillStyle = '#fff';
ctx.beginPath();
ctx.arc(star.x, star.y, star.radius, 0, Math.PI * 2);
ctx.fill();
ctx.restore();
// 缓慢移动
star.y += star.speed;
if (star.y > height) {
star.y = 0;
star.x = Math.random() * width;
}
}
}
// ==================== 主渲染循环 ====================
function render(time) {
animationId = requestAnimationFrame(render);
// 清屏（带拖影效果）
ctx.fillStyle = 'rgba(0, 0, 8, 0.15)';
ctx.fillRect(0, 0, width, height);
// 星空
drawStars(time);
// 获取音频数据
let avgVolume = 0;
if (analyser) {
analyser.getByteFrequencyData(dataArray);
} else {
// 无音频时的默认动画
dataArray = new Uint8Array(bufferLength || 128);
for (let i = 0; i < dataArray.length; i++) {
dataArray[i] = Math.sin(time * 0.002 + i * 0.1) * 30 + 30;
}
bufferLength = dataArray.length;
}
// 绘制当前模式
switch (currentMode) {
case 0: avgVolume = drawSpectrum(); break;
case 1: avgVolume = drawCircle(); break;
case 2: avgVolume = drawParticles(); break;
case 3: avgVolume = drawCombined(); break;
}
// 更新和绘制粒子
for (let i = particles.length - 1; i >= 0; i--) {
particles[i].update();
particles[i].draw();
if (particles[i].life <= 0) {
particles.splice(i, 1);
}
}
// 限制粒子数量
if (particles.length > 200) {
particles = particles.slice(-200);
}
// 更新音量条
const fill = document.getElementById('volumeFill');
if (fill) {
fill.style.height = `${Math.min(avgVolume * 100 * 2.5, 100)}%`;
}
// 更新进度条
if (!isMicActive && audio.duration) {
const progress = (audio.currentTime / audio.duration) * 100;
document.getElementById('progressFill').style.width = `${progress}%`;
document.getElementById('currentTime').textContent = formatTime(audio.currentTime);
}
}
// ==================== 事件绑定 ====================
// 文件上传
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 (isPlaying) {
audio.pause();
isPlaying = false;
document.getElementById('playBtn').textContent = '播放';
} else {
audio.play();
isPlaying = true;
document.getElementById('playBtn').textContent = '暂停';
}
});
audio.addEventListener('ended', () => {
isPlaying = false;
document.getElementById('playBtn').textContent = '播放';
});
// 模式切换
document.querySelectorAll('.mode-btn').forEach(btn => {
btn.addEventListener('click', () => {
document.querySelectorAll('.mode-btn').forEach(b => b.classList.remove('active'));
btn.classList.add('active');
currentMode = parseInt(btn.dataset.mode);
particles = []; // 切换模式时清空粒子
});
});
// 进度条点击跳转
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;
});
// 拖拽文件
document.addEventListener('dragover', (e) => {
e.preventDefault();
});
document.addEventListener('drop', (e) => {
e.preventDefault();
const file = e.dataTransfer.files[0];
if (file && file.type.startsWith('audio/')) {
playFile(file);
}
});
// 全屏切换
const fullscreenBtn = document.getElementById('fullscreenBtn');
function toggleFullscreen() {
if (!document.fullscreenElement) {
document.documentElement.requestFullscreen().catch(() => { });
fullscreenBtn.textContent = '退出全屏';
} else {
document.exitFullscreen();
fullscreenBtn.textContent = '全屏';
}
}
fullscreenBtn.addEventListener('click', toggleFullscreen);
document.addEventListener('fullscreenchange', () => {
fullscreenBtn.textContent = document.fullscreenElement ? '退出全屏' : '全屏';
});
// 键盘快捷键
document.addEventListener('keydown', (e) => {
if (e.code === 'Space') {
e.preventDefault();
if (!isMicActive && audio.src) {
document.getElementById('playBtn').click();
}
} else if (e.code === 'KeyF') {
toggleFullscreen();
} else if (e.code >= 'Digit1' && e.code <= 'Digit4') {
const mode = parseInt(e.code.slice(-1)) - 1;
document.querySelectorAll('.mode-btn')[mode]?.click();
}
});
// 启动渲染
render(0);
</script>
</body>
</html>
Copy Permalink