Code for MP3 player

CSS:

.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%;  
     min-width:80px;
     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;
   }
    </style>

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>

JAVASCRIPT:

{
        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.mp3'
    },
    {
        title: 'Clark Rainbow - Chainsaw',
        image: 'https://images.genius.com/125a1141e69e1f78df92dc22e00e3f8f.1000x1000x1.png',
        mp3: 'https://file.garden/afdrnxeC934UfWnO/Clark%20Rainbow.chainsaw.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/IrisBilinsky.TheChamberPotWasFull.mp3'
    },
    {
        title: 'Nervous - Haze',
        image: 'https://file.garden/afdrnxeC934UfWnO/haze%20by%20nervous.JPG',
        mp3: 'https://file.garden/afdrnxeC934UfWnO/Haze%20(Acoustic%20Version).mp3'
    },
    {
      title: 'im eating a chicken sandwich - empty parking lot',
      image: 'https://file.garden/afdrnxeC934UfWnO/ab67616d0000b2730fe9e60a9c4f198691b5eea0.jpg',
      mp3: 'https://file.garden/afdrnxeC934UfWnO/im%20eating%20a%20chicken%20sandwich.mp3'
    }
];

let currentIndex = 4;

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", () => {
    // Subtract 1, and wrap around to the end of the playlist if it goes below 0
    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);
    
});
progressBar.parentElement.addEventListener("click", (e) => {
    const progressContainer = progressBar.parentElement;
    const rect = progressContainer.getBoundingClientRect();

const clickPosition = e.clientX - rect.left;
    const percentage = clickPosition / rect.width;

player.currentTime = percentage * player.duration;
});

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

player.addEventListener("loadedmetadata", () => {
    console.log("METADATA LOADED");
    console.log("Duration:", player.duration);
});

player.addEventListener("canplay", () => {
    console.log("CAN PLAY");
});
</script>

MP3 player - click next

0:00 / 0:00

code made by Freezie

-send a tip :3
-get MP3 files here