Code for MP3 player

CSS:

#mp3-container {    /* This is the overall wrapper around your MP3. */
     position: relative;
     height: 300px;
     width: 260px;
     padding: 0px;
   }
   
   #song-container {        /* This is the "screen" */
     font-size:10px;
     display:flex;
     flex-direction:row;
     position:relative;
     height:40%;
     width:88%;
     color:white;
     text-shadow: 0 0 10px #00ffca;
   }
   .yugioh {      /* this is the border image for the "screen" or song-container */
     color: #081008;
     background: #9cbdb5;
     text-shadow: 0.04em 0.04em 0 #39d67b;
     padding: 12px;
     background-clip: padding-box;
     border-image-slice: 10 8 8 7;
     border-image-width: 10px 8px 8px 7px;
     border-image-repeat: round;
     border-style: solid;
     border-color: transparent;
     image-rendering: pixelated;
     border-image-source: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAATCAMAAACuuX39AAAAElBMVEUAAAA51nvn/9a9/5QAAAAIrYRUyCIXAAAAAXRSTlMAQObYZgAAAFdJREFUeNqV0EECQEAAQtGqmftfWQGw0u4/AAC8DWhLcidV0uY+V9pjX6TQtj0rB1hShd4gjcoNAPwAf+F702m1L4g4fb1YJBuF97eY969t8/4/3P78sQWWugKRK8AJxgAAAABJRU5ErkJggg==");
   }

.blog-post {   /* this is how the songs are able to cycle through. this code originally came from how i coded my og blog... it's imperfect but functions. */
     position: absolute;
     top: 5px;
     left: 5px;
     right: 5px;
     opacity: 0;
     visibility: hidden;
     transition: opacity 0.3s ease; 
   }

.blog-post.active {
     position: relative;
     top: 0;
     left: 0;
     opacity: 1;
     visibility: visible;
   }

.blog-post img {   /* this is the styling of your album cover images. if you want them to be the true colors, remove the mix-blend-mode. */
     width: 40%;  
     height: 65%;     
     display: block;   
     margin-top: 10px;
     margin-left:5px;
     border-radius: 5px; 
     mix-blend-mode: luminosity;
   }

.custom-player { /* the actual player styling. The colors come from the background image gradient.  */
     display:flex;
     flex-direction:column;
     justify-content:center;
     align-items:center;
     height:300px;
     width: 210px;
     padding: 15px;
     margin: 10px auto;
     border-radius: 20px;
     
     background-image:
     linear-gradient(
         rgba(255,255,255,0.6),
         rgba(255,255,255,0.1)
     ),
     linear-gradient(
         #DAFFCC,
         lightgreen,
         #74EDE5
     );
     
     border:1px solid rgba(0,86,179,.5);
     box-shadow: 0 4px 10px rgba(0,0,0,.2);
     text-align:center;
   }

.player-button {
     font-family:"MS UI Gothic", sans-serif;
     font-weight:bold;
     font-size:14px;
     color:green;   /* change this color to adjust the color of the actual play/pause icon */
     padding:10px 10px;
     width: 50px;
     height:50px;
     border-radius:15px;
     border:none;
     cursor:pointer;
     background-image:
     linear-gradient(
         rgba(255,255,255,.6),
         rgba(255,255,255,.1)
     ),
     linear-gradient(
         #DAFFCC,
         lightgreen,
         #74EDE5
     );
     box-shadow: 0 2px 5px rgba(0,0,0,.2);
   }

.player-button:hover {
     background-image:
     linear-gradient(
         rgba(255,255,255,.8),
         rgba(255,255,255,.3)
     ),
     linear-gradient(
         #74EDE5,
         lightgreen
     );
   }

.progress-container {
     width:90%;
     height:12px;
     margin:15px auto;
     background:#d5d5d5; /*can change the gray bar to something else if youd like */
     border-radius:10px;
     border:2px inset white;
     overflow:hidden;
   }

#progressBar {
     width:0%;
     height:100%;
     background:
     linear-gradient(    /* can change color of the progress bar */
         90deg,
         #155999,
         #74EDE5
     );
   }

.time-display {
     font-size:12px;
     color:#155999;
     text-shadow:0 0 3px white;
   }

HTML:

<div id="mp3-container">
    <div class="blog-post active">
        <div class="custom-player">
            
            <div id="song-container" class="yugioh"> 
                <h3 id="songTitle">MP3 player - click next</h3><br>  
                <img id="albumArt" src="https://i.pinimg.com/736x/1f/fb/a9/1ffba97d0d7b8f5d28e9efcdba3c9932.jpg" alt="Album Art">   
            </div>
    
            <audio id="player">
                <source id="playerSource" src="" type="audio/mpeg">
            </audio>

