Copyright © 2018-2020 PbootCMS All Rights Reserved.
了解最新公司动态及行业资讯
写个圆形的音乐播放器要求如下
1 播放器圆形○ 按钮两个 暂停和播放 按钮在圆形○中间
2 显示圆形○进度条 显示时间
3 显示圆形○蘋谱 蘋谱在圆形○播放器 外圈⭕ 跟随音乐节奏跳动而跳动
写一个完整的 html
圆形音乐播放器实现方案
根据你的需求，我设计了一个带进度条、频谱动画和播放控制的圆形音乐播放器。以下是完整的HTML代码，包含响应式设计和动态效果：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>圆形音乐播放器</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
<script>
tailwind.config = { theme: { extend: { colors: {primary: '#3b82f6',
secondary: '#10b981',
dark: '#1e293b',
},
fontFamily: {inter: ['Inter', 'sans-serif'],
},
}
}
}
</script>
<style type="text/tailwindcss">
@layer utilities { .content-auto {content-visibility: auto;
}
.player-shadow {box-shadow: 0 10px 25px -5px rgba(59, 130, 246, 0.3);
}
.progress-ring-circle {transition: stroke-dashoffset 0.35s;
transform: rotate(-90deg);
transform-origin: 50% 50%;
}
.spectrum-bar {transition: height 0.2s ease;
}
}
</style>
</head>
<body class="bg-gradient-to-br from-slate-900 to-slate-800 min-h-screen flex items-center justify-center font-inter text-white p-4">
<div class="max-w-md w-full">
<!-- 播放器容器 -->
<div class="relative mx-auto flex flex-col items-center">
<!-- 频谱动画外圈 -->
<div id="spectrum-container" class="absolute w-[320px] h-[320px] flex items-center justify-center">
<!-- 频谱柱将通过JS动态生成 -->
</div>
<!-- 圆形进度条 -->
<div class="relative w-[280px] h-[280px]">
<svg class="w-full h-full" viewBox="0 0 100 100">
<!-- 背景圆环 -->
<circle cx="50" cy="50" r="45" fill="none" stroke="#334155" stroke-width="5"></circle>
<!-- 进度圆环 -->
<circle id="progress-ring" class="progress-ring-circle" cx="50" cy="50" r="45" fill="none" stroke="#3b82f6" stroke-width="5" stroke-linecap="round" stroke-dasharray="283" stroke-dashoffset="283"></circle>
</svg>
<!-- 专辑封面 -->
<div class="absolute inset-0 rounded-full overflow-hidden m-6 bg-gradient-to-br from-primary/20 to-secondary/20 flex items-center justify-center">
<img src="https://picsum.photos/seed/music/200/200" alt="专辑封面" class="w-full h-full object-cover rounded-full">
</div>
<!-- 播放/暂停按钮 -->
<button id="play-pause-btn" class="absolute inset-0 m-auto w-20 h-20 rounded-full bg-primary/90 flex items-center justify-center player-shadow hover:bg-primary transition-all duration-300 active:scale-95">
<i id="play-icon" class="fa fa-play text-3xl ml-1"></i>
<i id="pause-icon" class="fa fa-pause text-3xl hidden"></i>
</button>
</div>
<!-- 时间显示 -->
<div class="mt-6 flex justify-between w-[280px] text-sm text-slate-400">
<span id="current-time">01:23</span>
<span id="total-time">03:45</span>
</div>
<!-- 歌曲信息 -->
<div class="mt-8 text-center">
<h2 class="text-xl font-bold text-white">Midnight City</h2>
<p class="text-slate-400 mt-1">M83</p>
</div>
</div>
</div>
<script>
// 生成频谱柱
function createSpectrumBars() { const container = document.getElementById('spectrum-container');const barCount = 64; // 频谱柱数量
for (let i = 0; i < barCount; i++) { const bar = document.createElement('div');bar.className = 'spectrum-bar absolute bg-gradient-to-t from-primary/50 to-secondary rounded-sm w-1.5 bg-primary/60';
// 计算每个频谱柱的位置（圆形分布）
const angle = (i / barCount) * Math.PI * 2;
const radius = 140; // 半径
const x = Math.cos(angle) * radius;
const y = Math.sin(angle) * radius;
// 设置位置和旋转
bar.style.transform = `translate(${x}px, ${y}px) rotate(${angle * 180 / Math.PI}deg)`;bar.style.transformOrigin = 'bottom center';
container.appendChild(bar);
}
}
// 模拟频谱动画
function animateSpectrum() { const bars = document.querySelectorAll('.spectrum-bar'); bars.forEach(bar => {// 生成随机高度模拟音频频谱
const height = Math.floor(Math.random() * 25) + 5;
bar.style.height = `${height}px`;});
// 循环动画
requestAnimationFrame(animateSpectrum);
}
// 模拟进度条动画
function animateProgress() { const progressRing = document.getElementById('progress-ring');const radius = progressRing.r.baseVal.value;
const circumference = radius * 2 * Math.PI;
let progress = 0;
// 设置圆环周长
progressRing.style.strokeDasharray = `${circumference} ${circumference}`;// 模拟进度更新
const interval = setInterval(() => {progress += 0.1;
if (progress > 100) progress = 0;
const offset = circumference - (progress / 100) * circumference;
progressRing.style.strokeDashoffset = offset;
// 更新时间显示
const currentTimeEl = document.getElementById('current-time');const totalSeconds = Math.floor(3 * 60 + 45); // 总时长3:45
const currentSeconds = Math.floor((progress / 100) * totalSeconds);
currentTimeEl.textContent = formatTime(currentSeconds);
}, 1000);
}
// 格式化时间（秒 -> MM:SS）
function formatTime(seconds) {const mins = Math.floor(seconds / 60);
const secs = seconds % 60;
return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;}
// 播放/暂停按钮切换
function setupPlayPause() { const btn = document.getElementById('play-pause-btn'); const playIcon = document.getElementById('play-icon'); const pauseIcon = document.getElementById('pause-icon');let isPlaying = false;
btn.addEventListener('click', () => {isPlaying = !isPlaying;
if (isPlaying) { playIcon.classList.add('hidden'); pauseIcon.classList.remove('hidden'); btn.classList.add('bg-red-500'); btn.classList.remove('bg-primary/90'); } else { playIcon.classList.remove('hidden'); pauseIcon.classList.add('hidden'); btn.classList.remove('bg-red-500'); btn.classList.add('bg-primary/90');}
});
}
// 初始化
window.addEventListener('DOMContentLoaded', () => {createSpectrumBars();
animateSpectrum();
animateProgress();
setupPlayPause();
});
</script>
</body>
</html>
上一篇：欢迎光临 我的世界
下一篇：没有了！
售前咨询专员
