July's Music Player

Here is my music player that I wrote with very little knowledge of JavaScript.

Keep in mind that I am not the best with JS, so it may not be the best, but it works.

I tried my best to comment on what each thing does, but if there's any problems, just let me know what it is via discord or send me an email.

You can also test out the music player on this page if you'd like.

I only ask to give credit if you use it

---

HTML

                        
<div id="music-player-container">
    <div class="music-player">
        <div class="song-info">
            <span id="song-title">Title</span> - <span id="song-artist">Artist</span>
        </div>
        <button id="prev" title="Previous Song">◁</button>
        <button id="play-pause" title="Play">▶</button>
        <button id="next" title="Next Song">▷</button>
        <input type="range" id="volume" min="0" max="1" step="0.01" value="0.2" title="Volume"> <!--The default volume is 20%, but you can change it to whatever you'd like-->
        <span id="volume-label">20%</span>
        <input type="range" id="progress" min="0" max="1" value="0" title="Progress">
    </div>
    <button id="toggle-button" title="Collapse">❰</button>
</div>
                        
                    

Then at the bottom of your page, put this just before your </body> tag

<script src="musicplayer.js">

CSS

                        
#music-player-container {
    position: fixed;
    bottom: 10px;
    left: 0;
    display: flex;
    align-items: center;
    transition: transform 0.3s ease-in-out;
}

.music-player {
    display: flex;
    align-items: center;
    gap: 15px;
    background-color: ; /* Use whatever color you want */
    padding: 10px 10px;
    border: ; /* Make the border however you want */
}

.music-player button {
    background-color: ; /* Previous, Play/Pause, and Next button color */
    color: ; /* Symbol colors */
    border: ; /* Button border */
    padding: 10px;
    font-size: 18px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
}
.music-player button:hover {
    background-color: ; /* Button hover background */
    opacity: 50%;
    color: ; /* Button hover text */
}
.music-player input[type="range"] {
    appearance: none;
    width: 150px;
    height: 8px;
    background: ; /* Progress and Volume slider background */
    outline: ; /* Change its color */
    margin: 0;
}
.music-player input[type="range"]::-webkit-slider-thumb {
    appearance: none;
    width: 15px;
    height: 15px;
    background: ; /* Mobile slider color, I think */
    cursor: pointer;
}
#volume-label {
    font-size: 14px;
    color: ; /* Volume percentage */
}

#song-info {
    display: flex;
    flex-direction: column;
    margin-right: 15px;
    font-size: 14px;
    color: ; /* Song and Artist labels */
    text-align: center;
}
#song-title {
    font-weight: bold;
}
#song-artist {
    font-style: italic;
}

/* Button to hide the player */
#toggle-button {
    background-color: ;
    color: ;
    border: ;
    padding: 10px;
    font-size: 18px;
    cursor: pointer;
    margin-left: 5px;
}
#toggle-button:hover {
    background-color: ;
    color: ;
}
/* Button end */
                        
                    

JavaScript

                        
// Song list
const songs = [
    { title: "Song Title", artist: "Artist", file: "song1.mp3" },
    { title: "Song Title", artist: "Artist", file: "song2.mp3"}
  ];
  
let currentIndex = 0;
let isPlaying = false; // Tracks play/pause state
const audio = new Audio(songs[currentIndex].file);
audio.volume = 0.2; // Default volume

const songTitle = document.getElementById("song-title");
const songArtist = document.getElementById("song-artist");
const playPauseButton = document.getElementById("play-pause");
const prevButton = document.getElementById("prev");
const nextButton = document.getElementById("next");
const volumeSlider = document.getElementById("volume");
const volumeLabel = document.getElementById("volume-label");
const progressBar = document.getElementById("progress");
const toggleButton = document.getElementById("toggle-button");
const musicPlayerContainer = document.getElementById("music-player-container");

// Autoplay on page load
window.addEventListener("load", () => {
  updateSongInfo();
  audio.play().then(() => {
    isPlaying = true;
    playPauseButton.textContent = "||"; // Pause symbol
  }).catch((error) => {
    console.warn("Autoplay blocked by browser. User interaction required.");
  });
});

// Update the song title and artist display
function updateSongInfo() {
  songTitle.textContent = songs[currentIndex].title;
  songArtist.textContent = songs[currentIndex].artist;
}

// Handle play/pause toggle
playPauseButton.addEventListener("click", () => {
  if (isPlaying) {
    audio.pause();
    playPauseButton.textContent = "▶"; // Play symbol
    isPlaying = false;
  } else {
    audio.play();
    playPauseButton.textContent = "||"; // Pause symbol
    isPlaying = true;
  }
});

// Previous song
prevButton.addEventListener("click", () => {
  currentIndex = (currentIndex - 1 + songs.length) % songs.length; // Wrap to last song if at the start
  loadAndPlaySong();
});

// Next song
nextButton.addEventListener("click", () => {
  currentIndex = (currentIndex + 1) % songs.length; // Wrap to first song if at the end
  loadAndPlaySong();
});

// Volume control
volumeSlider.addEventListener("input", () => {
  audio.volume = volumeSlider.value;
  volumeLabel.textContent = `${Math.round(volumeSlider.value * 100)}%`;
});

// Song progress control
progressBar.addEventListener("input", () => {
  audio.currentTime = (progressBar.value / 100) * audio.duration;
});

// Update the progress bar with the song's progress
audio.addEventListener("timeupdate", () => {
  if (audio.duration) {
    progressBar.value = (audio.currentTime / audio.duration) * 100;
  }
});

// Automatically move to the next song when the current song ends
audio.addEventListener("ended", () => {
  currentIndex = (currentIndex + 1) % songs.length; // Wrap to the first song if at the end
  loadAndPlaySong();
});

// Load a new song and play it
function loadAndPlaySong() {
  audio.src = songs[currentIndex].file;
  updateSongInfo();
  audio.play();
  isPlaying = true;
  playPauseButton.textContent = "||"; // Pause symbol
}

// Collapse/Expand the music player
let isCollapsed = false;

toggleButton.addEventListener("click", () => {
  if (isCollapsed) {
    musicPlayerContainer.style.transform = "translateX(0)";
    toggleButton.textContent = "❰"; // Show collapse symbol
  } else {
    musicPlayerContainer.style.transform = "translateX(-95%)";
    toggleButton.textContent = "❱"; // Show expand symbol
  }
  isCollapsed = !isCollapsed;
});