From 9c8ef728361ce36b9da2686ee834b87a93829feb Mon Sep 17 00:00:00 2001 From: PrAyAg9 <114804510+PrAyAg9@users.noreply.github.com> Date: Thu, 12 Sep 2024 19:42:33 +0530 Subject: [PATCH] Add files via upload --- fetch.js | 365 +++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 365 insertions(+) create mode 100644 fetch.js diff --git a/fetch.js b/fetch.js new file mode 100644 index 0000000..76db1fc --- /dev/null +++ b/fetch.js @@ -0,0 +1,365 @@ +console.log("Javascript Let's Go"); +let songs; +let currFolder; + +let currentSong = new Audio(); + +function convertSecondsToTime1(seconds) { + // Ensure the input is a positive integer + if (seconds < 0 || isNaN(seconds)) { + throw new Error("Input must be a non-negative number"); + } + + // Calculate minutes and remaining seconds + const minutes = Math.floor(seconds / 60); + const remainingSeconds = Math.floor(seconds % 60); + + // Format minutes and seconds to ensure two-digit seconds + const formattedMinutes = String(minutes).padStart(2,'0'); + const formattedSeconds = String(remainingSeconds).padStart(2, '0'); + + // Return the formatted time string + return `${formattedMinutes}:${formattedSeconds}`; +} + + +function convertSecondsToTime(seconds) { + // Calculate hours, minutes, and seconds + const hours = Math.floor(seconds / 3600); + const minutes = Math.floor((seconds % 3600) / 60); + const remainingSeconds = seconds % 60; + + // Format minutes and seconds to always show two digits + const formattedMinutes = String(minutes).padStart(2, '0'); + const formattedSeconds = String(remainingSeconds).padStart(2, '0'); + + // If hours are more than 0, include hours in the output + if (hours > 0) { + const formattedHours = String(hours).padStart(2, '0'); + return `${formattedHours}:${formattedMinutes}:${formattedSeconds}`; + } else { + // Otherwise, just return minutes and seconds + return `${formattedMinutes}:${formattedSeconds}`; + } +} + + +async function get_songs(folder) { + currFolder = folder; + let a = await fetch(`/${folder}/`); + console.log(folder); + let response = await a.text(); + let div = document.createElement("div"); + div.innerHTML = response; + let as = div.getElementsByTagName("a"); + songs = []; + for (let i = 0; i < as.length; i++) { + const element = as[i]; + if (element.href.endsWith(".mp3")) { + songs.push(element.href.split(`/${folder}/`)[1]); + } + } + + // show all songs in playlist + let sul = document.querySelector(".songlist").getElementsByTagName("ul")[0]; + sul.innerHTML = " "; + for (const song of songs) { + sul.innerHTML = + sul.innerHTML + + `
  • + not playing +
    +
    ${song.replaceAll("%20", " ")}
    +
    Prayag
    +
    +
    + Play + playnow +
    +
    • `; + } + + Array.from( + document.querySelector(".songlist").getElementsByTagName("li") + ).forEach((e) => { + e.addEventListener("click", element => { + playMusic( + e.querySelector(".songinfo").firstElementChild.innerHTML.trim() + ); + }); + }); + console.log(songs); + return songs; +} + +const playMusic = (track, pause=false) => { + currentSong.src = `/${currFolder}/` + track; + if(!pause){ + currentSong.play(); + play.src = "./images/pause.svg"; + } + document.querySelector(".songinfo1").innerHTML = decodeURI(track); + document.querySelector(".songtime").innerHTML = "00:00 / 00:00"; + +}; + + +async function displayAlbums(){ + let a = await fetch(`/Songs/`); + let response = await a.text(); + let div = document.createElement("div"); + div.innerHTML = response; + let anchors = div.getElementsByTagName("a"); + let cardContainer = document.querySelector(".cardContainer") + let array = Array.from(anchors) + for (let index = 0; index < array.length; index++) { + const e = array[index]; + + + if(e.href.includes("/Songs/") &&!e.href.includes(".htaccess")){ + console.log(e.href.split("/").slice(-2)[1]); + let folder = e.href.split("/").slice(-2)[1]; + + let a = await fetch(`/Songs/${folder}/info.json`); + let response = await a.json(); + console.log(response); + cardContainer.innerHTML = cardContainer.innerHTML + `
    +
    + + + + + + + +
    + +

    ${response.title}

    +

    ${response.description}

    +
    ` + } + } + Array.from(document.getElementsByClassName("card")).forEach(e=>{ + e.addEventListener("click",async item=>{ + songs = await get_songs(`Songs/${item.currentTarget.dataset.folder}`) + console.log(songs); + playMusic(songs[0],true); + }) + }) +} + + +async function displayAlbums2(){ + let a = await fetch(`/Songs1/`); + let response = await a.text(); + let div = document.createElement("div"); + div.innerHTML = response; + let anchors = div.getElementsByTagName("a"); + let cardContainer = document.querySelector(".cardContainer2") + let array = Array.from(anchors) + for (let index = 0; index < array.length; index++) { + const e = array[index]; + + + if(e.href.includes("/Songs1/") &&!e.href.includes(".htaccess")){ + console.log(e.href.split("/").slice(-2)[1]); + let folder = e.href.split("/").slice(-2)[1]; + + let a = await fetch(`/Songs1/${folder}/info.json`); + let response = await a.json(); + console.log(response); + cardContainer.innerHTML = cardContainer.innerHTML + `
    +
    + + + + + + + +
    + +

    ${response.title}

    +

    ${response.description}

    +
    ` + } + } + Array.from(document.getElementsByClassName("card1")).forEach(e=>{ + e.addEventListener("click",async item=>{ + songs = await get_songs(`Songs1/${item.currentTarget.dataset.folder}`) + console.log(songs); + playMusic(songs[0]); + }) + }) +} + + + + + +async function main() { + await get_songs("Songs/kishore"); + playMusic(songs[0],true); + // Display all the albums on the page. + await displayAlbums(); + + await displayAlbums2(); + + // Attach an event listener to play next play and previous + play.addEventListener("click", () => { + if (currentSong.paused) { + currentSong.play(); + play.src = "./images/pause.svg"; + } else { + currentSong.pause(); + play.src = "./images/play1.svg"; + } + }); + + // Listen for timeupdate event + currentSong.addEventListener("timeupdate", () => { + let seconds; + if (seconds < 0) { + throw new Error("Input must be a non-negative number"); + } + document.querySelector(".songtime").innerHTML = `${convertSecondsToTime1( + currentSong.currentTime + )} + / ${convertSecondsToTime1(currentSong.duration)}`; + document.querySelector(".circle").style.left = (currentSong.currentTime/currentSong.duration) * 100 + "%"; + }); + + // Add an event listener to seekbar + document.querySelector(".seekbar").addEventListener("click", e => { + let percent = (e.offsetX/e.target.getBoundingClientRect().width) * 100; + document.querySelector(".circle").style.left = percent + "%"; + currentSong.currentTime = ((currentSong.duration) * percent) /100; + } + ) + + //Add an event listener to hamburger + document.querySelector(".hamburger").addEventListener("click",() => { + document.querySelector(".left").style.left = "0"; + } + ) + + // Add an event listener to mute the track + document.querySelector(".volume > img").addEventListener("click",(e) => { + console.log(e.target); + } + ) + + // Add an event listener to close hamburger + document.querySelector(".close").addEventListener("click",() => { + document.querySelector(".left").style.left = "-100%"; + document.querySelector(".left").style.transition = "0.4s"; + } + ) + + prev.addEventListener("click",() => { + currentSong.pause(); + let index = songs.indexOf(currentSong.src.split("/").slice(-1) [0]); + if ((index-1)>=0){ + playMusic(songs[index-1]); + } + } + ) + + next.addEventListener("click",() => { + let index; + currentSong.pause(); + index = songs.indexOf(currentSong.src.split("/").slice(-1) [0]); + if ((index+1) { + currentSong.volume = parseInt(e.target.value)/100; + } + ) + +// Add an event listener to mute the track + + // document.querySelector(".volume>img").addEventListener("click", e => { + // console.log(e.target); + // if(e.target.src.includes("./images/volume.svg")){ + // e.target.src = e.target.src.replace("./images/volume.svg","./images/mute.svg") + // currentSong.volume=.0; + // document.querySelector(".range").getElementsByTagName("input")[0].value = 0; + // } + // else{ + // e.target.src = e.target.src.replace("./images/mute.svg","./images/volume.svg"); + // currentSong.volume = .10; + // document.querySelector(".range").getElementsByTagName("input")[0].value = 10; + // } + + // } + // ) + // Get references to the DOM elements + const volumeIcon = document.getElementById('volume-icon'); + const volumeRange = document.getElementById('volume-range'); + + // Initial volume state + let isMuted = false; + + // Function to toggle volume + function toggleVolume() { + if (isMuted) { + // Unmute the sound + volumeRange.value = 10; // Set volume to 10 + volumeIcon.src = './images/voume.svg'; // Change to the sound icon + } else { + // Mute the sound + volumeRange.value = 0; // Set volume to 0 + volumeIcon.src = './images/mute.svg'; // Change to the mute icon + } + isMuted = !isMuted; // Toggle the state + } + + // Add event listener to the volume icon + volumeIcon.addEventListener('click', toggleVolume); + + // Optional: Add an event listener to the volume range input if needed + volumeRange.addEventListener('input', function () { + // Adjust volume based on range input, here it could be used to control actual audio elements if needed + console.log('Volume set to:', volumeRange.value); + }); + +} + +main();