audioplay.js

// Music Enhancer
var codeXam = document.getElementById("codeXam"); //codeXam is the id of the audio tag in the html file
var codeXamBtn = document.getElementById("control"); // codeXamBtn is the id of the button in the html file
let xBtn = document.querySelector("#crossMark1"); // crossMark1 is id for the cross(close) button in the index.html

function playPause(song) {
  //playPause is the function that will be called when the button is clicked
  if (song.paused && song.currentTime >= 0 && !song.ended) {
    // if the song is paused and the current time is greater than 0 and the song is not ended then play the song
    song.play(); // play the song
  } else {
    song.pause(); // else pause the song
    let popUpMessage = $(".popup-message");
    popUpMessage.css("opacity", 1);
    setTimeout(() => {
      popUpMessage.css("opacity", 0);
    }, 3000);
  }
}

function reset(btn, song) {
  // reset is the function that will be called when the song ends
  if (btn.classList.contains("playing")) {
    // if the button has the class playing then remove the class playing
    btn.classList.toggle("playing"); // remove the class playing
  }
  song.pause(); // pause the song
  song.currentTime = 0; // set the current time of the song to 0
}

function progress(btn, song) {
  // progress is the function that will be called when the song is playing
  setTimeout(function () {
    // setTimeout is used to call the function after a certain time
    var end = song.duration; // end is the duration of the song
    var current = song.currentTime; // current is the current time of the song
    var percent = current / (end / 100); // percent is the percentage of the song that has been played
    //check if song is at the end
    if (current == end) {
      // if the current time of the song is equal to the duration of the song then call the reset function
      reset(btn, song); // call the reset function
    }
    //set inset box shadow
    btn.style.boxShadow =
      "inset " +
      btn.offsetWidth * (percent / 100) +
      "px 0px 0px 0px rgba(0,0,0,0.125)"; // set the box shadow of the button
    //call function again
    progress(btn, song); // call the progress function again
  }, 1000); // call the function after 1000ms
}

var volumeUp = false;

codeXamBtn.addEventListener("click", function (e) {
  // add an event listener to the button
  e.preventDefault();
  codeXamBtn.classList.toggle("is--playing");
  //   codeXamBtn.classList.toggle('playing');// toggle the class playing
  playPause(codeXam); // call the playPause function
  progress(codeXamBtn, codeXam); // call the progress function
});

// Function to pause audio when cross(close) button is clicked
xBtn.addEventListener("click", function (e) {
  // add an event listener to the button
  e.preventDefault();
  codeXamBtn.classList.remove("is--playing");
  codeXam.pause();
  //pause the music
});

//Function to play pause audio by pressing space bar
window.addEventListener("keypress", (e) => {
  if (e.key == " " || e.code == "Space" || e.keyCode == 32) {
    // add an event listener to the button
    e.preventDefault();
    codeXamBtn.classList.toggle("is--playing");
    //   codeXamBtn.classList.toggle('playing');// toggle the class playing
    playPause(codeXam); // call the playPause function
    progress(codeXamBtn, codeXam); // call the progress function
  }
});