ANHLEVAN'S chia sẻ đến các bạn code playlist mp3 giản đơn
Hy vọng giúp các bạn có một công cụ để nghe những bài hát mà mình yêu thích
<!DOCTYPE html>
<html>
<head>
<style>
.player-container {
border: 1px solid #ccc;
box-shadow: 3px 3px 2px #888;
padding: 20px;
margin-bottom: 1px;
background-color: #f0f0f0;
max-width: 500px; /* Example max-width for better layout */
margin-left: auto;
margin-right: auto;
}
.current-track-info {
display: flex;
align-items: center;
margin-bottom: 10px;
}
#current-track-title {
font-size: 140%;
color: green;
text-shadow: 3px 3px 2px #808080;
line-height: 18px;
margin-top: -4px;
}
#current-track-avatar {
width: 90px !important;
height: 90px !important;
margin-right: 10px;
object-fit: cover;
border-radius: 5px;
}
#current-track-artist {color: #7c24b8; margin-top:0;}
.playlist-container {
border: 1px solid #ccc;
box-shadow: 3px 3px 2px #888;
padding: 20px;
max-width: 500px;
margin-left: auto;
margin-right: auto;
}
#playlist {
list-style: none;
padding: 0;
max-height: 240px;
overflow-y: auto;
}
button {background: #fffcce;border-radius: 5px;box-shadow: 2px 2px 1px #888; padding: 6px 12px; border: 1px solid #ccc; font-size: 0.9em;}
button:hover {background: #fbdbff;}
#playlist li {
color: #000;
padding: 8px 10px;
cursor: pointer;
border-bottom: 2px solid #aaa;
display: flex;
align-items: center;
margin: 1px 0;
}
/* tô màu dòng chẵn lẻ */
#playlist li:nth-child(even) {background-color: #daf2ff;} /* dòng chẵn */
#playlist li:nth-child(odd) {background-color: #e5f8ff;} /* dòng lẻ */
#playlist li:hover {background-color: #fffdd8;}
#playlist li img {
width: 40px !important;
height: 40px !important;
margin-right: 10px;
object-fit: cover;
}
.playing {
background-color: #ffe4ff !important;
order: -1;
font-weight: 500;
color: blue !important;
}
.progress-bar {
width: 100%;
height: 10px;
background-color: #ddd;
margin-top: 10px;
cursor: pointer;
}
#progress {
height: 100%;
background-color: #4CAF50;
width: 0%;
}
.time-display {margin-top: 6px;font-size:90%;}
#volume-slider {margin-top: 6px;cursor: pointer;height: 10px;background-color: #ddd; flex-grow: 1;}
.volume-and-playlist-toggle-container {
display: flex;
align-items: center;
margin-top: 10px;
}
.volume-control {
display: flex;
align-items: center;
flex-grow: 1;
}
#toggle-playlist-btn {
margin-left: 10px;
white-space: nowrap;
}
/* Reponsive mobile */
@media screen and (max-width:480px) {
#current-track-title {font-size: 100%;margin-top: -20px}
#current-track-artist {font-size: 90%;}
#playlist li {font-size:10px}
button {padding: 4px 8px;font-size: 0.8em;}
.volume-and-playlist-toggle-container {display: none;}
.volume-control {display: none;}
}
</style>
</head>
<body>
<div class="player-container">
<div class="current-track-info">
<img id="current-track-avatar" src="" alt="Artist Avatar">
<div class="track-details">
<h3 id="current-track-title"></h3>
<p id="current-track-artist"></p>
</div>
</div>
<audio id="audio-player">
Your browser does not support the audio element.
</audio>
<div class="controls">
<button id="preview-btn" style="cursor: pointer">Preview</button>
<button id="play-pause-btn" style="cursor: pointer">Play</button>
<button id="stop-btn" style="cursor: pointer">Stop</button>
<button id="next-btn" style="cursor: pointer">Next</button>
</div>
<div class="progress-bar">
<div id="progress"></div>
</div>
<div class="time-display">
<span id="current-time">0:00</span><span id="duration" style="float:right">0:00</span>
</div>
<div class="volume-and-playlist-toggle-container">
<div class="volume-control">🔊 <input type="range" id="volume-slider" min="0" max="1" step="0.01" value="0.8"></div>
<button id="toggle-playlist-btn" style="cursor: pointer;">Show List</button>
</div>
</div>
<div class="playlist-container">
<h4>Playlist</h4>
<ul id="playlist"></ul>
</div>
<script>
document.addEventListener('DOMContentLoaded', () => {
const audioPlayer = document.getElementById('audio-player');
const playPauseBtn = document.getElementById('play-pause-btn');
const stopBtn = document.getElementById('stop-btn');
const nextBtn = document.getElementById('next-btn');
const previewBtn = document.getElementById('preview-btn');
const volumeSlider = document.getElementById('volume-slider');
const playlistElement = document.getElementById('playlist');
const currentTrackTitleElement = document.getElementById('current-track-title');
const currentTrackArtistElement = document.getElementById('current-track-artist');
const currentTrackAvatarElement = document.getElementById('current-track-avatar');
const progressBar = document.querySelector('.progress-bar');
const progressElement = document.getElementById('progress');
const currentTimeElement = document.getElementById('current-time');
const durationElement = document.getElementById('duration');
const playlistContainer = document.querySelector('.playlist-container');
const togglePlaylistBtn = document.getElementById('toggle-playlist-btn');
const playlist = [
{
title: "1. Bông hồng cài áo",
artist: "Phạm Thế Mỹ - Thích Nhất Hạnh",
avatar: "https://i.pinimg.com/736x/1d/35/8b/1d358b0bf48e757171c9f550d89b94a7.jpg",
file: "https://5147024-568139484787851449.preview.editmysite.com/uploads/5/1/4/7/5147024/02_bonghongcaiao_phamthemy-thichnhathanh.mp3"
},
{
title: "2. Bản tình cuối",
artist: "Hồng Ân",
avatar: "https://i.pinimg.com/736x/4a/6a/85/4a6a858dc114a6d8ae8c5df4093fdbfc.jpg",
file: "https://5147024-568139484787851449.preview.editmysite.com/uploads/5/1/4/7/5147024/09_bantinhcuoi_hongan.mp3"
},
{
title: "3. Dạ khúc cho tình nhân",
artist: "Lê Uyên Phương",
avatar: "https://i.pinimg.com/736x/00/b1/00/00b100c70432085f689119d96c55b2fa.jpg",
file: "https://5147024-568139484787851449.preview.editmysite.com/uploads/5/1/4/7/5147024/07_dakhucchotinhnhan_leuyenphuong.mp3"
},
{
title: "4. Một ngày không có em",
artist: "Đan Nguyên",
avatar: "https://i.pinimg.com/736x/ad/6d/ca/ad6dcaa9f7575339209fce9fb6efe914.jpg",
file: "https://5147024-568139484787851449.preview.editmysite.com/uploads/5/1/4/7/5147024/11_motngaykhongcoem-dannguyen.mp3"
},
{
title: "5. Bao giờ biết tương tư",
artist: "Anh Khoa",
avatar: "https://i.pinimg.com/736x/61/cd/39/61cd3970688c32c9633985da16fc9e8b.jpg",
file: "https://5147024-568139484787851449.preview.editmysite.com/uploads/5/1/4/7/5147024/12_baogiobiettuongtu-anhkhoa.mp3"
},
{
title: "6. Lời đắng cho cuộc tình",
artist: "Đan Nguyên",
avatar: "https://i.pinimg.com/736x/24/d2/e3/24d2e39f701692c6345950aeb7fd5236.jpg",
file: "https://5147024-568139484787851449.preview.editmysite.com/uploads/5/1/4/7/5147024/13_loidangchocuoctinh-dannguyen.mp3"
},
{
title: "7. Cho lần cuối",
artist: "Lê Uyên Phương",
avatar: "https://i.pinimg.com/736x/e8/63/fb/e863fbf28ee0620013bd8a168cba53a0.jpg",
file: "https://5147024-568139484787851449.preview.editmysite.com/uploads/5/1/4/7/5147024/05_cholancuoi_leuyenphuong.mp3"
}
// Add more songs here
];
let currentTrackIndex = 0;
function loadTrack(index) {
const track = playlist[index];
audioPlayer.src = track.file;
currentTrackTitleElement.textContent = track.title;
currentTrackArtistElement.textContent = track.artist;
currentTrackAvatarElement.src = track.avatar;
currentTrackAvatarElement.alt = `${track.artist} Avatar`;
document.title = `${track.title} - ${track.artist}`;
updatePlaylistDisplay(index);
audioPlayer.load();
}
function playTrack() {
audioPlayer.play();
playPauseBtn.textContent = 'Pause';
}
function pauseTrack() {
audioPlayer.pause();
playPauseBtn.textContent = 'Play';
}
function stopTrack() {
audioPlayer.pause();
audioPlayer.currentTime = 0;
playPauseBtn.textContent = 'Play';
}
function nextTrack() {
currentTrackIndex = (currentTrackIndex + 1) % playlist.length;
loadTrack(currentTrackIndex);
playTrack();
}
function previewTrack() {
const previewDuration = 5; // seconds to preview
audioPlayer.currentTime = 0;
playTrack();
const previewTimer = setTimeout(() => {
pauseTrack();
}, previewDuration * 1000);
audioPlayer.addEventListener('play', () => clearTimeout(previewTimer), { once: true });
audioPlayer.addEventListener('pause', () => clearTimeout(previewTimer), { once: true });
audioPlayer.addEventListener('stop', () => clearTimeout(previewTimer), { once: true });
audioPlayer.addEventListener('ended', () => clearTimeout(previewTimer), { once: true });
}
function updatePlaylistDisplay(playingIndex) {
playlistElement.innerHTML = '';
const sortedPlaylist = [...playlist];
const currentlyPlayingTrack = sortedPlaylist.splice(playingIndex, 1)[0];
sortedPlaylist.unshift(currentlyPlayingTrack);
sortedPlaylist.forEach((track) => {
const li = document.createElement('li');
li.innerHTML = `
<img src="${track.avatar}" alt="${track.artist} Avatar">
<div>
<strong>${track.title}</strong> <br /> ${track.artist}
</div>
`;
if (track === currentlyPlayingTrack) {
li.classList.add('playing');
}
li.addEventListener('click', () => {
const originalIndex = playlist.findIndex(item => item.file === track.file);
if (originalIndex !== currentTrackIndex) {
currentTrackIndex = originalIndex;
loadTrack(currentTrackIndex);
playTrack();
} else {
if (audioPlayer.paused) {
playTrack();
} else {
pauseTrack();
}
}
});
playlistElement.appendChild(li);
});
}
if (togglePlaylistBtn && playlistContainer) {
playlistContainer.style.display = 'true';
togglePlaylistBtn.textContent = 'Hide List';
togglePlaylistBtn.addEventListener('click', () => {
const isHidden = playlistContainer.style.display === 'none';
if (isHidden) {
playlistContainer.style.display = 'block';
togglePlaylistBtn.textContent = 'Hide List';
} else {
playlistContainer.style.display = 'none';
togglePlaylistBtn.textContent = 'Show List';
}
});
}
playPauseBtn.addEventListener('click', () => {
if (audioPlayer.paused) {
playTrack();
} else {
pauseTrack();
}
});
stopBtn.addEventListener('click', stopTrack);
nextBtn.addEventListener('click', nextTrack);
previewBtn.addEventListener('click', previewTrack);
audioPlayer.addEventListener('ended', nextTrack);
audioPlayer.addEventListener('timeupdate', () => {
const progress = (audioPlayer.currentTime / audioPlayer.duration) * 100;
progressElement.style.width = progress + '%';
const formatTime = (time) => {
const minutes = Math.floor(time / 60);
const seconds = Math.floor(time % 60);
return `${minutes}:${seconds < 10 ? '0' : ''}${seconds}`;
};
currentTimeElement.textContent = formatTime(audioPlayer.currentTime);
if (!isNaN(audioPlayer.duration)) {
durationElement.textContent = formatTime(audioPlayer.duration);
}
});
progressBar.addEventListener('click', (e) => {
const clickPosition = e.offsetX / progressBar.offsetWidth;
audioPlayer.currentTime = clickPosition * audioPlayer.duration;
});
volumeSlider.addEventListener('input', (e) => {
audioPlayer.volume = e.target.value;
});
loadTrack(currentTrackIndex);
});
</script>
</body>
</html>
☞ Nếu bạn có bất kỳ vấn đề nào với bài viết này hãy comment vào bên dưới, mình sẽ hồi âm sớm nhất có thể.
DEMO:
Mở cửa sổ nghe nhạc
Đăng nhận xét
Nếu bạn comment bằng tiếng Việt thì dùng dấu đầy đủ, cám ơn.