Tạo danh sách phát nhạc cho website với HTML, CSS và JS

Bài viết này Hocban.vn chia sẻ đến bạn cách để tạo danh sách phát nhạc cho website. Đây là một trong các nội dung thuộc chủ đề Trang trí website mùa Noel và kể cả Tết cũng áp dụng luôn cho có không khí ^^ Mẫu widget này không chỉ dùng cho WordPress mà cho mọi nền tảng khác nữa, miễn là vị trí chèn code có hỗ trợ nhúng code HTML CSS JS. Nếu bạn cần lắp danh phát nhạc vào website cho sinh động hoặc để nghe những bài nhạc yêu thích thì thử nhé ^^

Ảnh minh hoạ bên dưới là mẫu widget HTML CSS JS mình đã thực hiện vào dịp Giáng Sinh 2025, đặt tên là Hocban audio player. Widget được thiết kế với giao diện đơn giản nhưng đẹp và tinh tế (text không bị hoà lẫn vào nền). Mẫu code này nhẹ và hơn nữa tính năng khá thông minh, không có gây khó chịu người dùng.

Tạo danh sách phát nhạc cho website, đẹp và nhẹ

Có 3 cái hay như vầy nè: Khi lần đầu tiên bạn truy cập website có nhúng widget này thì nhạc sẽ được phát tự động. Điều mà bạn sẽ không thể thực hiện được đối với chèn nhạc nền (trình duyệt sẽ chặn phát tự động). Thứ hai là âm thanh phát nhạc mặc định chỉ 40% âm lượng thì cũng rất dễ chịu, bài hát mở đầu cũng có độ trễ 5 -7s nên lại càng mượt.

Thứ ba, khi người dùng không muốn phát nhạc thì bấm nút tạm dừng >> các trang mở sau đó sẽ mặc định không tự hát. Để chạy thử, bạn copy code bên dưới và dán vào widget HTML trên WordPress hoặc bất kỳ nền tảng nào đang sử dụng.

