Music Player Web App

HTML CODE(index.html)

<!DOCTYPE html>
<html lang=”en”>
  <head>
    <meta charset=”UTF-8″ />
    <meta http-equiv=”X-UA-Compatible” content=”IE=edge” />
    <meta name=”viewport” content=”width=device-width, initial-scale=1.0″ />
    <link
      rel=”stylesheet”
      href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css”
      integrity=”sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==”
      crossorigin=”anonymous”
      referrerpolicy=”no-referrer”
    />
    <link rel=”stylesheet” href=”./styles.css” />
    <title>Music Player</title>
  </head>
  <body>
    <section>
      <header>
        <img
          src=”https://cdn.britannica.com/03/151903-131-E310E9EC/Microphone-background-sound-waves-energy-Music.jpg”
          alt=”playing-cover”
        />
        <h3>Track Name</h3>
        <p>Track desc</p>
      </header>
      <label>Playlist</label>
      <ul></ul>
      <footer>
        <div class=”slider”>
          <div class=”slider-progress”>
            <div class=”slider-pin”></div>
          </div>
        </div>
        <div class=”count”>
          <span class=”count-current”>00:01</span>
          <span class=”count-final”>11:23</span>
        </div>
        <div class=”event”>
          <i class=”fas fa-caret-left event-prev”></i>
          <i class=”fas fa-play event-playPause”></i>
          <i class=”fas fa-caret-right event-next”></i>
          <i class=”fas fa-volume-up event-muteUnmute”></i>
        </div>
      </footer>
    </section>
    <audio src=”” id=”audio”></audio>
    <script src=”./script.js”></script>
  </body>
