🎵 音乐播放器设计与实现
设计思路
我将创建一个响应式音乐播放器，核心功能包括：左右对称旋转的专辑图片、同步的音乐控制、实时进度条显示和歌词滚动效果。旋转效果将通过CSS动画实现，音乐控制则使用HTML5 Audio API，歌词同步通过JavaScript处理
完整代码实现
<!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;
}
body {
font-family: 'Arial', sans-serif;
background: linear-gradient(135deg, #1a2a6c, #b21f1f, #fdbb2d);
color: white;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
padding: 20px;
}
.player-container {
width: 100%;
max-width: 400px;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border-radius: 20px;
padding: 25px;
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
}
.album-art-container {
display: flex;
justify-content: space-between;
margin-bottom: 25px;
}
.album-art {
width: 140px;
height: 140px;
border-radius: 50%;
background-size: cover;
background-position: center;
border: 3px solid rgba(255, 255, 255, 0.2);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}
.album-art-left {
background-image: url('https://picsum.photos/seed/left/300');
}
.album-art-right {
background-image: url('https://picsum.photos/seed/right/300');
}
.rotate-both {
animation: rotate 8s linear infinite;
}
@keyframes rotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.song-info {
text-align: center;
margin-bottom: 20px;
}
.song-title {
font-size: 1.5rem;
margin-bottom: 5px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.song-artist {
color: rgba(255, 255, 255, 0.8);
font-size: 1rem;
}
.progress-container {
width: 100%;
height: 6px;
background: rgba(255, 255, 255, 0.2);
border-radius: 10px;
margin-bottom: 15px;
cursor: pointer;
overflow: hidden;
}
.progress-bar {
height: 100%;
background: linear-gradient(90deg, #ff9966, #ff5e62);
border-radius: 10px;
width: 0%;
transition: width 0.1s linear;
}
.time-display {
display: flex;
justify-content: space-between;
margin-bottom: 20px;
color: rgba(255, 255, 255, 0.8);
font-size: 0.9rem;
}
.controls {
display: flex;
justify-content: center;
align-items: center;
gap: 25px;
margin-bottom: 25px;
}
.btn {
background: none;
border: none;
color: white;
cursor: pointer;
font-size: 1.2rem;
display: flex;
justify-content: center;
align-items: center;
transition: all 0.2s;
}
.btn-play {
width: 60px;
height: 60px;
background: linear-gradient(135deg, #ff9966, #ff5e62);
border-radius: 50%;
font-size: 1.8rem;
}
.btn:hover {
transform: scale(1.1);
}
.btn:active {
transform: scale(0.95);
}
.lyrics-container {
height: 200px;
overflow: hidden;
position: relative;
background: rgba(0, 0, 0, 0.2);
border-radius: 10px;
padding: 15px;
}
.lyrics {
text-align: center;
transition: transform 0.3s ease;
}
.lyric-line {
margin-bottom: 12px;
line-height: 1.5;
font-size: 1rem;
transition: all 0.3s ease;
}
.current-lyric {
color: #ff9966;
font-weight: bold;
transform: scale(1.05);
}
.volume-control {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
margin-top: 15px;
}
.volume-slider {
width: 100px;
accent-color: #ff9966;
}
</style>
</head>
<body>
<div class="player-container">
<div class="album-art-container">
<div class="album-art album-art-left"></div>
<div class="album-art album-art-right"></div>
</div>
<div class="song-info">
<h2 class="song-title">示例音乐名称</h2>
<p class="song-artist">示例歌手</p>
</div>
<div class="progress-container" id="progress-container">
<div class="progress-bar" id="progress-bar"></div>
</div>
<div class="time-display">
<span id="current-time">0:00</span>
<span id="total-time">0:00</span>
</div>
<div class="controls">
<button class="btn" id="prev-btn">⏮</button>
<button class="btn btn-play" id="play-btn">▶</button>
<button class="btn" id="next-btn">⏭</button>
</div>
<div class="volume-control">
<span>🔈</span>
<input type="range" class="volume-slider" id="volume-slider" min="0" max="1" step="0.01" value="0.7">
<span>🔊</span>
</div>
<div class="lyrics-container">
<div class="lyrics" id="lyrics">
<div class="lyric-line">歌词加载中...</div>
</div>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
// 获取DOM元素
const playBtn = document.getElementById('play-btn');
const prevBtn = document.getElementById('prev-btn');
const nextBtn = document.getElementById('next-btn');
const albumArts = document.querySelectorAll('.album-art');
const progressContainer = document.getElementById('progress-container');
const progressBar = document.getElementById('progress-bar');
const currentTimeEl = document.getElementById('current-time');
const totalTimeEl = document.getElementById('total-time');
const volumeSlider = document.getElementById('volume-slider');
const lyricsEl = document.getElementById('lyrics');
// 创建音频对象
const audio = new Audio();
audio.src = 'https://example.com/audio/sample-song.mp3'; // 替换为你的音频URL
audio.volume = 0.7;
// 示例歌词数据（格式：时间(秒) + 歌词）
const lyricsData = [
{ time: 0, text: "欢迎使用音乐播放器" },
{ time: 5, text: "这是一段示例歌词" },
{ time: 10, text: "左右图片正在同步旋转" },
{ time: 15, text: "享受音乐的魅力" },
{ time: 20, text: "播放器设计精美" },
{ time: 25, text: "功能齐全实用" },
{ time: 30, text: "感谢使用本播放器" },
{ time: 35, text: "更多功能等你发现" }
];
// 初始化歌词显示
function initializeLyrics() {
lyricsEl.innerHTML = '';
lyricsData.forEach(item => {
const lyricLine = document.createElement('div');
lyricLine.classList.add('lyric-line');
lyricLine.textContent = item.text;
lyricLine.dataset.time = item.time;
lyricsEl.appendChild(lyricLine);
});
}
// 更新当前歌词高亮
function updateLyrics(currentTime) {
const allLyrics = document.querySelectorAll('.lyric-line');
let activeIndex = -1;
// 找到当前时间对应的歌词
for (let i = lyricsData.length - 1; i >= 0; i--) {
if (currentTime >= lyricsData[i].time) {
activeIndex = i;
break;
}
}
// 更新歌词样式
allLyrics.forEach((line, index) => {
if (index === activeIndex) {
line.classList.add('current-lyric');
} else {
line.classList.remove('current-lyric');
}
});
// 滚动歌词到可视区域
if (activeIndex >= 0 && activeIndex < allLyrics.length) {
const activeLyric = allLyrics[activeIndex];
const container = document.querySelector('.lyrics-container');
const scrollPosition = activeLyric.offsetTop - container.offsetHeight / 2 + activeLyric.offsetHeight / 2;
lyricsEl.style.transform = `translateY(-${scrollPosition}px)`;
}
}
// 播放和暂停功能[6,12](@ref)
function togglePlay() {
if (audio.paused) {
audio.play();
playBtn.textContent = '⏸';
// 为左右图片添加旋转动画
albumArts.forEach(art => art.classList.add('rotate-both'));
} else {
audio.pause();
playBtn.textContent = '▶';
// 移除左右图片的旋转动画
albumArts.forEach(art => art.classList.remove('rotate-both'));
}
}
// 更新进度条[8](@ref)
function updateProgress() {
const { currentTime, duration } = audio;
if (duration) {
const progressPercent = (currentTime / duration) * 100;
progressBar.style.width = `${progressPercent}%`;
// 更新时间显示
currentTimeEl.textContent = formatTime(currentTime);
totalTimeEl.textContent = formatTime(duration);
}
}
// 设置进度条
function setProgress(e) {
const width = this.clientWidth;
const clickX = e.offsetX;
const duration = audio.duration;
audio.currentTime = (clickX / width) * duration;
}
// 时间格式化
function formatTime(seconds) {
const mins = Math.floor(seconds / 60);
const secs = Math.floor(seconds % 60);
return `${mins}:${secs < 10 ? '0' : ''}${secs}`;
}
// 设置音量
function setVolume() {
audio.volume = volumeSlider.value;
}
// 事件监听
playBtn.addEventListener('click', togglePlay);
audio.addEventListener('timeupdate', updateProgress);
audio.addEventListener('timeupdate', () => updateLyrics(audio.currentTime));
audio.addEventListener('ended', () => {
playBtn.textContent = '▶';
albumArts.forEach(art => art.classList.remove('rotate-both'));
});
progressContainer.addEventListener('click', setProgress);
volumeSlider.addEventListener('input', setVolume);
// 上一首和下一首按钮（示例功能）
prevBtn.addEventListener('click', () => {
// 这里可以添加切换到上一首歌曲的逻辑
alert('切换到上一首歌曲');
});
nextBtn.addEventListener('click', () => {
// 这里可以添加切换到下一首歌曲的逻辑
alert('切换到下一首歌曲');
});
// 初始化
initializeLyrics();
});
</script>
</body>
</html>2025-09-20 10:19:50 通过 网页 浏览(100)
共有1条评论！
怎么添加歌曲和歌词呢？？
站长回复：参照这个样式添加 src=歌曲 // 示例歌词数据（格式：时间(秒) + 歌词） const lyricsData = [ { time: 0, text: "欢迎使用音乐播放器" }, { time: 5, text: "这是一段示例歌词" }, { time: 10, text: "左右图片正在同步旋转" }, { time: 15, text: "享受音乐的魅力" }, { time: 20, text: "播放器设计精美" }, { time: 25, text: "功能齐全实用" }, { time: 30, text: "感谢使用本播放器" }, { time: 35, text: "更多功能等你发现" } ];