Simple Music Player with previous and next song options

Simple Music Player developed using HTML, CSS and JavaScript. Music player has the options to play, stop and songs title. Move previous and next songs using navigation icons. Demo and Download available.

HTML Snippet

<div class="c-containter">
        <div class="music-container">
            <section class="album-cover">
                
                <button class="arrow left" id="prev">
                    <img src="https://snowleo208.github.io/100-Days-of-Code/7.%20Music%20Player/img/arrow_left.svg" alt="Next Music">
                </button>
                <img src="http://res.cloudinary.com/dkzj4hdmd/image/upload/v1536400483/cover_yz2mak.jpg" class="cover" alt="From One To Nine by Marcel Pequel">
                
                <button class="arrow right" id="next">
                    <img src="https://snowleo208.github.io/100-Days-of-Code/7.%20Music%20Player/img/arrow_right.svg" alt="Next Music">
                </button>
            </section>
            <section class="music-player">
                <h1 class="music-player__title"></h1>
                <h2 class="music-player__author"></h2>
                <div class="music-time">
                    <p class="music-time__current"></p>
                    <p class="music-time__last"></p>
                </div>
                <div class="music-bar" id="progress">
                    <div id="length"></div>
                </div>
                <div class="music-order">
                    <div class="music-order__loop is-loop" id="loop">
                        <img src="https://snowleo208.github.io/100-Days-of-Code/7.%20Music%20Player/img/loop.svg" alt="Loop music">
                    </div>
                    <div class="music-order__shuffle" id="shuffle">
                        <img src="https://snowleo208.github.io/100-Days-of-Code/7.%20Music%20Player/img/shuffle.svg" alt="Shuffle music">
                    </div>
                </div>
                <div class="music-control">
                    <div class="music-control__backward" id="backward">
                        <img src="https://snowleo208.github.io/100-Days-of-Code/7.%20Music%20Player/img/backward.svg" alt="Backward">
                    </div>
                    <div class="music-control__play" id="play">
                        <img src="https://snowleo208.github.io/100-Days-of-Code/7.%20Music%20Player/img/play.svg" alt="Play" class="play">
                    </div>
                    <div class="music-control__forward" id="forward">
                        <img src="https://snowleo208.github.io/100-Days-of-Code/7.%20Music%20Player/img/forward.svg" alt="Forward">
                    </div>
                </div>
            </section>
        </div>
        <p class="disclaimer">Music by Marcel Pequel and audio from <a href="http://freemusicarchive.org/music/Marcel_Pequel/From_One_To_Nine/" target="_blank" rel="noopener">Free Music Archive</a>. Design idea from <a href="https://dribbble.com/shots/2315906-Music-player-PSD-freebie-dailyui-Day-009" target="_blank" rel="noopener">Dima Blover</a></p>
    </div>

CSS Code

div > img {
  transition: 300ms;
}
div > img:hover {
  opacity: 0.7;
  cursor: pointer;
}

div {
  box-sizing: border-box;
}

img {
  width: 100%;
  height: 100%;
}

p {
  margin-top: 0;
  margin-bottom: 0.3em;
}

body {
  font-family: "Mukta", sans-serif;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  min-width: 100vw;
  min-height: 100vh;
  background: linear-gradient(-45deg, #FFCDD2 50%, #B2EBF2 50%);
}

div,
section {
  box-sizing: border-box;
}

.c-containter {
  display: flex;
  flex-flow: column wrap;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
  padding: 1em;
}

.music-container {
  position: relative;
  display: flex;
  box-shadow: 1px 1px 5px 0 rgba(0, 0, 0, 0.3);
  max-height: 290px;
}

.album-cover {
  flex: 1 0 30%;
}
.album-cover img {
  width: 100%;
  height: 100%;
}

.arrow {
  position: absolute;
  top: calc(50% - 2.5em);
  background: rgba(255, 255, 255, 0.3);
  border: 0;
  width: 5em;
  height: 5em;
  cursor: pointer;
}
.arrow:hover {
  background: rgba(255, 255, 255, 0.5);
}
.arrow img {
  display: block;
  width: 20px;
  margin: 0 auto;
}
.arrow.left {
  left: -5em;
}
.arrow.right {
  right: -5em;
}

.music-player {
  display: flex;
  flex-flow: column wrap;
  justify-content: center;
  background: white;
  padding: 1em;
  text-align: center;
  width: 500px;
  max-width: 500px;
}
.music-player__title {
  margin: 0 0 0.1em 0;
}
.music-player__author {
  margin: 0 0 0.5em 0;
}

.music-bar {
  background: #efefef;
  stroke-width: 1;
  height: 8px;
  width: 100%;
}
.music-bar:hover {
  cursor: pointer;
}
.music-bar #length {
  width: 0%;
  background: #2196F3;
  height: 100%;
  transition: width linear 200ms;
}

