Now Playing

Song Title

Artist

0:00 0:00

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
                <link rel="stylesheet" href="yourcssurl.css">
                <div class="player">
                    <audio id="audio"></audio>
                    <div class="screen">
                        <div class="now-playing-container">
                            <span class="now-playing">Now Playing</span>
                            <div class="icons">
                                <i class="fa-solid fa-battery-three-quarters"></i>
                            </div>
                        </div>
                        <div class="current-song-container">
                            <img id="album-art" src="">
                            <div id="song-details">
                                <div class="scroll-container">
                                    <span id="current-song" class="current-song">
                                        <span class="song-title" id="song-title">Song Title</span>
                                    </span>
                                </div>
                                <span class="song-artist">Artist</span>
                                <div class="progress-container">
                                    <div class="progress">
                                        <div id="progress-bar"></div>
                                    </div>
                                    <div class="time-container">
                                        <span id="current-time">0:00</span> 
                                        <span id="total-time">0:00</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="song-list-container" id="song-list-container">
                            <ul class="song-list" id="song-list">
                                <!-- Songs will be dynamically populated here -->
                            </ul>
                        </div>
                    </div>
                    <div class="controls">
                        <button id="list-icon"><i class="fas fa-list"></i></button>
                        <button id="previous"><i class="fas fa-backward"></i></button>
                        <button id="play-pause"><i class="fas fa-play"></i></button>
                        <button id="next"><i class="fas fa-forward"></i></button>
                        <button id="shuffle"><i class="fas fa-random"></i></button>
                    </div>
                </div>
                <script src="yourscripturl.js"></script>

body {
    font-family: 'Courier New';
    font-weight: bold;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    background-color: transparent;
    overflow: hidden;
   
}

.player {
    background: #FE9E62; /* Main Color */
    border: solid 4px #FE9E62; /* Main Color */
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.514);
    padding: 10px;
    width: 170px;
    height: 380px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center; 
}

.highlight {
    background-color: #FE9E62; /* Main Color */
    color: white;
}

.screen {
    background: #303030;
    border: solid 6px #000000; 
    border-radius: 8px;
    padding: 0px;
    height: 220px; 
    width: 170px; 
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start; 
    overflow: hidden;
    position: relative; 
}

#album-art {
    width: 100%; 
    height: 140px; 
    object-fit: cover; 
    display: block;
    margin-top: 15px; 
}

.now-playing-container {
    position: relative; 
    width: 100%; 
    text-align: center;
}

.now-playing {
    display: none; 
    position: absolute; 
    top: 2px; 
    left: 50%; 
    transform: translateX(-50%); 
    font-family: 'Courier New';
    font-size: 12px; 
    color: #fff; 
}


.icons {
    position: absolute;
    top: 0;
    right: -3px; 
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 5px;
    font-size: 12px; 
    font-family: 'Courier New';
    color: #fff; 
}

.icons i {
    margin-left: 8px; 
}

.current-song-container {
    display: flex;
    flex-direction: column; 
    align-items: center;
    margin-top: 2px; 
}

#current-song {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    margin-top: 2px; 
}

.song-title {
    font-family: 'Courier New';
    font-weight: bold;
    font-size: 12px; 
    color: #fff; 
    white-space: nowrap;
    text-align: center; 
    overflow: hidden;
    position: relative;
}

.scroll-container {
    overflow: hidden;
    width: 170px; 
    margin: 0 auto; 
}

.scroll-text {
    display: inline-block;
    animation: scroll 9s linear infinite; 
    white-space: nowrap; 
}

@keyframes scroll {
    0% { transform: translateX(100%); }
    100% { transform: translateX(-100%); }
}


.song-artist {
    font-family: 'Courier New';
    font-weight: bold;
    font-size: 10px; 
    color: #fff; 
    text-align: center; 
    width: 100%; 
    display: block; 
    margin-top: 5px; 
}
.progress-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 1px; 
    
}

.progress {
    position: relative;
    height: 6px; 
    background: #e0e0e0;
    border-radius: 2px;
    overflow: hidden;
    
    width: 160px; 
    
}

#progress-bar {
    height: 100%;
    background: #62BEFF;
    width: 0;
    transition: width 0.2s;
}

