script.js

let previous = document.querySelector("#pre");
let play = document.querySelector("#play");
let next = document.querySelector("#next");
// let title = document.getElementById("#title");
let recent_volume = document.querySelector("#volume");
let volume_show = document.querySelector("#volume_show");
let slider = document.querySelector("#duration_slider");
let show_duration = document.querySelector("#show_duration");
let track_image = document.querySelector("#track_image");
let auto_play = document.querySelector("#auto");
let present = document.querySelector("#present");
let total = document.querySelector("#total");
let artist = document.querySelector("#artist");

let timer;
let autoplay = 0;

let index_no = 0;
let Playing_song = false;

//create a audio Element
let track = document.createElement("audio");

//All songs list
const All_song = [
  {
    path: "song1.mp3",
    img: "img1.jpg",
    singer: "AAJ KI RAT - Mr . And Mrs. Mahi",
  },
  {
    path: "song2.mp3",
    img: "img2.jpg",
    singer: " AAYI NAI - Asees Kaur",
  },
  {
    path: "song3.mp3",
    img: "img3.jpg",
    singer: " AGAR HO TUM -  Chandu Champion",
  },
  {
    path: "song4.mp3",
    img: "img4.jpg",
    singer: " HALKI HALKI SI - Sarfira ",
  },
  {
    path: "song5.mp3",
    img: "img5.jpg",
    singer: "  KHUNDAY - Stree 2",
  },
  {
    path: "song6.mp3",
    img: "img6.jpg",
    singer: " MERE MEHBOOB MERE SANAM - Bad News",
  },
  {
    path: "song7.mp3",
    img: "img7.jpg",
    singer: " TU HI HYE CHAMPION - Bad News",
  },
];

// All functions

// function load the track
function load_track(index_no) {
  track.src = All_song[index_no].path;
  track_image.src = All_song[index_no].img;
  artist.innerHTML = All_song[index_no].singer;
  // title.innerText = All_song[index_no].name;
  track.load();

  total.innerHTML = All_song.length;
  present.innerHTML = index_no + 1;
  timer = setInterval(range_slider, 1000);
}

load_track(index_no);

//mute sound function
function mute_sound() {
  track.volume = 0;
  volume.value = 0;
  volume_show.innerHTML = 0;
}

// checking.. the song is playing or not
function justplay() {
  if (Playing_song == false) {
    playsong();
  } else {
    pausesong();
  }
}

// reset song slider
function reset_slider() {
  slider.value = 0;
}

// play song
function playsong() {
  track.play();
  Playing_song = true;
  play.innerHTML = '<i class="fa fa-pause"></i>';
}

//pause song
function pausesong() {
  track.pause();
  Playing_song = false;
  play.innerHTML = '<i class="fa fa-play"></i>';
}

// next song
function next_song() {
  if (index_no < All_song.length - 1) {
    index_no += 1;
    load_track(index_no);
    playsong();
  } else {
    index_no = 0;
    load_track(index_no);
    playsong();
  }
}

// previous song
function previous_song() {
  if (index_no > 0) {
    index_no -= 1;
    load_track(index_no);
    playsong();
  } else {
    index_no = All_song.length;
    load_track(index_no);
    playsong();
  }
}

// change volume
function volume_change() {
  volume_show.innerHTML = recent_volume.value;
  track.volume = recent_volume.value / 100;
}

// change slider position
function change_duration() {
  slider_position = track.duration * (slider.value / 100);
  track.currentTime = slider_position;
}

// autoplay function
function autoplay_switch() {
  if (autoplay == 1) {
    autoplay = 0;
    auto_play.style.background = "rgba(255,255,255,0.2)";
  } else {
    autoplay = 1;
    auto_play.style.background = "#148F77";
  }
}

function range_slider() {
  let position = 0;

  // update slider position
  if (!isNaN(track.duration)) {
    position = track.currentTime * (100 / track.duration);
    slider.value = position;
  }

  // function will run when the song is over
  if (track.ended) {
    play.innerHTML = '<i class="fa fa-play" aria-hidden="true"></i>';
    if (autoplay == 1) {
      index_no += 1;
      load_track(index_no);
      playsong();
    }
  }
}