.music-time {
  display: flex;
  flex-flow: row wrap;
}
.music-time__last {
  margin-left: auto;
}

.music-order {
  display: flex;
  flex-flow: row wrap;
}
.music-order__shuffle, .music-order__loop {
  width: 1.2em;
  height: 1.2em;
  opacity: 0.2;
  margin: 0.3em 0;
}
.music-order__shuffle.is-loop, .music-order__loop.is-loop {
  opacity: 1 !important;
}
.music-order__shuffle.is-loop-one, .music-order__loop.is-loop-one {
  opacity: 1 !important;
}
.music-order__shuffle {
  margin-left: auto;
}

.music-control {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: center;
  height: 2em;
}
.music-control__play {
  width: 3em;
  height: 3em;
  margin: 0 1em;
}
.music-control__backward, .music-control__forward {
  width: 1.5em;
  height: 1.5em;
}

.disclaimer {
  font-size: 0.9em;
  margin-top: 1em;
  text-align: center;
}
.disclaimer a {
  color: #2196F3;
}

@media all and (max-width: 960px) {
  .c-containter {
    display: block;
    overflow: auto;
  }

  .music-container {
    flex-flow: column wrap;
    max-height: inherit;
    max-width: 270px;
    margin: 0 auto;
    overflow: auto;
  }

  .music-player {
    width: 100%;
    max-width: 100%;
  }
  .music-player__title {
    font-size: 1.5em;
  }
  .music-player__author {
    font-size: 1em;
  }

  .album-cover {
    position: relative;
    flex: 1 1 100%;
    max-width: 270px;
    max-height: 270px;
  }

  .arrow {
    position: absolute;
    top: calc(50% - 1.5em);
    width: 3em;
    height: 3em;
  }
  .arrow.left {
    left: 0;
  }
  .arrow.right {
    right: 0;
  }

  .music-control__play {
    width: 2.2em;
    height: 2.2em;
  }
}

JavaScript Snippet

