// Define loadTrack in the global scope
function loadTrack(element) {
const audio = document.getElementById("audio-player");
const songTitle = document.getElementById("song-title");
const progressBar = document.querySelector(".progress span");
const playPauseBtn = document.querySelector(".play_pause");
const src = element.getAttribute("data-src");
const title = element.getAttribute("data-title");
audio.src = src;
audio.play();
songTitle.textContent = title;
playPauseBtn.textContent = "⏸️";
// Remove 'active' from all tracks and add to the selected one
document.querySelectorAll(".playlist li").forEach(li => li.classList.remove("active"));
element.classList.add("active");
audio.addEventListener("timeupdate", () => {
const progressPercent = (audio.currentTime / audio.duration) * 100;
progressBar.style.width = progressPercent + "%";
});
audio.addEventListener("ended", () => {
playPauseBtn.textContent = "▶️";
progressBar.style.width = "0%";
});
}
// Play/Pause Button Functionality
document.addEventListener("DOMContentLoaded", () => {
const audio = document.getElementById("audio-player");
const playPauseBtn = document.querySelector(".play_pause");
playPauseBtn.addEventListener("click", () => {
if (audio.paused) {
audio.play();
playPauseBtn.textContent = "⏸️";
} else {
audio.pause();
playPauseBtn.textContent = "▶️";
}
});
});
