FEATURE: add support for mp3 wav flac audio file.

static/scripts/audio-play.js

@@ -0,0 +1,49 @@
+let currentPlayBtn = null;
+let currentPlaySong = null;
+
+function togglePlay(nextPlaySong, nextBtn) {
+    if (currentPlaySong == nextPlaySong) {
+        // pause
+        currentPlayBtn.classList.replace("fa-pause", "fa-play");
+        currentPlaySong.pause();
+        currentPlayBtn = null;
+        currentPlaySong = null;
+        return;
+    } 
+   
+    if (currentPlaySong != null) {
+        // currently there is no music playing.
+        currentPlaySong.pause();
+        currentPlayBtn.classList.replace("fa-pause", "fa-play");
+    }
+    
+    // currenty there is music playing.
+    currentPlayBtn = nextBtn
+    currentPlaySong = nextPlaySong
+    nextBtn.classList.replace("fa-play", "fa-pause");
+    nextPlaySong.play();
+}
+
+
+function setProgressBar(e, playerProgressEl, song) {
+    const width = playerProgressEl.clientWidth;
+    const xValue = e.offsetX;
+    console.log(width);
+    console.log(xValue);
+    song.currentTime = (xValue / width) * song.duration;
+}
+
+function updateProgressBar(progressEl, durationEl, currentTimeEl, song) {
+    const { duration, currentTime } = song;
+    const ProgressPercent = (currentTime / duration) * 100;
+    progressEl.style.width = `${ProgressPercent}%`;
+    const formattime = (timeRanges) =>
+        String(Math.floor(timeRanges)).padStart(2, "0");
+    durationEl.textContent = `${formattime(duration / 60)} : ${formattime(
+        duration % 60,
+    )}`;
+    currentTimeEl.textContent = `${formattime(currentTime / 60)} : ${formattime(
+        currentTime % 60,
+    )}`;
+}
+