HTML5音乐播放器

HTML5音乐播放器的实现

原创已于 2025-06-27 13:30:03 修改 · 1k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#css #css3 #前端

于 2025-06-05 17:31:09 首次发布

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>HTML5音乐播放器</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Arial', sans-serif;
}

body {
background: linear-gradient(135deg, #1e2a78, #ff758c);
color: white;
min-height: 100vh;
padding: 20px;
}

.player-container {
max-width: 500px;
margin: 0 auto;
background-color: rgba(0, 0, 0, 0.5);
border-radius: 20px;
padding: 20px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
backdrop-filter: blur(10px);
}

.header {
text-align: center;
margin-bottom: 20px;
}

.header h1 {
font-size: 24px;
margin-bottom: 5px;
}

.header p {
font-size: 14px;
color: rgba(255, 255, 255, 0.7);
}

.album-art {
width: 200px;
height: 200px;
border-radius: 50%;
margin: 0 auto 20px;
overflow: hidden;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
position: relative;
animation: rotate 20s linear infinite;
animation-play-state: paused;
}

.album-art img {
width: 100%;
height: 100%;
object-fit: cover;
}

.song-info {
text-align: center;
margin-bottom: 20px;
}

.song-info h2 {
font-size: 20px;
margin-bottom: 5px;
}

.song-info p {
font-size: 16px;
color: rgba(255, 255, 255, 0.7);
}

.progress-container {
margin-bottom: 20px;
}

.progress-bar {
height: 4px;
background-color: rgba(255, 255, 255, 0.2);
border-radius: 2px;
margin-bottom: 5px;
cursor: pointer;
}

.progress {
height: 100%;
background-color: #ff758c;
border-radius: 2px;
width: 0%;
transition: width 0.1s linear;
}

.time-info {
display: flex;
justify-content: space-between;
font-size: 12px;
color: rgba(255, 255, 255, 0.7);
}

.controls {
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 20px;
}

.control-btn {
background: none;
border: none;
color: white;
font-size: 24px;
margin: 0 15px;
cursor: pointer;
outline: none;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
transition: all 0.3s;
}

.control-btn:hover {
background-color: rgba(255, 255, 255, 0.1);
}

.play-btn {
background-color: #ff758c;
width: 60px;
height: 60px;
font-size: 30px;
}

.play-btn:hover {
background-color: #ff8a9c;
}

.volume-container {
display: flex;
align-items: center;
margin-bottom: 20px;
}

.volume-icon {
margin-right: 10px;
font-size: 20px;
}

.volume-slider {
flex-grow: 1;
height: 4px;
background-color: rgba(255, 255, 255, 0.2);
border-radius: 2px;
cursor: pointer;
}

.volume-progress {
height: 100%;
background-color: white;
border-radius: 2px;
width: 100%;
}

.playlist {
max-height: 200px;
overflow-y: auto;
margin-top: 20px;
}

.playlist-item {
padding: 10px;
border-radius: 5px;
margin-bottom: 5px;
background-color: rgba(255, 255, 255, 0.1);
cursor: pointer;
transition: all 0.3s;
}

.playlist-item:hover {
background-color: rgba(255, 255, 255, 0.2);
}

.playlist-item.active {
background-color: #ff758c;
}

.playlist-item h4 {
font-size: 16px;
margin-bottom: 3px;
}

.playlist-item p {
font-size: 12px;
color: rgba(255, 255, 255, 0.7);
}

@keyframes rotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}

/* 响应式设计 */
@media (max-width: 480px) {
.album-art {
width: 150px;
height: 150px;
}

.control-btn {
margin: 0 10px;
}
}

.footer {
text-align: center;
margin-top: 30px;
font-size: 12px;
color: rgba(255, 255, 255, 0.5);
}

/* 滚动条样式 */
::-webkit-scrollbar {
width: 5px;
}

::-webkit-scrollbar-track {
background: rgba(255, 255, 255, 0.1);
border-radius: 10px;
}

::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.3);
border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
background: rgba(255, 255, 255, 0.5);
}
</style>
</head>
<body>
<div class="player-container">
<div class="header">
<h1>HTML5音乐播放器</h1>
<p>享受高品质音乐体验</p>
</div>

<div class="album-art">
<img src="https://picsum.photos/400/400" alt="专辑封面" id="album-cover">
</div>

<div class="song-info">
<h2 id="song-title">歌曲名称</h2>
<p id="song-artist">艺术家</p>
</div>

<div class="progress-container">
<div class="progress-bar" id="progress-bar">
<div class="progress" id="progress"></div>
</div>
<div class="time-info">
<span id="current-time">0:00</span>
<span id="duration">0:00</span>
</div>
</div>

<div class="controls">
<button class="control-btn" id="prev-btn">⏮</button>
<button class="control-btn play-btn" id="play-btn">▶</button>
<button class="control-btn" id="next-btn">⏭</button>
</div>

<div class="volume-container">
<span class="volume-icon">🔊</span>
<div class="volume-slider" id="volume-slider">
<div class="volume-progress" id="volume-progress"></div>
</div>
</div>

<div class="playlist" id="playlist">

</div>

<div class="footer">

</div>
</div>

<audio id="audio-player"></audio>

