Share code tạo trình nghe nhạc MP3 đơn giản cho Blogspot

Anh Trai Nắng
05 tháng 9
Tips
Mục lục

Nếu bạn từng mê giao diện ZingChart của Zing MP3 thì chắc hẳn sẽ thấy nó vừa hiện đại, vừa trực quan: có thứ hạng, ảnh bìa, tên bài hát, ca sĩ và cả player mini bên dưới.

Hôm nay mình chia sẻ một đoạn code full giúp bạn làm một trang "Chart nhạc" ngay trên Blogspot (hoặc bất kỳ website nào), lấy nhạc trực tiếp từ YouTube link.

Share code tạo trình nghe nhạc MP3 đơn giản cho Blogspot
Share Code tạo trình nghe nhạc MP3 đơn giản bằng HTML, CSS, và JavaScript cho Blogspot.

🎧 Tính năng nổi bật:

  • Giao diện giống ZingChart: có rank, ảnh thumb, tiêu đề, ca sĩ.
  • Top 15 bài hát dễ tùy chỉnh.
  • Nghe nhạc trực tiếp từ YouTube với mini player cố định dưới cùng trang.
  • Hỗ trợ play/pause/next/prev, có thanh tiến trình.
  • Thiết kế responsive (đẹp trên PC & mobile).

💻 Hướng dẫn sử dụng:

  1. Vào Blogger → Trang (hoặc Bài đăng) → tạo một trang mới (ví dụ “Chart nhạc”).
  2. Chuyển sang chế độ HTML.
  3. Copy & dán nguyên code bên dưới:

(Code đầy đủ mình để cuối bài để anh em copy luôn.)

🛠️ Tùy chỉnh playlist

Trong phần <script> có đoạn tracksData như sau:

const tracksData = [
  ["dQw4w9WgXcQ","Never Gonna Give You Up","Rick Astley"],
  ["kXYiU_JCYtU","Numb","Linkin Park"],
  ["3JZ_D3ELwOQ","Shape Of You","Ed Sheeran"],
  ...
];

