Trang chủ Thư viện Code playlist mp3 giản đơn

Code playlist mp3 giản đơn

Thứ Năm, tháng 10 30, 2025
A+ A- Print Email

ANHLEVAN'S chia sẻ đến các bạn code playlist mp3 giản đơn

Các bạn khai báo lại phần const playlist = [ của bạn trước khi đưa vào website/blog của bạnanhlevan2021
Copy
<!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">🔊&nbsp; <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>

*** Chúc các bạn thành công ***

☞ 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.

Tags

Đă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.

Đăng ký: Đăng Nhận xét (Atom)
[blogger][facebook]
ANHLEVAN'S © 2016. All Rights Reserved.
Admin | Powered by Blogger

Author Name

{facebook#https://www.facebook.com/anhlevan2021} {twitter#https://x.com/Anhlevan_tw} {pinterest#https://www.pinterest.com/anhlevantk} {youtube#https://www.youtube.com/user/Anhlevan}

Anhlevan

Liên hệ với chúng tôi

Tên

Email *

Thông báo *

Được tạo bởi Blogger.