MUSIC LEVAN chia sẻ đến các bạn code playlist mp3 đơn giản

Các bạn có thể đưa vào website/blog của mình
<!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
Code playlist mp3 đơn giản

MUSIC LEVAN chia sẻ đến các bạn code playlist mp3 đơn giản

Post a Comment

Đăng nhận xét

Thơ Nhạc Hoạ

Tình Ca Lam Phương

Biểu mẫu liên hệ