.time-container {
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding: 0 20px; 
    margin-top: 5px; 
    font-size: 9px;
    color: #ccc; 
}

#current-time, #total-time {
    font-family: 'Courier New';
}

.song-list-container {
    position: absolute;
    top: 0;
    left: 0;
    background: #fff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    width: 100%;
    height: 100%;
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease, visibility 0.5s ease;
    z-index: 10;
}

.song-list-container.show {
    opacity: 1;
    visibility: visible;
}

.song-list {
    list-style-type: none;
    padding: 0;
    margin: 0;
    font-family: 'Courier New';
    font-size: 12px;
    color: #000;
}

.song-list li {
    padding: 5px;
 
    transition: background 0.3s ease;
}

.song-list li:hover {
    background: #62BEFF;
}

.song-list-container::-webkit-scrollbar {
    width: 12px;
}

.song-list-container::-webkit-scrollbar-track {
    background: #e0e0e0;
    border-radius: 10px;
}

.song-list-container::-webkit-scrollbar-thumb {
    background-color: #62BEFF;
    border-radius: 10px;
    border: 3px solid #fff;
}

.song-list-container::-webkit-scrollbar-thumb:hover {
    background-color: #62BEFF;
}

.song-list-container::-webkit-scrollbar-thumb:active {
    background-color: #62BEFF;
}

.song-list-container {
    scrollbar-width: thin;
    scrollbar-color: #62BEFF #e0e0e0;
}

.song-list-container:hover {
    scrollbar-color: #62BEFF #e0e0e0;
}

.song-list-container:active {
    scrollbar-color: #62BEFF #e0e0e0;
}


.controls {
    position: relative;
    width: 140px; 
    height: 140px; 
    margin: auto; 
    background: #ffffff; 
    border-radius: 50%; 
}

button {
    position: absolute; 
    background: transparent; 
    color: #919191;
    border: none;
    padding: 2px;
    border-radius: 50%; 
  
    display: flex;
    align-items: center;
    justify-content: center;
    height: 25px;
    width: 25px;
}

button#list-icon {
    top: 5px; 
    left: 50%;
    transform: translateX(-50%);
    
}

button#play-pause {
    top: 50%;
    left: 50%;
    width: 70px; 
    height: 70px; 
    transform: translate(-50%, -50%);
    color: #ffffff;
    background: #FE9E62; /* Main Color */
}

button#next {
    top: 50%;
    right: 5px;
    transform: translateY(-50%);
}

button#previous {
    top: 50%;
    left: 5px;
    transform: translateY(-50%);
}

button#shuffle {
    bottom: 5px;
    left: 50%;
    transform: translateX(-50%);
}

button:hover {
  color: #ffffff;
    background: #FE9E62;
}

button i {
    font-size: 1em;
}

