Code Nghe Nhạc mp3 Từ Video Youtube

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:

Vào Blogger → Trang (hoặc Bài đăng) → tạo một trang mới (ví dụ “Chart nhạc”).
Chuyển sang chế độ HTML.
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ệnMà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.
Nghe Demo bên dưới

📥 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 href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet"></link>
<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="color: #6b7280; font-size: 12px;">Updated: 05/09/2025</div>
  </div>
  <ul class="chart-list" id="chartList"></ul>
</div>
<div id="yt-player-wrap" style="left: -9999px; position: absolute; top: -9999px;"><div id="yt-player"></div></div>
<div class="zing-player" id="miniPlayer" style="display: none;">
  <img alt="" id="miniCover" src="" />
  <div class="player-info">
    <div class="pt" id="miniTitle">Chưa có bài hát</div>
    <div id="miniArtist" style="color: rgba(255, 255, 255, 0.6); font-size: 12px;">—</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>