<div class="time-display">
                <span id="currentTime">0:00</span> / <span id="duration">0:00</span>
            </div> 
            
            <div style="display:flex; gap:5px; margin-top:5px;">
            <button id="prevButton" class="player-button">⏮</button>
                <button id="playButton" class="player-button">▶</button>
                <button id="nextButton" class="player-button">⏭</button>
            </div>
 <a href="https://digisphere.neocities.org/" style="font-size:10px;margin-top:20px;"> code made by Freezie </a>  
        </div>
 </div>

</div>

JAVASCRIPT:

//playlist
const playlist = [  // your playlist! I have a few songs here already as reference, but they can be easily replaced with the title, album cover, and mp3 file for your song. 
// it should be really simple to add more songs to your playlist. just copy and past a new song from one '{' to another '}', and add a comma between new songs. if you miss a piece it breaks the whole player.. fair warning

{
        title: 'Muse - Stockholm Syndrome',
        image: 'https://images.fineartamerica.com/images/artworkimages/mediumlarge/3/6-best-muse-top-music-fatih-fatan.jpg',
        mp3: 'https://file.garden/afdrnxeC934UfWnO/Muse%20-%20Stockholm%20Syndrome%20(2).mp3'
    },
   
    {
        title: 'Clark Rainbow - Chainsaw',
        image: 'https://images.genius.com/125a1141e69e1f78df92dc22e00e3f8f.1000x1000x1.png',
        mp3: 'https://file.garden/afdrnxeC934UfWnO/Clark%20Rainbow%20-%20Chainsaw%20(official%20video).mp3'
    },
   
    {
        title: 'Iris Bilinsky - The Chamber Pot was Full',
        image: 'https://tse1.mm.bing.net/th/id/OIP.783iuGTnA02-zqaI_HHRrgHaHa?r=0&rs=1&pid=ImgDetMain&o=7&rm=3',
        mp3: 'https://file.garden/afdrnxeC934UfWnO/Iris%20Bilinsky%20-%20The%20Chamber%20Pot%20Was%20Full.mp3'
    },
  
    {
        title: 'Song Four',
        image: 'YOUR_IMAGE_HERE',
        mp3: 'YOUR_MP3_HERE.mp3'
    },
    
     {
        title: 'Song Five',
        image: 'YOUR_IMAGE_HERE',
        mp3: 'YOUR_MP3_HERE.mp3'
    },
];

let currentIndex = 0;

const player = document.getElementById("player");
const source = document.getElementById("playerSource");
const playButton = document.getElementById("playButton");
const nextButton = document.getElementById("nextButton");
const progressBar = document.getElementById("progressBar");
const currentTimeDisplay = document.getElementById("currentTime");
const durationDisplay = document.getElementById("duration");

function loadSong(index) {
    currentIndex = index;
    const song = playlist[currentIndex];

document.getElementById("songTitle").textContent = song.title;
    document.getElementById("albumArt").src = song.image;

source.src = song.mp3;
    player.load();
    player.play();
    playButton.textContent = "❚❚";
}

nextButton.addEventListener("click", () => {
    currentIndex = (currentIndex + 1) % playlist.length; 
    loadSong(currentIndex);
});

playButton.addEventListener("click", () => {
    if (player.paused) {
        player.play();
        playButton.textContent = "❚❚";
    } else {
        player.pause();
        playButton.textContent = "▶";
    }
});
const prevButton = document.getElementById("prevButton");

prevButton.addEventListener("click", () => {

currentIndex = (currentIndex - 1 + playlist.length) % playlist.length;
    loadSong(currentIndex);
});
player.addEventListener("loadedmetadata", () => {
    durationDisplay.textContent = formatTime(player.duration);
});

player.addEventListener("timeupdate", () => {
    let percent = (player.currentTime / player.duration) * 100;
    progressBar.style.width = percent + "%";
    currentTimeDisplay.textContent = formatTime(player.currentTime);
});

player.addEventListener("ended", () => {
    currentIndex = (currentIndex + 1) % playlist.length;
    loadSong(currentIndex);
});

function formatTime(seconds) {
    let minutes = Math.floor(seconds / 60);
    let secs = Math.floor(seconds % 60);
    if (secs < 10) {
        secs = "0" + secs;
    }
    return minutes + ":" + secs;
}

MP3 player - click next

0:00 / 0:00

code made by Freezie

send a tip :3