💙 横条音乐播放器
使用说明
点击播放/暂停按钮控制音乐播放
点击上一曲/下一曲按钮切换歌曲
点击随机播放或单曲循环按钮切换播放模式
点击进度条可以跳转到指定播放位置
点击播放列表中的歌曲可以直接播放该歌曲
代码如下
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>横条音乐播放器</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', Arial, sans-serif;
}
body {
background: linear-gradient(to bottom, #fff59b, #d7fff7,#8cfff7);
color: #fff;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
padding: 20px;
}
.player-container {
width: 100%;
max-width: 800px;
background-color: #2d2d2d;
border-radius: 10px;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
overflow: hidden;
}
.player-bar {
display: flex;
align-items: center;
padding: 15px 20px;
background: linear-gradient(90deg, #3a3a3a, #2d2d2d);
}
.song-info {
flex: 1;
min-width: 0;
margin-right: 20px;
}
.song-title {
font-size: 1.1rem;
font-weight: 600;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-bottom: 3px;
}
.song-artist {
font-size: 0.85rem;
color: #aaa;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.progress-container {
flex: 2;
display: flex;
flex-direction: column;
align-items: center;
margin: 0 20px;
width: 100%;
}
.progress-wrapper {
width: 100%;
display: flex;
align-items: center;
gap: 10px;
}
.progress-bar {
flex: 1;
height: 5px;
background-color: #555;
border-radius: 3px;
cursor: pointer;
position: relative;
overflow: hidden;
}
.progress {
height: 100%;
background-color: #4CAF50;
border-radius: 3px;
width: 0%;
transition: width 0.1s;
}
.time-display {
display: flex;
justify-content: space-between;
width: 100%;
font-size: 0.8rem;
color: #aaa;
margin-top: 5px;
}
.time-display span {
width: 50px;
text-align: center;
font-family: 'Courier New', monospace;
font-weight: bold;
}
.controls {
display: flex;
align-items: center;
gap: 10px;
}
.control-btn {
background: none;
border: none;
color: #fff;
font-size: 1.1rem;
cursor: pointer;
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
transition: all 0.2s;
}
.control-btn:hover {
background-color: rgba(255, 255, 255, 0.1);
}
.control-btn.active {
color: #4CAF50;
}
.play-btn {
background-color: #4CAF50;
color: #fff;
font-size: 1.3rem;
width: 40px;
height: 40px;
}
.play-btn:hover {
background-color: #45a049;
}
.playlist-btn {
background: none;
border: none;
color: #fff;
font-size: 1.1rem;
cursor: pointer;
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
transition: all 0.2s;
}
.playlist-btn:hover {
background-color: rgba(255, 255, 255, 0.1);
}
.playlist {
width: 100%;
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
background-color: #252525;
}
.playlist.active {
max-height: 300px;
overflow-y: auto;
}
.playlist-item {
display: flex;
align-items: center;
padding: 12px 20px;
border-bottom: 1px solid #333;
cursor: pointer;
transition: background-color 0.2s;
}
.playlist-item:hover {
background-color: rgba(255, 255, 255, 0.05);
}
.playlist-item.active {
background-color: rgba(76, 175, 80, 0.2);
}
.playlist-item-index {
width: 30px;
color: #aaa;
font-size: 0.9rem;
text-align: center;
}
.playlist-item-info {
flex: 1;
min-width: 0;
margin: 0 10px;
}
.playlist-item-title {
font-size: 1rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.playlist-item-duration {
color: #aaa;
font-size: 0.8rem;
width: 50px;
text-align: right;
}
/* 优化滚动条样式 */
.playlist::-webkit-scrollbar {
width: 8px;
}
.playlist::-webkit-scrollbar-track {
background: #333;
border-radius: 4px;
}
.playlist::-webkit-scrollbar-thumb {
background: #555;
border-radius: 4px;
}
.playlist::-webkit-scrollbar-thumb:hover {
background: #666;
}
</style>
</head>
<body>
<div class="player-container" id="player-container">
<div class="player-bar">
<div class="song-info">
<div class="song-title" id="current-song-title">夏日微风</div>
<div class="song-artist" id="current-song-artist"></div>
</div>
<div class="progress-container">
<div class="progress-wrapper">
<span id="current-time">00:00</span>
<div class="progress-bar" id="progress-container">
<div class="progress" id="progress-bar"></div>
</div>
<span id="total-time">00:00</span>
</div>
</div>
<div class="controls">
<button class="control-btn" id="shuffle-btn" title="随机播放">
<i class="fas fa-random"></i>
</button>
<button class="control-btn" id="prev-btn" title="上一曲">
<i class="fas fa-step-backward"></i>
</button>
<button class="control-btn play-btn" id="play-btn" title="播放">
<i class="fas fa-pause"></i>
</button>
<button class="control-btn" id="next-btn" title="下一曲">
<i class="fas fa-step-forward"></i>
</button>
<button class="control-btn" id="repeat-btn" title="单曲循环">
<i class="fas fa-redo"></i>
</button>
<button class="playlist-btn" id="playlist-btn" title="播放列表">
<i class="fas fa-list"></i>
</button>
</div>
</div>
<div class="playlist" id="playlist">
<!-- 播放列表将通过JavaScript动态生成 -->
</div>
</div>
<script>
// 播放器状态
const playerState = {
isPlaying: false,
isShuffle: false,
isRepeat: false,
currentSongIndex: 0,
currentTime: 0,
duration: 0,
playlistVisible: false
};
// 歌曲列表（去掉演唱者信息）
const playlist = [
{
title: "茶涧 (纯音乐)",
duration: "02:16",
audioSrc: "https://pan.5blog.cn/view.php/88ad6c5b8698ec17087fff87a48e6822.mp3"
},
{
title: "你在他乡还好吗",
duration: "07:19",
audioSrc: "https://5blog.cn/tx/1/%E4%BD%A0%E5%9C%A8%E4%BB%96%E4%B9%A1%E8%BF%98%E5%A5%BD%E5%90%97.mp3"
},
{
title: "城市夜晚",
duration: "04:15",
audioSrc: "https://example.com/city-night.mp3"
},
{
title: "难解",
duration: "3:06",
audioSrc: "https://5blog.cn/tx/1/%E9%9A%BE%E8%A7%A3.mp3"
},
{
title: "追求",
duration: "2:45",
audioSrc: "https://5blog.cn/tx/1/zhuiqiu.mp3"
},
{
title: "谢谢你的爱(李彤儿)",
duration: "04:16",
audioSrc: "https://pan.5blog.cn/view.php/b1d82a2184c9b2ad042d9894ce430c55.mp3"
}
];
// 创建音频元素
const audio = new Audio();
// DOM元素
const playBtn = document.getElementById('play-btn');
const prevBtn = document.getElementById('prev-btn');
const nextBtn = document.getElementById('next-btn');
const shuffleBtn = document.getElementById('shuffle-btn');
const repeatBtn = document.getElementById('repeat-btn');
const playlistBtn = document.getElementById('playlist-btn');
const progressBar = document.getElementById('progress-bar');
const progressContainer = document.getElementById('progress-container');
const currentTimeEl = document.getElementById('current-time');
const totalTimeEl = document.getElementById('total-time');
const currentSongTitle = document.getElementById('current-song-title');
const currentSongArtist = document.getElementById('current-song-artist');
const playlistEl = document.getElementById('playlist');
const playerContainer = document.getElementById('player-container');
// 初始化播放列表
function initPlaylist() {
playlistEl.innerHTML = '';
playlist.forEach((song, index) => {
const item = document.createElement('div');
item.className = `playlist-item ${index === playerState.currentSongIndex ? 'active' : ''}`;
item.innerHTML = `
<div class="playlist-item-index">${index + 1}</div>
<div class="playlist-item-info">
<div class="playlist-item-title">${song.title}</div>
</div>
<div class="playlist-item-duration">${song.duration}</div>
`;
item.addEventListener('click', () => {
playSong(index);
hidePlaylist(); // 点击歌曲后自动隐藏播放列表
});
playlistEl.appendChild(item);
});
}
// 显示播放列表
function showPlaylist() {
playlistEl.classList.add('active');
playerState.playlistVisible = true;
// 更新图标
const icon = playlistBtn.querySelector('i');
icon.className = 'fas fa-list-ul';
playlistBtn.title = "隐藏列表";
}
// 隐藏播放列表
function hidePlaylist() {
playlistEl.classList.remove('active');
playerState.playlistVisible = false;
// 更新图标
const icon = playlistBtn.querySelector('i');
icon.className = 'fas fa-list';
playlistBtn.title = "播放列表";
}
// 切换播放列表显示/隐藏
function togglePlaylist() {
if (playerState.playlistVisible) {
hidePlaylist();
} else {
showPlaylist();
}
}
// 播放歌曲
function playSong(index) {
if (index < 0) index = playlist.length - 1;
if (index >= playlist.length) index = 0;
playerState.currentSongIndex = index;
const song = playlist[index];
// 更新当前歌曲信息
currentSongTitle.textContent = song.title;
currentSongArtist.textContent = "";
totalTimeEl.textContent = song.duration;
// 设置音频源
audio.src = song.audioSrc;
// 更新播放列表高亮
document.querySelectorAll('.playlist-item').forEach((item, i) => {
item.classList.toggle('active', i === index);
});
// 重置播放进度
playerState.currentTime = 0;
updateProgressBar();
if (!playerState.isPlaying) {
togglePlay();
} else {
audio.play();
}
}
// 切换播放/暂停
function togglePlay() {
playerState.isPlaying = !playerState.isPlaying;
if (playerState.isPlaying) {
playBtn.innerHTML = '<i class="fas fa-pause"></i>';
playBtn.title = "暂停";
audio.play();
} else {
playBtn.innerHTML = '<i class="fas fa-play"></i>';
playBtn.title = "播放";
audio.pause();
}
}
// 更新进度条
function updateProgressBar() {
const progressPercent = (playerState.currentTime / playerState.duration) * 100;
progressBar.style.width = `${progressPercent}%`;
const currentMinutes = Math.floor(playerState.currentTime / 60);
const currentSeconds = Math.floor(playerState.currentTime % 60);
currentTimeEl.textContent = `${currentMinutes.toString().padStart(2, '0')}:${currentSeconds.toString().padStart(2, '0')}`;
const totalMinutes = Math.floor(playerState.duration / 60);
const totalSeconds = Math.floor(playerState.duration % 60);
totalTimeEl.textContent = `${totalMinutes.toString().padStart(2, '0')}:${totalSeconds.toString().padStart(2, '0')}`;
}
// 下一首歌曲
function nextSong() {
let nextIndex;
if (playerState.isShuffle) {
nextIndex = Math.floor(Math.random() * playlist.length);
while (nextIndex === playerState.currentSongIndex && playlist.length > 1) {
nextIndex = Math.floor(Math.random() * playlist.length);
}
} else {
nextIndex = playerState.currentSongIndex + 1;
}
playSong(nextIndex);
}
// 上一首歌曲
function prevSong() {
let prevIndex = playerState.currentSongIndex - 1;
playSong(prevIndex);
}
// 切换随机播放
function toggleShuffle() {
playerState.isShuffle = !playerState.isShuffle;
shuffleBtn.classList.toggle('active', playerState.isShuffle);
shuffleBtn.title = playerState.isShuffle ? "关闭随机播放" : "随机播放";
}
// 切换单曲循环
function toggleRepeat() {
playerState.isRepeat = !playerState.isRepeat;
repeatBtn.classList.toggle('active', playerState.isRepeat);
repeatBtn.title = playerState.isRepeat ? "关闭单曲循环" : "单曲循环";
}
// 点击进度条跳转
function setProgress(e) {
const progressContainerWidth = progressContainer.clientWidth;
const clickX = e.offsetX;
const progressPercent = clickX / progressContainerWidth;
playerState.currentTime = progressPercent * playerState.duration;
audio.currentTime = playerState.currentTime;
updateProgressBar();
}
// 事件监听
playBtn.addEventListener('click', togglePlay);
prevBtn.addEventListener('click', prevSong);
nextBtn.addEventListener('click', nextSong);
shuffleBtn.addEventListener('click', toggleShuffle);
repeatBtn.addEventListener('click', toggleRepeat);
playlistBtn.addEventListener('click', togglePlaylist);
progressContainer.addEventListener('click', setProgress);
// 音频事件监听
audio.addEventListener('loadedmetadata', () => {
playerState.duration = audio.duration;
updateProgressBar();
});
audio.addEventListener('timeupdate', () => {
playerState.currentTime = audio.currentTime;
updateProgressBar();
});
audio.addEventListener('ended', () => {
if (playerState.isRepeat) {
audio.currentTime = 0;
audio.play();
} else {
nextSong();
}
});
// 初始化
function initPlayer() {
// 初始化播放列表
initPlaylist();
// 播放第一首歌
playSong(0);
// 自动播放
togglePlay();
}
// 页面加载完成后初始化播放器
window.addEventListener('DOMContentLoaded', initPlayer);
</script>
</body>
</html>演示地址：
阅读：58
发布时间：