(function IIFE() {
  var list = [
  {
    id: 1,
    url:
    "https://res.cloudinary.com/dkzj4hdmd/video/upload/v1536992860/Marcel_Pequel_-_01_-_One_rwev7k.mp3",
    author: "Marcel Pequel",
    title: "One",
    cover:
    "https://res.cloudinary.com/dkzj4hdmd/image/upload/v1536400483/cover_yz2mak.jpg" },

  {
    id: 2,
    url:
    "https://res.cloudinary.com/dkzj4hdmd/video/upload/v1536992860/Marcel_Pequel_-_02_-_Two_yd6dv2.mp3",
    author: "Marcel Pequel",
    title: "Two",
    cover:
    "https://res.cloudinary.com/dkzj4hdmd/image/upload/v1536400483/cover_yz2mak.jpg" },

  {
    id: 3,
    url:
    "https://res.cloudinary.com/dkzj4hdmd/video/upload/v1536992858/Marcel_Pequel_-_03_-_Three_y2k4q5.mp3",
    author: "Marcel Pequel",
    title: "Three",
    cover:
    "https://res.cloudinary.com/dkzj4hdmd/image/upload/v1536400483/cover_yz2mak.jpg" },

  {
    id: 4,
    url:
    "https://res.cloudinary.com/dkzj4hdmd/video/upload/v1536992859/Marcel_Pequel_-_04_-_Four_ezfkr1.mp3",
    author: "Marcel Pequel",
    title: "Four",
    cover:
    "https://res.cloudinary.com/dkzj4hdmd/image/upload/v1536400483/cover_yz2mak.jpg" },

  {
    id: 5,
    url:
    "https://res.cloudinary.com/dkzj4hdmd/video/upload/v1536992858/Marcel_Pequel_-_05_-_Five_pd3ql5.mp3",
    author: "Marcel Pequel",
    title: "Five",
    cover:
    "https://res.cloudinary.com/dkzj4hdmd/image/upload/v1536400483/cover_yz2mak.jpg" },

  {
    id: 6,
    url:
    "https://res.cloudinary.com/dkzj4hdmd/video/upload/v1536400484/Marcel_Pequel_-_06_-_Six_o1nplu.mp3",
    author: "Marcel Pequel",
    title: "Six",
    cover:
    "https://res.cloudinary.com/dkzj4hdmd/image/upload/v1536400483/cover_yz2mak.jpg" },

  {
    id: 7,
    url:
    "https://res.cloudinary.com/dkzj4hdmd/video/upload/v1536992858/Marcel_Pequel_-_07_-_Seven_mv0w1p.mp3",
    author: "Marcel Pequel",
    title: "Seven",
    cover:
    "https://res.cloudinary.com/dkzj4hdmd/image/upload/v1536400483/cover_yz2mak.jpg" },

  {
    id: 8,
    url:
    "https://res.cloudinary.com/dkzj4hdmd/video/upload/v1536992858/Marcel_Pequel_-_08_-_Eight_sjcbbx.mp3",
    author: "Marcel Pequel",
    title: "Eight",
    cover:
    "https://res.cloudinary.com/dkzj4hdmd/image/upload/v1536400483/cover_yz2mak.jpg" },

  {
    id: 9,
    url:
    "https://res.cloudinary.com/dkzj4hdmd/video/upload/v1536992857/Marcel_Pequel_-_09_-_Nine_y2zrx7.mp3",
    author: "Marcel Pequel",
    title: "Nine",
    cover:
    "https://res.cloudinary.com/dkzj4hdmd/image/upload/v1536400483/cover_yz2mak.jpg" }];



  var currentId = 0;
  var isPlaying = false;
  var isLoop = true;
  var isShuffle = false;
  var currentAudio = "music1";
  var timer = null;
  var loopOne = false;

  var currentTimeIndicator = document.querySelector(".music-time__current");
  var leftTimeIndicator = document.querySelector(".music-time__last");
  var progressBar = document.getElementById("length");
  var playBtn = document.querySelector(".play");
  var cover = document.querySelector(".cover");
  var title = document.querySelector(".music-player__title");
  var author = document.querySelector(".music-player__author");

  var loopBtn = document.getElementById("loop");
  var shuffleBtn = document.getElementById("shuffle");
  var forwardBtn = document.getElementById("forward");
  var backwardBtn = document.getElementById("backward");
  var prevBtn = document.getElementById("prev");
  var nextBtn = document.getElementById("next");
  var progressDiv = document.getElementById("progress");

  function play(e) {
    if (!isPlaying) {
      // console.log('play');
      e.target.src =
      "https://snowleo208.github.io/100-Days-of-Code/7.%20Music%20Player/img/pause.svg";
      e.target.alt = "Pause";
      isPlaying = true;
      document.getElementById(currentAudio).play();
      showTime();
    } else {
      // console.log('pause');
      e.target.src =
      "https://snowleo208.github.io/100-Days-of-Code/7.%20Music%20Player/img/play.svg";
      e.target.alt = "Play";
      document.getElementById(currentAudio).pause();
      isPlaying = false;
      clearInterval(timer);
    }
  }

  function changeBar() {
    var audio = document.getElementById(currentAudio);
    var percentage = (audio.currentTime / audio.duration).toFixed(3);
    progressBar.style.transition = "";
    // console.log(audio.currentTime);

    //set current time
    var minute = Math.floor(audio.currentTime / 60);
    var second = Math.floor(audio.currentTime % 60);
    var leftTime = audio.duration - audio.currentTime;
    currentTimeIndicator.innerHTML =
    ("0" + minute).substr(-2) + ":" + ("0" + second).substr(-2);

    //set left time
    var leftMinute = Math.floor(leftTime / 60);
    var leftSecond = Math.floor(leftTime % 60);

    leftTimeIndicator.innerHTML =
    ("0" + leftMinute).substr(-2) + ":" + ("0" + leftSecond).substr(-2);

    //set time bar
    progressBar.style.width = percentage * 100 + "%";
  }

  function showTime() {
    timer = setInterval(function () {return changeBar();}, 500);
  }

  function nextMusic(mode) {
    playBtn.src =
    "https://snowleo208.github.io/100-Days-of-Code/7.%20Music%20Player/img/play.svg";
    playBtn.alt = "Play";
    document.getElementById(currentAudio).pause();
    isPlaying = false;
    clearInterval(timer);

    if (mode === "next") {
      currentId = currentId + 1 > list.length - 1 ? 0 : currentId + 1;
      init();
    } else {
      currentId = currentId - 1 < 0 ? list.length - 1 : currentId - 1;
      init();
    }
  }

  function shuffle(e) {
    isShuffle = !isShuffle;
    if (isShuffle) {
      e.target.parentNode.classList.add("is-loop");
    } else {
      e.target.parentNode.classList.remove("is-loop");
    }
  }

  function backward() {
    var audio = document.getElementById(currentAudio);
    audio.currentTime -= 5;
    if (!isPlaying) {
      changeBar();
    }
  }

  function forward() {
    var audio = document.getElementById(currentAudio);
    audio.currentTime += 5;
    if (!isPlaying) {
      changeBar();
    }
  }

  function stopMusic() {
    playBtn.src =
    "https://snowleo208.github.io/100-Days-of-Code/7.%20Music%20Player/img/play.svg";
    playBtn.alt = "Play";
    isPlaying = false;
  }

  function goToNextMusic() {
    var newId = currentId;
    while (isShuffle && !loopOne && newId === currentId) {
      newId = Math.floor(Math.random() * Math.floor(list.length - 1));
    }

    if (!isShuffle && !loopOne) {
      currentId = currentId + 1 > list.length - 1 ? 0 : currentId + 1;
    }
    if (!isShuffle && loopOne) {
      currentId = currentId;
    }

    if (isShuffle) {
      currentId = newId;
    }
    init();
    document.getElementById(currentAudio).play();
  }

  function loop(e) {
    var audio = document.getElementById(currentAudio);

    if (!isLoop && !loopOne) {
      isLoop = true;
      loopOne = false;
      // console.log('is loop');
      e.target.parentNode.classList.add("is-loop");
      e.target.src =
      "https://snowleo208.github.io/100-Days-of-Code/7.%20Music%20Player/img/loop.svg";
      audio.loop = false;
      audio.onended = function (e) {return goToNextMusic();};
      console.log(isLoop, loopOne);
    } else if (isLoop && !loopOne) {
      // console.log('is loop one');
      isLoop = true;
      loopOne = true;
      e.target.parentNode.classList.add("is-loop");
      e.target.src =
      "https://snowleo208.github.io/100-Days-of-Code/7.%20Music%20Player/img/loopone.svg";
      audio.loop = true;
      audio.onended = function (e) {return goToNextMusic();};
      console.log(isLoop, loopOne);
    } else {
      // console.log('not loop');
      isLoop = false;
      loopOne = false;
      e.target.parentNode.classList.remove("is-loop");
      e.target.src =
      "https://snowleo208.github.io/100-Days-of-Code/7.%20Music%20Player/img/loop.svg";
      audio.loop = false;
      audio.onended = function (e) {return stopMusic();};
      console.log(isLoop, loopOne);
    }
  }

  function progress(e) {
    var audio = document.getElementById(currentAudio);
    //get current position and minus progress bar's x position to get current position in progress bar
    var pos =
    (e.pageX - progressDiv.getClientRects()[0].x) /
    progressDiv.getClientRects()[0].width;
    audio.currentTime = pos * audio.duration;
    changeBar();
  }

  function init() {
    //reset music duration and setup audio
    var audio =
    document.getElementById(currentAudio) === null ?
    new Audio() :
    document.getElementById(currentAudio);
    audio.src = list[currentId].url;
    audio.id = currentAudio;
    document.getElementById(currentAudio) === null ?
    document.body.appendChild(audio) :
    "";

    progressBar.style.transition = "none";
    progressBar.style.width = "0%";
    document.getElementById(currentAudio).currentTime = 0;

    title.innerHTML = list[currentId].title;
    author.innerHTML = list[currentId].author;
    cover.src = list[currentId].cover;

    //set current time
    audio.addEventListener("loadedmetadata", function () {
      var leftMinute = Math.floor(audio.duration / 60);
      var leftSecond = Math.floor(audio.duration % 60);
      currentTimeIndicator.innerHTML = "00:00";
      leftTimeIndicator.innerHTML =
      ("0" + leftMinute).substr(-2) + ":" + ("0" + leftSecond).substr(-2);
      progressBar.style.transition = "";
    });

    //set loop
    document.getElementById(currentAudio).onended = function (e) {return goToNextMusic(e);};
  }

  playBtn.addEventListener("click", play);
  loopBtn.addEventListener("click", loop);

  shuffleBtn.addEventListener("click", shuffle);
  forwardBtn.addEventListener("click", forward);
  backwardBtn.addEventListener("click", backward);

  prevBtn.addEventListener("click", function (e) {return nextMusic("prev");});
  nextBtn.addEventListener("click", function (e) {return nextMusic("next");});
  progressDiv.addEventListener("click", function (e) {
    progress(e);
  });

  init();
})();

Preview

• « Previous
  Awesome text rotation animation using CSS
• Next »
  Angled Youtube Embed with animation effect when hover