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>
        <button id="shuffle" title="Shuffle">⤭</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

                        
// NEW! If you want the music player to be disabled when viewing your site on mobile devices,
// uncomment this portion below (please see end of file for important info):
// const isMobile = /Mobi|Android|iPhone|iPad|iPod|Windows Phone/i.test(navigator.userAgent);
//
// if (!isMobile) {
  // Song list
  const songs = [
    { title: "Title", artist: "Artist", file: "path/to/music/file.mp3" },
    { title: "Title", artist: "Artist", file: "path/to/music/file.mp3" },
    { title: "Title", artist: "Artist", file: "path/to/music/file.mp3" },
    { title: "Title", artist: "Artist", file: "path/to/music/file.mp3" },
    { title: "Title", artist: "Artist", file: "path/to/music/file.mp3" }
  ];
  
  let currentIndex = Math.floor(Math.random() * songs.length); // Random starting song
  let isPlaying = false; // Tracks play/pause state
  let isShuffleOn = false; // Tracks shuffle state NEW!!
  let shuffledPlaylist = [...songs]; // Copy of original playlist for shuffling
  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");
  const shuffleButton = document.getElementById("shuffle");

  // Shuffle button
  shuffleButton.textContent = "⤭"; // Shuffle symbol
  shuffleButton.style.opacity = "0.5"; // Indicates shuffle is off initially

  // Collapse the music player on load
  let isCollapsed = false; // Change to 'true' if you want the music player to be collapsed on page load
  musicPlayerContainer.style.transform = "translateX(0%)"; // Change to 'translateX(-95%)' for collpased
  toggleButton.textContent = "❱"; // Show expand symbol

  // 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", () => {
    if (isShuffleOn) {
      // In shuffle mode, go to a random previous song
      currentIndex = Math.floor(Math.random() * songs.length);
    } else {
      currentIndex = (currentIndex - 1 + songs.length) % songs.length;
    }
    loadAndPlaySong();
  });

  // Next song
  nextButton.addEventListener("click", () => {
    if (isShuffleOn) {
      // In shuffle mode, go to a random next song
      currentIndex = Math.floor(Math.random() * songs.length);
    } else {
      currentIndex = (currentIndex + 1) % songs.length;
    }
    loadAndPlaySong();
  });

  // Toggle shuffle
  shuffleButton.addEventListener("click", () => {
    isShuffleOn = !isShuffleOn;
    if (isShuffleOn) {
      shuffleButton.style.opacity = "1"; // Bright indicates shuffle is on
      // Create a shuffled playlist (excluding current song)
      shuffledPlaylist = [...songs];
      const currentSong = shuffledPlaylist.splice(currentIndex, 1)[0];
      shuffleArray(shuffledPlaylist);
      shuffledPlaylist.unshift(currentSong); // Put current song first
    } else {
      shuffleButton.style.opacity = "0.5"; // Dim indicates shuffle is off
    }
  });

  // Helper function to shuffle array (Fisher-Yates algorithm)
  function shuffleArray(array) {
    for (let i = array.length - 1; i > 0; i--) {
      const j = Math.floor(Math.random() * (i + 1));
      [array[i], array[j]] = [array[j], array[i]];
    }
    return array;
  }

  // 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", () => {
    if (isShuffleOn) {
      currentIndex = Math.floor(Math.random() * songs.length);
    } else {
      currentIndex = (currentIndex + 1) % songs.length;
    }
    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
  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;
  });
} // IMPORTANT! Add this closing curly bracket for the mobile disabler to work!!