<div id="custom-audio-player-hocban">
<audio id="hocban-audio-player" controls="controls" style="width: 100%; margin-bottom: 20px; border-radius: 0;">
Trình duyệt của bạn không hỗ trợ phần tử audio.
</audio>
<ul id="hocban-playlist">
<li class="playlist-item active" data-src="https://hocban.vn/wp-content/uploads/2025/12/We-wish-you-a-merry-christmas-Piano-cover-.mp3">
<span>1. We Wish You A Merry Christmas (Piano cover)</span>
</li>
<li class="playlist-item" data-src="https://hocban.vn/wp-content/uploads/2025/12/Im-Your-Christmas-Present.mp3">
<span>2. I'm Your Christmas Present</span>
</li>
<li class="playlist-item" data-src="https://hocban.vn/wp-content/uploads/2025/12/Holly-Jolly-Christmas.mp3">
<span>3. Holly Jolly Christmas</span>
</li>
<li class="playlist-item" data-src="https://hocban.vn/wp-content/uploads/2025/12/We-Wish-You-a-Merry-Christmas.mp3">
<span>4. We Wish You a Merry Christmas</span>
</li>
<li class="playlist-item" data-src="https://hocban.vn/wp-content/uploads/2025/12/Last-Christmas.mp3">
<span>5. Last Christmas</span>
</li>
<li class="playlist-item" data-src="https://hocban.vn/wp-content/uploads/2025/12/Jingle-Bell-Rock.mp3">
<span>6. Jingle Bell Rock</span>
</li>
<li class="playlist-item" data-src="https://hocban.vn/wp-content/uploads/2025/12/Jingle-Bells-Christmas-Song.mp3">
<span>7. Jingle Bells Christmas Song</span>
</li>
<li class="playlist-item" data-src="https://hocban.vn/wp-content/uploads/2025/12/Bai-Thanh-Ca-Buon.mp3">
<span>8. Bài Thánh Ca Buồn</span>
</li>
<li class="playlist-item" data-src="https://hocban.vn/wp-content/uploads/2025/12/Hai-Mua-Noel.mp3">
<span>9. Hai Mùa Noel</span>
</li>
</ul>
<style>
@keyframes flash-color {
0%, 100% { color: #FFD700; opacity: 1; }
33% { color: #32CD32; opacity: 1; }
66% { color: #00BFFF; opacity: 1; }
}
#custom-audio-player-hocban {
background: linear-gradient(rgb(42 21 5 / 63%), rgb(25 11 1 / 18%)), url('https://beta.hocban.vn/wp-content/uploads/2025/12/anh-nen-phat-nhac-5.avif'); 
background-size: cover;
background-position: center;
border-radius: 10px; 
border: none;
padding: 30px 15px; 
box-shadow: none; 
color: #ffffff;
min-height: 350px; 
display: flex; 
flex-direction: column;
}
#hocban-audio-player {
min-width: 100%;
}
#hocban-playlist {
list-style: none; padding: 0; margin: 0; 
flex-grow: 1; 
overflow-y: auto; 
border-top: none; 
margin-top: 0px;
}
#hocban-playlist .playlist-item {
margin-bottom: 0;
border-bottom: solid 1px #bfbab42e;
}
#hocban-playlist .playlist-item:last-child {
border-bottom: none;
}
#hocban-playlist .playlist-item span {
display: block; 
padding: 6px 12px 1px 12px; 
cursor: pointer; 
color: #fff; 
font-size: 14px; 
transition: background-color 0.1s, color 0.1s;
}
#hocban-playlist .playlist-item:hover span {
background-color: transparent; 
color: #1fe6ff; 
}
#hocban-playlist .playlist-item.active span {
font-weight: bold; 
background-color: transparent; 
border-radius: 0; 
color: #FFD700; 
animation: flash-color 3s infinite steps(1); 
background: none; 
background-size: initial;
-webkit-background-clip: initial; 
-webkit-text-fill-color: initial; 
text-shadow: none; 
}
#hocban-playlist::-webkit-scrollbar { width: 5px; }
#hocban-playlist::-webkit-scrollbar-thumb { 
background: #ffffff; 
border-radius: 10px; 
}
@media (max-width: 600px) {
#custom-audio-player-hocban {
min-height: 500px; 
padding: 50px 20px; 
}
#hocban-audio-player {
height: 45px; 
margin-bottom: 15px !important; 
}
#hocban-playlist .playlist-item span {
font-size: 16px; 
padding: 10px 10px 5px 10px; 
}
#hocban-playlist .playlist-item {
border-bottom: solid 1px #bfbab42e;
}
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function() {
var player = document.getElementById('hocban-audio-player');
var playlist = document.getElementById('hocban-playlist');
var items = playlist.getElementsByClassName('playlist-item');
var currentTrackIndex = 0;
const PAUSE_KEY = 'hocban_music_paused';
player.volume = 0.4;
function loadAndPlay(index, shouldPlay) {
if (index < 0 || index >= items.length) {
index = 0;
}
currentTrackIndex = index;
var src = items[index].getAttribute('data-src');
if (player.getAttribute('src') !== src) {
player.src = src;
}
for (var i = 0; i < items.length; i++) {
items[i].classList.remove('active');
}
items[index].classList.add('active');
if (shouldPlay) {
var playPromise = player.play();
if (playPromise !== undefined) {
playPromise.then(function() {
localStorage.setItem(PAUSE_KEY, 'false');
}).catch(function(error) {
console.log('Autoplay blocked:', error);
});
}
}
}
for (var i = 0; i < items.length; i++) {
items[i].addEventListener('click', function() {
var clickedIndex = Array.prototype.indexOf.call(items, this);
loadAndPlay(clickedIndex, true);
});
}
player.addEventListener('ended', function() {
loadAndPlay(currentTrackIndex + 1, true);
});
player.addEventListener('pause', function() {
localStorage.setItem(PAUSE_KEY, 'true');
});
player.addEventListener('play', function() {
localStorage.setItem(PAUSE_KEY, 'false');
});
const isPaused = localStorage.getItem(PAUSE_KEY) === 'true';
loadAndPlay(currentTrackIndex, !isPaused);
});
</script>
</div>

Bạn nhớ upload các bài hát mà bạn muốn lên hosting để không bị lỗi khi mình xoá hoặc điều chỉnh link gốc của bài hát. Sau đó copy link bài hát của bạn và thay vaò link nhạc tương ứng ở trên. Trình tự sắp xếp bài hát trong danh sách tương tự như trong file code. Số lượng dưới 9 bài hát mới đẹp, nhiều quá nó hiện thanh cuộn sẽ không còn đẹp nữa.

Kể cả ảnh nền của trình phát cũng vậy, bạn có thể tham khảo thêm các mẫu ảnh nền Giáng Sinh khác >> lưu về máy >> nén ảnh lại cho nhẹ >> upload lên. Hoặc nhờ AI tạo cho ảnh nền Giáng Sinh với phong cách tương tự >>upload lên >> thay link ảnh nền playlist.

Tịnh Nguyễn