</html>
CSS CODE(styles.css)
@import url(‘https://fonts.googleapis.com/css2?family=Fira+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap’);
*,
*::after,
*::before {
  margin: 0;
  box-sizing: border-box;
}
body {
  font-family: ‘Fira Sans’, sans-serif;
  background-color: #171717;
}
section {
  max-width: 576px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  height: 100vh;
}
header {
  text-align: center;
  margin: 2rem 0 0 0;
}
header img {
  width: 150px;
  height: 150px;
  border-radius: 50%;
}
header h3 {
  color: #fff;
  margin: 15px 0 3px 0;
}
header p {
  color: crimson;
}
label {
  color: #fff;
  border-bottom: 4px solid crimson;
  margin-left: 2rem;
  width: fit-content;
  padding: 0 0.5rem;
  margin-top: 3rem;
  display: block;
}
ul {
  background-color: #131313;
  flex: 1;
  overflow-y: auto;
  padding: 1.5rem 0.5rem 0 0.5rem;
}
ul li {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #a8a8a8;
  margin-bottom: 15px;
  padding-bottom: 0.5rem;
}
.track-img {
  width: 50px;
  height: 50px;
  margin-right: 10px;
}
.track-number {
  color: #a8a8a8;
  margin-right: 10px;
}
.track-detail_name {
  color: #fff;
}
.track-detail_desc {
  color: #a8a8a8;
}
footer {
  background-color: #030303;
  padding: 0 0.5rem 0.5rem 0.5rem;
}
.slider {
  background-color: darken(white, 50%);
  border-radius: 2px;
  cursor: pointer;
  height: 2px;
  position: relative;
  width: 100%;
}
.slider-progress {
  background-color: crimson;
  height: 100%;
  pointer-events: none;
  position: absolute;
  width: 0%;
}
.slider-pin {
  background-color: white;
  border-radius: 8px;
  height: 8px;
  position: absolute;
  pointer-events: all;
  right: -5px;
  top: -2px;
  width: 8px;
  box-shadow: (0px 1px 1px 0px rgba(0, 0, 0, 0.32));
  transition: (transform 0.25s ease);
}
.count {
  color: #585858;
  display: flex;
  justify-content: space-between;
  font-size: 0.8rem;
  margin: 3px 0 1rem 0;
  font-weight: bold;
}
.event {
  color: #585858;
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin-bottom: 0.5rem;
}
JAVASCRIPT CODE (script.js)
document.addEventListener(‘DOMContentLoaded’, function () {
    const tracksList = [
      {
        audioSrc: ‘internship/tracks/song1.mp3’,
        coverSrc: ‘internship/images/image1.jpg’,
        name: ‘Bewajah(sanam teri kasam)’,
        desc: ‘Himesh Reshammiya’,
        id: 0,
      },
      {
        audioSrc: ‘internship/tracks/song2.mp3’,
        coverSrc: ‘internship/images/image2.jpg’,
        name: ‘Kaise Hua(Kabhir Singh)’,
        desc: ‘Vishal Mishra’,
        id: 1,
      },
      {
        audioSrc: ‘internship/tracks/song3.mp3’,
        coverSrc: ‘internship/images/image3.jpg’,
        name: ‘Duniya(Luka chuppi)’,
        desc: ‘Akhil,Dhavni Bhanushali’,
        id: 2,
      },
      {
        audioSrc: “internship/tracks/song4.mp3”,
        coverSrc: ‘internship/images/image4.jpg’,
        name: ‘Apna Bana le(Bhediya)’,
        desc: “Arjit singh”,
        id: 3,
      },
      {
        audioSrc: ‘internship/tracks/song5.mp3’,
        coverSrc: ‘internship/images/image5.jpg’,
        name: ‘Samjhawan(Humpty Sharma Ki Dulhania)’,
        desc: ‘Arjit singh,Shreya Ghosal’,
        id: 4,
      },
      {
        audioSrc: ‘internship/tracks/song6.mp3’,
        coverSrc: ‘internship/images/image6.jpg’,
        name: ‘Photo(Luka chuppi)’,
        desc: ‘Karan Sehmbi’,
        id: 5,
      },
    ];
    const currentTrackName = document.querySelector(‘header h3’);
    const currentTrackDesc = document.querySelector(‘header p’);
    const currentTrackCover = document.querySelector(‘header img’);
    const currentTrackAudio = document.querySelector(‘audio’);
    const playPauseBtn = document.querySelector(‘.event-playPause’);
    const muteUnmuteBtn = document.querySelector(‘.event-muteUnmute’);
    const playNextBtn = document.querySelector(‘.event-next’);
    const playPrevBtn = document.querySelector(‘.event-prev’);
    const progress = document.querySelector(‘.slider-progress’);
    const currentTrackTime = document.querySelector(‘.count-current’);
    const finalTrackTime = document.querySelector(‘.count-final’);
    // ADD TRACKS TO MY PLAYLIST ON PAGE LOAD
    (function addMyTracksList() {
      for (let track of tracksList) {
        var li = document.createElement(‘li’);
        li.id = track.id;
        li.innerHTML = `
                      <div class=”track-number”>0${track.id}</div>
                      <img
                      src=${track.coverSrc}
                      class=”track-img”
                      alt=””
                      />
                      <div class=”track-detail”>
                      <div class=”track-detail_name”>${track.name}</div>
                      <div class=”track-detail_desc”>
                          <small>${track.desc}</small>
                      </div>
                      </div>
          `;
        document.querySelector(‘ul’).appendChild(li);
        (function (id) {
          li.addEventListener(
            ‘click’,
            () => {
              playSelectedTrack(id);
            },
            false
          );
        })(track.id);
      }
    })();
    let trackId = 0;
    const loadTrack = (songId) => {
      const song = tracksList.find((track) => track.id === songId);
      const { audioSrc, coverSrc, name, desc } = song;
      currentTrackName.innerText = name;
      currentTrackDesc.innerText = desc;
      currentTrackAudio.src = audioSrc;
      currentTrackCover.src = coverSrc;
    };
    const playSelectedTrack = (songId) => {
      trackId = songId;
      loadTrack(songId);
      playTrack();
    };
    loadTrack(trackId);
    const playTrack = () => {
      playPauseBtn.classList.remove(‘fa-play’);
      playPauseBtn.classList.add(‘fa-pause’);
      currentTrackAudio.play();
    };
    const pauseTrack = () => {
      playPauseBtn.classList.remove(‘fa-pause’);
      playPauseBtn.classList.add(‘fa-play’);
      currentTrackAudio.pause();
    };
    const playPrevTrack = () => {
      trackId–;
      if (trackId < 0) {
        trackId = tracksList.length – 1;
      }
      loadTrack(trackId);
      playTrack();
    };
    const playNextTrack = () => {
      trackId++;
      if (trackId > tracksList.length – 1) {
        trackId = 0;
      }
      loadTrack(trackId);
      playTrack();
    };
    const updateProgress = () => {
      const currentTime = currentTrackAudio.currentTime;
      const trackDuration = currentTrackAudio.duration;
      const percent = (currentTime / trackDuration) * 100;
      progress.style.width = percent + ‘%’;
      let curMins = Math.floor(currentTime / 60);
      let curSecs = Math.floor(currentTime – curMins * 60);
      let durMins = Math.floor(trackDuration / 60) || ‘–‘;
      let durSecs = Math.floor(trackDuration – durMins * 60) || ‘–‘;
      if (curMins < 10) {
        curMins = `0${curMins}`;
      }
      if (curSecs < 10) {
        curSecs = `0${curSecs}`;
      }
      if (durMins < 10) {
        durMins = `0${durMins}`;
      }
      if (durSecs < 10) {
        durSecs = `0${durSecs}`;
      }
      currentTrackTime.innerText = `${curMins}:${curSecs}`;
      finalTrackTime.innerText = `${durMins}:${durSecs}`;
    };
    const muteUnmuteTrack = () => {
      if (currentTrackAudio.muted) {
        currentTrackAudio.muted = false;
        muteUnmuteBtn.classList.remove(‘fa-volume-mute’);
        muteUnmuteBtn.classList.add(‘fa-volume-up’);
      } else {
        currentTrackAudio.muted = true;
        muteUnmuteBtn.classList.remove(‘fa-volume-up’);
        muteUnmuteBtn.classList.add(‘fa-volume-mute’);
      }
    };
    playPauseBtn.addEventListener(‘click’, () => {
      const currentlyPlaying = playPauseBtn.classList.contains(‘fa-pause’);
      currentlyPlaying ? pauseTrack() : playTrack();
    });
    muteUnmuteBtn.addEventListener(‘click’, () => muteUnmuteTrack());
    playPrevBtn.addEventListener(‘click’, () => playPrevTrack());
    playNextBtn.addEventListener(‘click’, () => playNextTrack());
    currentTrackAudio.addEventListener(‘timeupdate’, () => updateProgress());
  });

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top