button.active {
  color: #ffffff;
    background: #FE9E62; /* Main Color */
}

                document.addEventListener('DOMContentLoaded', () => {
    const audio = document.getElementById('audio');
    const playPauseBtn = document.getElementById('play-pause');
    const shuffleBtn = document.getElementById('shuffle');
    const previousBtn = document.getElementById('previous');
    const nextBtn = document.getElementById('next');
    const nowPlayingContainer = document.querySelector('.now-playing-container');
    const nowPlayingText = document.querySelector('.now-playing');
    const currentSongContainer = document.querySelector('.current-song-container');
    const songTitle = document.getElementById('song-title');
    const songArtist = document.querySelector('.song-artist');
    const albumArt = document.getElementById('album-art');
    const songListContainer = document.getElementById('song-list-container');
    const songList = document.getElementById('song-list');
    const progressBar = document.getElementById('progress-bar');
    const progressContainer = document.querySelector('.progress');
    const currentTimeDisplay = document.getElementById('current-time');
    const totalTimeDisplay = document.getElementById('total-time');
    const songs = [
      {    
    title: "",
    src: "",
    artist: "",
   albumArt: "",
  },
   
    {
    title: "",
    src:  "",
    artist: "",
    albumArt: "",
  },
  
  {
    title: "",
    src:  "",
    artist: "",
    albumArt: "",
  },  
    // add more songs
      
    ];

    let currentIndex = 0;
    let isPlaying = false;
    let isShuffle = false;

    function loadSong(index) {
        audio.src = songs[index].src;
        albumArt.src = songs[index].albumArt;
        songTitle.textContent = songs[index].title;
        songArtist.textContent = songs[index].artist;

        // Ensure scrolling functionality
        requestAnimationFrame(() => {
            if (songTitle.scrollWidth > 170) {
                songTitle.classList.add('scroll-text');
            } else {
                songTitle.classList.remove('scroll-text');
            }
        });

        audio.addEventListener('loadedmetadata', () => {
            totalTimeDisplay.textContent = timeFormatter(audio.duration);
        });
    }

    function playSong(index) {
        loadSong(index);
        audio.play();
        playPauseBtn.innerHTML = '<i class="fas fa-pause"></i>';
        isPlaying = true;
        songListContainer.classList.remove('show'); // Close the song list container
        nowPlayingText.style.display = 'block'; // Show the "Now Playing" text
    }

    function hideNowPlaying() {
        nowPlayingContainer.classList.remove('show-now-playing');
        songTitle.textContent = '';
        songArtist.textContent = '';
        nowPlayingText.style.display = 'none'; // Hide the "Now Playing" text
    }

    playPauseBtn.addEventListener('click', () => {
        if (isPlaying) {
            audio.pause();
            playPauseBtn.innerHTML = '<i class="fas fa-play"></i>';
            isPlaying = false;
            nowPlayingText.style.display = 'none'; // Hide the "Now Playing" text when paused
        } else {
            audio.play(); // Resume from current time instead of restarting
            playPauseBtn.innerHTML = '<i class="fas fa-pause"></i>';
            isPlaying = true;
            nowPlayingText.style.display = 'block'; // Show the "Now Playing" text
        }
    });

    document.getElementById('list-icon').addEventListener('click', () => {
        songListContainer.classList.toggle('show');
    });

    songs.forEach((song, index) => {
        const li = document.createElement('li');
        li.textContent = `${song.title} by ${song.artist}`;
        li.addEventListener('click', () => {
            currentIndex = index;
            playSong(index);
        });
        songList.appendChild(li);
    });

    shuffleBtn.addEventListener('click', () => {
        isShuffle = !isShuffle;
        shuffleBtn.classList.toggle('active', isShuffle);
    });

    previousBtn.addEventListener('click', () => {
        if (isShuffle) {
            currentIndex = Math.floor(Math.random() * songs.length);
        } else {
            currentIndex = (currentIndex > 0) ? currentIndex - 1 : songs.length - 1;
        }
        playSong(currentIndex);
    });

    nextBtn.addEventListener('click', () => {
        if (isShuffle) {
            currentIndex = Math.floor(Math.random() * songs.length);
        } else {
            currentIndex = (currentIndex < songs.length - 1) ? currentIndex + 1 : 0;
        }
        playSong(currentIndex);
    });

    // Update time and progress
    audio.addEventListener('timeupdate', () => {
        const progress = (audio.currentTime / audio.duration) * 100;
        progressBar.style.width = `${progress}%`;
        currentTimeDisplay.textContent = timeFormatter(audio.currentTime);
    });

    // If user clicks on progress bar
    progressContainer.addEventListener('click', (event) => {
        const coordStart = progressContainer.getBoundingClientRect().left;
        const coordEnd = event.clientX;
        const progress = (coordEnd - coordStart) / progressContainer.offsetWidth;

        // Set width to progress
        progressBar.style.width = progress * 100 + "%";

        // Set time
        audio.currentTime = progress * audio.duration;

        // Play
        audio.play();
        playPauseBtn.innerHTML = '<i class="fas fa-pause"></i>';
        isPlaying = true;
    });

    audio.addEventListener('ended', () => {
        currentIndex = (currentIndex < songs.length - 1) ? currentIndex + 1 : 0;
        playSong(currentIndex);
    });

    // Initial load
    loadSong(currentIndex);

    // Format time in minutes and seconds
    function timeFormatter(time) {
        const minutes = Math.floor(time / 60);
        const seconds = Math.floor(time % 60).toString().padStart(2, '0');
        return `${minutes}:${seconds}`;
    }
});