Hướng dẫn tạo trình nghe nhạc MP3 đơn giản trên Blogspot bằng HTML, CSS và JavaScript, giúp bạn dễ dàng tích hợp vào blog cá nhân của mình.
Nếu bạn đang muốn tạo một trình nghe nhạc MP3 đơn giản để tích hợp vào blog của mình trên Blogspot, bạn đã đến đúng nơi. Bài viết này sẽ hướng dẫn bạn từng bước để xây dựng một trình nghe nhạc đơn giản sử dụng HTML, CSS và JavaScript.
 |
| Share Code tạo trình nghe nhạc MP3 đơn giản bằng HTML, CSS, và JavaScript cho Blogspot. |
Hãy bắt đầu nhé!
Bước 1: Chuẩn bị HTML
Đầu tiên, bạn cần tạo một cấu trúc HTML cơ bản cho trình nghe nhạc của mình. Bạn có thể dán mã HTML sau vào bài viết hoặc widget trên Blogspot của bạn.
<div class="player">
<div class="audio-wrapper">
<div class="audio-slider" id="slider">
<div class="progress" id="progress"></div>
</div>
<audio id="audio-player"></audio>
</div>
<div class="controls">
<button id="prev-btn"><i class="fas fa-backward"></i></button>
<button id="play-pause-btn"><i class="fas fa-play"></i></button>
<button id="next-btn"><i class="fas fa-forward"></i></button>
</div>
<ul id="playlist">
<li data-src="https://github.com/giaodienblog/cdn/raw/master/bh-1.mp3">Tình yêu và nỗi nhớ</li>
<li data-src="https://github.com/giaodienblog/cdn/raw/master/bh-2.mp3">Phượng hồng - Đàm Vĩnh Hưng</li>
<li data-src="https://github.com/giaodienblog/cdn/raw/master/bh-3.mp3">Xin lỗi tình yêu</li>
<li data-src="https://github.com/giaodienblog/cdn/raw/master/bh-3.mp3">Xin lỗi tình yêu 2</li>
<!-- Thêm nhiều mục ở đây -->
</ul>
</div>
Bước 2: Thêm CSS
Tiếp theo, bạn cần thêm CSS để tạo kiểu cho trình nghe nhạc của mình. Bạn có thể thêm đoạn mã CSS sau vào thẻ <style> trong bài viết của bạn.
<style>
/*<![CDATA[*/
.player{background:linear-gradient(135deg,#2c3e50,#4ca1af);padding:20px;border-radius:15px;box-shadow:0 10px 20px rgba(0,0,0,0.3);text-align:center;width:320px;color:#fff;font-family:'Arial',sans-serif;}
.audio-wrapper{position:relative}
.audio-slider{width:100%;height:5px;background:rgba(255,255,255,0.5);border-radius:5px;cursor:pointer;margin-bottom:20px}
.audio-slider .progress{height:100%;background:#6dd5ed;border-radius:5px;width:0%}
.controls{display:flex;justify-content:space-around;margin-bottom:20px}
.controls button{background:linear-gradient(135deg,#6dd5ed,#2193b0);border:none;border-radius:50%;color:#fff;padding:15px;font-size:20px;cursor:pointer;transition:transform 0.2s,box-shadow 0.2s}
.controls button:hover{transform:scale(1.1);box-shadow:0 4px 8px rgba(0,0,0,0.2)}
.controls button i{pointer-events:none}
#playlist{list-style-type:decimal;padding:0;margin:0;background:rgba(0,0,0,0.3);border-radius:10px;overflow:hidden;counter-reset:playlist;text-align:left;max-height:200px;overflow-y:scroll}
#playlist li{padding:15px;margin-bottom:5px;background:rgba(255,255,255,0.1);border-bottom:1px solid rgba(255,255,255,0.2);cursor:pointer;transition:background 0.3s,color 0.3s;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#playlist li:hover{background:rgba(255,255,255,0.2)}
#playlist .active{background:#6dd5ed;color:#000;font-weight:bold}
#playlist::-webkit-scrollbar-track{
-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.3);
background:#fff 0% 0% repeat scroll;
}
#playlist::-webkit-scrollbar{
width:10px;
background-color:#FFF
}
#playlist::-webkit-scrollbar-thumb{
background-color:#00ACF5;
background-image:-webkit-linear-gradient(45deg,rgba(255,255,255,.2) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.2) 50%,rgba(255,255,255,.2) 75%,transparent 75%,transparent)
}
#playlist::-webkit-scrollbar-thumb:hover{
background:#008BC5;
}
#playlist::-webkit-scrollbar-thumb:active{
background:#00ACF5;
-webkit-box-shadow:inset 1px 1px 2px rgba(0,0,0,.3)}
/*]]>*/
</style>
Bước 3: Thêm JavaScript
Cuối cùng, bạn cần thêm JavaScript để điều khiển trình nghe nhạc. Bạn có thể thêm đoạn mã JavaScript sau vào thẻ <script> trong bài viết hoặc widget của bạn.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"/>
<script>
//<![CDATA[
const audioPlayer=document.getElementById("audio-player"),playPauseBtn=document.getElementById("play-pause-btn"),prevBtn=document.getElementById("prev-btn"),nextBtn=document.getElementById("next-btn"),playlist=document.getElementById("playlist"),tracks=playlist.getElementsByTagName("li"),slider=document.getElementById("slider"),progress=document.getElementById("progress");let currentTrackIndex=0,isDragging=!1;function loadTrack(e){audioPlayer.src=tracks[e].dataset.src,audioPlayer.load(),highlightCurrentTrack(e)}function highlightCurrentTrack(e){for(let a=0;a<tracks.length;a++)tracks[a].classList.remove("active");tracks[e].classList.add("active")}function playPauseTrack(){audioPlayer.paused?(audioPlayer.play(),playPauseBtn.innerHTML='<i class="fas fa-pause"></i>'):(audioPlayer.pause(),playPauseBtn.innerHTML='<i class="fas fa-play"></i>')}function playNextTrack(){loadTrack(currentTrackIndex=(currentTrackIndex+1)%tracks.length),audioPlayer.play(),playPauseBtn.innerHTML='<i class="fas fa-pause"></i>'}function playPrevTrack(){loadTrack(currentTrackIndex=(currentTrackIndex-1+tracks.length)%tracks.length),audioPlayer.play(),playPauseBtn.innerHTML='<i class="fas fa-pause"></i>'}function updateProgress(){let e=audioPlayer.currentTime/audioPlayer.duration*100;progress.style.width=e+"%"}function seek(e){let a=slider.getBoundingClientRect(),t=(e.clientX-a.left)/slider.offsetWidth;audioPlayer.currentTime=t*audioPlayer.duration}playPauseBtn.addEventListener("click",playPauseTrack),nextBtn.addEventListener("click",playNextTrack),prevBtn.addEventListener("click",playPrevTrack),audioPlayer.addEventListener("timeupdate",updateProgress),audioPlayer.addEventListener("ended",playNextTrack),slider.addEventListener("click",seek),slider.addEventListener("mousedown",()=>isDragging=!0),document.addEventListener("mouseup",()=>isDragging=!1),document.addEventListener("mousemove",e=>{isDragging&&seek(e)});for(let i=0;i<tracks.length;i++)tracks[i].addEventListener("click",()=>{currentTrackIndex=i,loadTrack(i),audioPlayer.play(),playPauseBtn.innerHTML='<i class="fas fa-pause"></i>'});loadTrack(currentTrackIndex);
//]]>
</script>
Kết Luận
Vậy là bạn đã hoàn thành việc tạo một trình nghe nhạc MP3 đơn giản bằng HTML, CSS và JavaScript. Bạn có thể thay thế các link nhạc bằng đường dẫn đến tệp MP3 bạn muốn sử dụng.
Code này của bạn Hòa Trần Blogger chia sẻ, mình có thêm một ít CSS của thanh cuộn trình phát nhạc để nhìn ok hơn. Các bạn có thể tham khảo CSS một số thanh cuộn Scrollbar đẹp cho blogspot.
Chúc bạn thành công và có những trải nghiệm tuyệt vời với trình nghe nhạc của mình trên Blogspot!