<script>
// 音乐数据
const songs = [
{
title: "晴天",
artist: "周杰伦",
cover: "https://picsum.photos/400/400?random=1",
src: "https://music.163.com/song/media/outer/url?id=386538.mp3"
},
{
title: "夜曲",
artist: "周杰伦",
cover: "https://picsum.photos/400/400?random=2",
src: "https://music.163.com/song/media/outer/url?id=386711.mp3"
},
{
title: "七里香",
artist: "周杰伦",
cover: "https://picsum.photos/400/400?random=3",
src: "https://music.163.com/song/media/outer/url?id=386538.mp3"
},
{
title: "稻香",
artist: "周杰伦",
cover: "https://picsum.photos/400/400?random=4",
src: "https://music.163.com/song/media/outer/url?id=277302.mp3"
},
{
title: "简单爱",
artist: "周杰伦",
cover: "https://picsum.photos/400/400?random=5",
src: "https://music.163.com/song/media/outer/url?id=386538.mp3"
}
];

// 获取DOM元素
const audioPlayer = document.getElementById('audio-player');
const albumCover = document.getElementById('album-cover');
const songTitle = document.getElementById('song-title');
const songArtist = document.getElementById('song-artist');
const progressBar = document.getElementById('progress-bar');
const progress = document.getElementById('progress');
const currentTimeEl = document.getElementById('current-time');
const durationEl = document.getElementById('duration');
const playBtn = document.getElementById('play-btn');
const prevBtn = document.getElementById('prev-btn');
const nextBtn = document.getElementById('next-btn');
const volumeSlider = document.getElementById('volume-slider');
const volumeProgress = document.getElementById('volume-progress');
const playlist = document.getElementById('playlist');
const albumArt = document.querySelector('.album-art');

// 当前播放索引
let currentSongIndex = 0;
let isPlaying = false;

// 初始化播放器
function initPlayer() {
loadSong(currentSongIndex);
renderPlaylist();

// 设置初始音量
audioPlayer.volume = 0.7;
volumeProgress.style.width = '70%';
}

// 加载歌曲
function loadSong(index) {
const song = songs[index];
songTitle.textContent = song.title;
songArtist.textContent = song.artist;
albumCover.src = song.cover;
audioPlayer.src = song.src;

// 更新播放列表中的活动项
updateActivePlaylistItem();
}

// 渲染播放列表
function renderPlaylist() {
playlist.innerHTML = '';

songs.forEach((song, index) => {
const playlistItem = document.createElement('div');
playlistItem.className = 'playlist-item';
if (index === currentSongIndex) {
playlistItem.classList.add('active');
}
playlistItem.innerHTML = `
<h4>${song.title}</h4>
<p>${song.artist}</p>
`;
playlistItem.addEventListener('click', () => {
currentSongIndex = index;
loadSong(currentSongIndex);
playSong();
});
playlist.appendChild(playlistItem);
});
}

// 更新播放列表中的活动项
function updateActivePlaylistItem() {
const playlistItems = document.querySelectorAll('.playlist-item');
playlistItems.forEach((item, index) => {
if (index === currentSongIndex) {
item.classList.add('active');
} else {
item.classList.remove('active');
}
});
}

// 播放歌曲
function playSong() {
isPlaying = true;
playBtn.textContent = '⏸';
albumArt.style.animationPlayState = 'running';
audioPlayer.play();
}

// 暂停歌曲
function pauseSong() {
isPlaying = false;
playBtn.textContent = '▶';
albumArt.style.animationPlayState = 'paused';
audioPlayer.pause();
}

// 上一首
function prevSong() {
currentSongIndex--;
if (currentSongIndex < 0) {
currentSongIndex = songs.length - 1;
}
loadSong(currentSongIndex);
if (isPlaying) {
playSong();
}
}

// 下一首
function nextSong() {
currentSongIndex++;
if (currentSongIndex > songs.length - 1) {
currentSongIndex = 0;
}
loadSong(currentSongIndex);
if (isPlaying) {
playSong();
}
}

// 更新进度条
function updateProgress(e) {
const { duration, currentTime } = e.srcElement;
const progressPercent = (currentTime / duration) * 100;
progress.style.width = `${progressPercent}%`;

// 更新时间显示
const durationMinutes = Math.floor(duration / 60);
let durationSeconds = Math.floor(duration % 60);
if (durationSeconds < 10) {
durationSeconds = `0${durationSeconds}`;
}

// 避免NaN显示
if (durationSeconds) {
durationEl.textContent = `${durationMinutes}:${durationSeconds}`;
}

const currentMinutes = Math.floor(currentTime / 60);
let currentSeconds = Math.floor(currentTime % 60);
if (currentSeconds < 10) {
currentSeconds = `0${currentSeconds}`;
}
currentTimeEl.textContent = `${currentMinutes}:${currentSeconds}`;
}

// 设置进度
function setProgress(e) {
const width = this.clientWidth;
const clickX = e.offsetX;
const duration = audioPlayer.duration;
audioPlayer.currentTime = (clickX / width) * duration;
}

// 设置音量
function setVolume(e) {
const width = this.clientWidth;
const clickX = e.offsetX;
const volume = clickX / width;
audioPlayer.volume = volume;
volumeProgress.style.width = `${volume * 100}%`;
}

// 事件监听
playBtn.addEventListener('click', () => {
isPlaying ? pauseSong() : playSong();
});

prevBtn.addEventListener('click', prevSong);
nextBtn.addEventListener('click', nextSong);

audioPlayer.addEventListener('timeupdate', updateProgress);
audioPlayer.addEventListener('ended', nextSong);

progressBar.addEventListener('click', setProgress);
volumeSlider.addEventListener('click', setVolume);

// 初始化播放器
initPlayer();
</script>
</body>
</html>