👉 Mỗi dòng tương ứng 1 bài hát:

  • dQw4w9WgXcQ = ID của video YouTube (lấy từ link: https://www.youtube.com/watch?v=dQw4w9WgXcQ).
  • "Tên bài hát" = hiển thị ở danh sách.
  • "Tên ca sĩ" = hiển thị nghệ sĩ.

Bạn chỉ việc thay danh sách này thành 15 bài nhạc yêu thích là xong.

🎨 Tùy chỉnh giao diện

  • Màu nền, màu nút có thể chỉnh trong phần <style>.
  • Mặc định dùng tone xanh - tím kiểu hiện đại.
  • Có hỗ trợ highlight Top 1, Top 2, Top 3 giống Zing MP3.

📌 Demo giao diện

Sau khi dán code, trang sẽ có dạng:

  • Danh sách Top 15 với thumbnail + rank.
  • Mini player cố định bên dưới (giống Zing MP3 player).
  • Bấm play để nghe nhạc trực tiếp từ YouTube.

📥 Full code:

(Đây là code mình đã chỉnh sửa sẵn, copy nguyên khối để dùng ngay)

<!-- ZingChart-like Top 20 (YouTube-based, responsive mobile) -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"/>
<style>
.zing-like {
  max-width: 777px;
  margin: 30px auto;
  background: #fff;
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 8px 24px rgba(16,24,40,0.06);
  font-family: "Inter","Poppins",sans-serif;
  color:#0f172a;
}
.zing-like .title {
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:10px;
}
.zing-like h3 {margin:0;font-size:18px;color:#0b5ed7;}
/* reset ul */
.zing-like .chart-list {
  list-style:none !important;
  margin:0 !important;
  padding:0 !important;
}
.zing-like .chart-list li {margin:0;padding:0;}
/* item row */
.chart-item {
  display:grid;
  grid-template-columns:32px 56px 1fr 40px;
  gap:10px;
  align-items:center;
  padding:10px 6px;
  border-bottom:1px solid #f1f5f9;
  transition:background .2s;
}
.chart-item:hover{background:#f8fbff;}
.rank{
  font-weight:700;font-size:15px;
  width:28px;height:28px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  background:#f1f5f9;color:#111;
}
.rank.top1{background:linear-gradient(90deg,#ffd166,#ff7b00);}
.rank.top2{background:linear-gradient(90deg,#e6e6ff,#bdbdff);}
.rank.top3{background:linear-gradient(90deg,#ffdede,#ffbdbd);}
.thumb{position:relative;width:52px;height:52px;border-radius:6px;overflow:hidden;}
.thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.play-overlay{
  position:absolute;right:4px;bottom:4px;
  font-size:12px;
  color:#fff;
  opacity:0.7;
  text-shadow:0 1px 2px rgba(0,0,0,0.6);
  cursor:pointer;
}
.meta .song{font-weight:600;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.meta .artist{font-size:12px;color:#6b7280;}
.stats{text-align:right;font-size:12px;color:#6b7280;}
/* active row */
.chart-item.playing{background:rgba(14,165,233,0.06);}
.chart-item.playing .play-overlay{opacity:1;color:#22d3ee;}
/* sticky mini player */
.zing-player {
  position:fixed;left:50%;transform:translateX(-50%);
  bottom:12px;z-index:9999;
  width:min(920px,calc(100% - 20px));
  background:#0f172a;
  color:#fff;padding:8px 12px;border-radius:10px;
  display:flex;align-items:center;gap:10px;
  box-shadow:0 10px 30px rgba(0,0,0,0.5);
}
.zing-player img{width:44px;height:44px;border-radius:6px;object-fit:cover;}
.player-info{flex:1;min-width:0;}
.player-info .pt{font-weight:600;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.player-controls{display:flex;gap:6px;}
.player-controls button{background:none;border:0;color:#fff;font-size:14px;cursor:pointer;}
.player-progress{flex-shrink:0;height:4px;background:rgba(255,255,255,0.15);border-radius:3px;width:100px;overflow:hidden;}
.player-progress .bar{height:100%;background:linear-gradient(90deg,#22d3ee,#7c3aed);width:0%}
/* mobile tweak */
@media(max-width:600px){
  .chart-item{grid-template-columns:24px 48px 1fr 28px;gap:6px;padding:8px 4px;}
  .thumb{width:44px;height:44px;}
  .meta .song{font-size:13px;}
  .meta .artist{font-size:11px;}
  .stats{font-size:10px;}
}
</style>
<div class="zing-like" id="zingChartContainer">
  <div class="title">
    <h3><i class="fas fa-chart-line"></i> Zing-Style Top 20</h3>
    <div style="font-size:12px;color:#6b7280">Updated: 05/09/2025</div>
  </div>
  <ul class="chart-list" id="chartList"></ul>
</div>
<div id="yt-player-wrap" style="position:absolute;left:-9999px;top:-9999px;"><div id="yt-player"></div></div>
<div class="zing-player" id="miniPlayer" style="display:none">
  <img id="miniCover" src="" alt="">
  <div class="player-info">
    <div class="pt" id="miniTitle">Chưa có bài hát</div>
    <div style="font-size:12px;color:rgba(255,255,255,0.6)" id="miniArtist">—</div>
  </div>
  <div class="player-controls">
    <button id="miniPrev"><i class="fas fa-backward"></i></button>
    <button id="miniPlay"><i class="fas fa-play"></i></button>
    <button id="miniNext"><i class="fas fa-forward"></i></button>
  </div>
  <div class="player-progress"><div class="bar" id="miniBar"></div></div>
</div>
<script>
(function(){
  const tracksData=[
    ["dQw4w9WgXcQ","Never Gonna Give You Up","Rick Astley"],
    ["kXYiU_JCYtU","Numb","Linkin Park"],
    ["3JZ_D3ELwOQ","Shape Of You","Ed Sheeran"],
    ["YQHsXMglC9A","Hello","Adele"],
    ["fRh_vgS2dFE","Sorry","Justin Bieber"],
    ["hT_nvWreIhg","Counting Stars","OneRepublic"],
    ["OPf0YbXqDm0","Uptown Funk","Bruno Mars"],
    ["iS1g8G_njx8","Let Her Go","Passenger"],
    ["ktvTqknDobU","Radioactive","Imagine Dragons"],
    ["SlPhMPnQ58k","Memories","Maroon 5"],
    ["kOkQ4T5WO9E","Firework","Katy Perry"],
    ["pRpeEdMmmQ0","Waka Waka","Shakira"],
    ["60ItHLz5WEA","Faded","Alan Walker"],
    ["Rb0UmrCXxVA","Bad Guy","Billie Eilish"],
    ["7wtfhZwyrcc","Believer","Imagine Dragons"],
    ["34Na4j8AVgA","God’s Plan","Drake"],
    ["uelHwf8o7_U","Love The Way You Lie","Eminem ft. Rihanna"],
    ["JGwWNGJdvx8","Shape of You (Alt)","Ed Sheeran"],
    ["CevxZvSJLk8","Roar","Katy Perry"],
    ["fLexgOxsZu0","Happy","Pharrell Williams"]
  ];
  const listEl=document.getElementById('chartList');
  const mini=document.getElementById('miniPlayer');
  const miniCover=document.getElementById('miniCover');
  const miniTitle=document.getElementById('miniTitle');
  const miniArtist=document.getElementById('miniArtist');
  const miniPlay=document.getElementById('miniPlay');
  const miniPrev=document.getElementById('miniPrev');
  const miniNext=document.getElementById('miniNext');
  const miniBar=document.getElementById('miniBar');
  let player=null,YTready=false,currentIndex=-1,progTimer=null;
  function buildList(){
    listEl.innerHTML='';
    tracksData.forEach((t,i)=>{
      const [vid,title,artist]=t;
      const thumb=`https://img.youtube.com/vi/${vid}/mqdefault.jpg`;
      const li=document.createElement('li');
      li.className='chart-item';
      li.setAttribute('data-video',vid);
      li.innerHTML=`
        <div class="rank ${i===0?'top1':i===1?'top2':i===2?'top3':''}">${i+1}</div>
        <div class="thumb">
          <img src="${thumb}">
          <div class="play-overlay"><i class="fas fa-play"></i></div>
        </div>
        <div class="meta"><div class="song">${title}</div><div class="artist">${artist}</div></div>
        <div class="stats">#${i+1}</div>`;
      listEl.appendChild(li);
    });
  }
  function loadYouTubeAPI(){
    if(window.YT&&window.YT.Player){onYouTubeIframeAPIReady();return;}
    const s=document.createElement('script');s.src="https://www.youtube.com/iframe_api";document.body.appendChild(s);
    window.onYouTubeIframeAPIReady=onYouTubeIframeAPIReady;
  }
  function onYouTubeIframeAPIReady(){
    YTready=true;
    player=new YT.Player('yt-player',{events:{onStateChange:onPlayerStateChange}});
  }
  function playIndex(i){
    if(i<0||i>=tracksData.length)return;
    const [vid,title,artist]=tracksData[i];
    currentIndex=i;
    [...listEl.children].forEach((li,idx)=>{
      li.classList.toggle('playing',idx===i);
      li.querySelector('.play-overlay i').className=(idx===i?'fas fa-pause':'fas fa-play');
    });
    mini.style.display='flex';
    miniCover.src=`https://img.youtube.com/vi/${vid}/mqdefault.jpg`;

    miniTitle.textContent=title;miniArtist.textContent=artist;
    if(YTready&&player&&player.loadVideoById){player.loadVideoById({videoId:vid});}
    updateMiniPlay(true);
  }
  function updateMiniPlay(isPlaying){miniPlay.innerHTML=isPlaying?'<i class="fas fa-pause"></i>':'<i class="fas fa-play"></i>'; }
  function onPlayerStateChange(e){
    if(e.data===1){updateMiniPlay(true);startProgress();}
    else if(e.data===2){updateMiniPlay(false);stopProgress();}
    else if(e.data===0){nextTrack();}
  }
  function startProgress(){stopProgress();progTimer=setInterval(()=>{if(!player||!player.getDuration)return;miniBar.style.width=(player.getCurrentTime()/player.getDuration()*100)+'%';},500);}
  function stopProgress(){if(progTimer)clearInterval(progTimer);}
  function prevTrack(){playIndex((currentIndex-1+tracksData.length)%tracksData.length);}
  function nextTrack(){playIndex((currentIndex+1)%tracksData.length);}
  function attachEvents(){
    listEl.querySelectorAll('.chart-item').forEach((li,idx)=>{
      li.querySelector('.play-overlay').addEventListener('click',(e)=>{e.stopPropagation();playIndex(idx);});
      li.addEventListener('click',()=>playIndex(idx));
    });
    miniPlay.addEventListener('click',()=>{if(!player)return;player.getPlayerState()===1?player.pauseVideo():player.playVideo();});
    miniPrev.addEventListener('click',prevTrack);
    miniNext.addEventListener('click',nextTrack);
  }
  buildList();loadYouTubeAPI();setTimeout(attachEvents,300);
})();
</script>

Kết

Vậy là chỉ với vài phút, bạn đã có một trang ZingChart mini ngay trong Blogspot, vừa để nghe nhạc, vừa để show danh sách bài hát yêu thích.

Anh em thử áp dụng và comment cảm nhận nhé!

Tăng tương tác MXH

Like, sub, view, comment, share livestream…

  • Instagram, TikTok, YouTube, Twitter, Shopee
  • Dịch vụ nhanh – ổn định

🎁 Mã giảm giá: đang cập nhật

Khám phá

Tài khoản Premium

CapCut, Canva, ChatGPT, Semrush, HMA, Google Ads…

  • Kích hoạt nhanh – bảo hành rõ
  • Đa dạng gói

🎁 Mã giảm giá: đang cập nhật

Mua ngay

Template Blogspot

Thiết kế chuẩn SEO, tối ưu tốc độ & giao diện.

  • Nhiều mẫu cho blog, shop
  • Tùy biến dễ

🎁 Mã giảm giá: anhtrainang (-10%)

Xem mẫu
Tags: Blogspot Code CSS HTML Javascript Pages Tips
Chia sẻ:
DMCA.com Protection Status
Đã sao chép link!

Bài viết liên quan

Nhận xét (2)

Hiển thị

Đăng nhận xét