CodeWithHarry
SPOTIFY CLONE : Issu in : - // Load the playlist whenever card is clicked //
https://github.com/user-attachments/assets/79704422-882b-4a38-bd5c-41ba678d95f2
HTML :-
Home
Search
Your Library
<div class="songlist">
<ul>
</ul>
</div>
<div class="footer">
<div><a href="https://www.spotify.com/jp/legal/"><span>Legal</span></a></div>
<div><a href="https://www.spotify.com/jp/privacy/"><span>Privacy Center</span></a></div>
<div><a href="https://www.spotify.com/jp/legal/privacy-policy/"><span>Privacy Policy</span></a>
</div>
<div><a href="https://www.spotify.com/jp/legal/cookies-policy/"><span>Cookies</span></a></div>
<div><a href="https://www.spotify.com/jp/legal/privacy-policy/#s3"><span>About Ads</span></a></div>
<div><a href="https://www.spotify.com/jp/accessibility/"><span>Accessibility</span></a></div>
</div>
</div>
</div>
<div class="right bg-grey rounded">
<div class="header">
<div class="nav">
<div class="hamburgerContainer">
<img width="40" class="invert hamburger" src="hamburger.svg" alt="">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M15 6L9.70711 11.2929C9.37377 11.6262 9.20711 11.7929 9.20711 12C9.20711 12.2071 9.37377 12.3738 9.70711 12.7071L15 18"
stroke="#ffffff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M9 18L14.2929 12.7071C14.6262 12.3738 14.7929 12.2071 14.7929 12C14.7929 11.7929 14.6262 11.6262 14.2929 11.2929L9 6"
stroke="#ffffff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</div>
</div>
<div class="buttons">
<button class="signupbtn">Sign up</button>
<button class="loginbtn">Log in</button>
</div>
</div>
<div class="SpotifyPlaylists">
<h1>Spotify Playlists</h1>
<div class="cardContainer">
<div data-folder="cs" class="card">
<div class="play">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
fill="none">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M5.25 5.78987C5.25 4.42081 6.7512 3.58195 7.91717 4.29947L18.0091 10.5099C19.1196 11.1933 19.1196 12.8074 18.0091 13.4907L7.91717 19.7011C6.7512 20.4187 5.25 19.5798 5.25 18.2107V5.78987Z"
fill="#141B34" />
</svg>
</div>
<img src="https://i.scdn.co/image/ab67706f00000002b55b6074da1d43715fc16d6d" alt="">
<h2>Happy Hits!</h2>
<p>Hits to boost your mood and fill you with happiness!</p>
</div>
<div data-folder="ncs" class="card">
<div class="play">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
fill="none">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M5.25 5.78987C5.25 4.42081 6.7512 3.58195 7.91717 4.29947L18.0091 10.5099C19.1196 11.1933 19.1196 12.8074 18.0091 13.4907L7.91717 19.7011C6.7512 20.4187 5.25 19.5798 5.25 18.2107V5.78987Z"
fill="#141B34" />
</svg>
</div>
<img src="https://i.scdn.co/image/ab67706f00000002b55b6074da1d43715fc16d6d" alt="">
<h2>Happy Hits!</h2>
<p>Hits to boost your mood and fill you with happiness!</p>
</div>
</div>
<div class="playbar">
<div class="seekbar">
<div class="circle">
</div>
</div>
<div class="abovebar">
<div class="songinfo">
</div>
<div class="songbuttons">
<img width="35" id="previous" src="prevsong.svg" alt="">
<img width="35" id="play" src="play.svg" alt="">
<img width="35" id="next" src="nextsong.svg" alt="">
</div>
<div class="timevol">
<div class="songtime">
</div>
<div class="volume">
<img width="25" src="volume.svg" alt="">
<div class="range"><!DOCTYPE html>
- Home
- Search
Your Library
<div class="songlist">
<ul>
</ul>
</div>
<div class="footer">
<div><a href="https://www.spotify.com/jp/legal/"><span>Legal</span></a></div>
<div><a href="https://www.spotify.com/jp/privacy/"><span>Privacy Center</span></a></div>
<div><a href="https://www.spotify.com/jp/legal/privacy-policy/"><span>Privacy Policy</span></a>
</div>
<div><a href="https://www.spotify.com/jp/legal/cookies-policy/"><span>Cookies</span></a></div>
<div><a href="https://www.spotify.com/jp/legal/privacy-policy/#s3"><span>About Ads</span></a></div>
<div><a href="https://www.spotify.com/jp/accessibility/"><span>Accessibility</span></a></div>
</div>
</div>
</div>
<div class="right bg-grey rounded">
<div class="header">
<div class="nav">
<div class="hamburgerContainer">
<img width="40" class="invert hamburger" src="hamburger.svg" alt="">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M15 6L9.70711 11.2929C9.37377 11.6262 9.20711 11.7929 9.20711 12C9.20711 12.2071 9.37377 12.3738 9.70711 12.7071L15 18"
stroke="#ffffff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M9 18L14.2929 12.7071C14.6262 12.3738 14.7929 12.2071 14.7929 12C14.7929 11.7929 14.6262 11.6262 14.2929 11.2929L9 6"
stroke="#ffffff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</div>
</div>
<div class="buttons">
<button class="signupbtn">Sign up</button>
<button class="loginbtn">Log in</button>
</div>
</div>
<div class="SpotifyPlaylists">
<h1>Spotify Playlists</h1>
<div class="cardContainer">
<div data-folder="cs" class="card">
<div class="play">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
fill="none">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M5.25 5.78987C5.25 4.42081 6.7512 3.58195 7.91717 4.29947L18.0091 10.5099C19.1196 11.1933 19.1196 12.8074 18.0091 13.4907L7.91717 19.7011C6.7512 20.4187 5.25 19.5798 5.25 18.2107V5.78987Z"
fill="#141B34" />
</svg>
</div>
<img src="https://i.scdn.co/image/ab67706f00000002b55b6074da1d43715fc16d6d" alt="">
<h2>Happy Hits!</h2>
<p>Hits to boost your mood and fill you with happiness!</p>
</div>
<div data-folder="ncs" class="card">
<div class="play">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
fill="none">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M5.25 5.78987C5.25 4.42081 6.7512 3.58195 7.91717 4.29947L18.0091 10.5099C19.1196 11.1933 19.1196 12.8074 18.0091 13.4907L7.91717 19.7011C6.7512 20.4187 5.25 19.5798 5.25 18.2107V5.78987Z"
fill="#141B34" />
</svg>
</div>
<img src="https://i.scdn.co/image/ab67706f00000002b55b6074da1d43715fc16d6d" alt="">
<h2>Happy Hits!</h2>
<p>Hits to boost your mood and fill you with happiness!</p>
</div>
</div>
<div class="playbar">
<div class="seekbar">
<div class="circle">
</div>
</div>
<div class="abovebar">
<div class="songinfo">
</div>
<div class="songbuttons">
<img width="35" id="previous" src="prevsong.svg" alt="">
<img width="35" id="play" src="play.svg" alt="">
<img width="35" id="next" src="nextsong.svg" alt="">
</div>
<div class="timevol">
<div class="songtime">
</div>
<div class="volume">
<img width="25" src="volume.svg" alt="">
<div class="range">
<input type="range" name="volume" id="">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="script.js"></script>
CSS :- @import url('https://fonts.googleapis.com/css2?family=Lato:wght@700&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
:root{ --a:0; }
- { margin: 0px; padding: 0px; font-family: 'Roboto', sans-serif; }
.close { display: none; }
body { background-color: black; }
.left { width: 25vw; padding: 10px; }
.right { width: 75vw; }
/* .home {} */
.home ul li { width: 14px; display: flex; list-style: none; gap: 15px; padding-top: 14px; font-weight: bold;
}
.heading { width: 100%; display: flex; gap: 15px; padding-top: 14px; padding: 23px 14px; font-weight: bold; align-items: center; font-size: 13px; }
.heading img { width: 20px; }
.library { min-height: 90vh; position: relative; }
.footer { display: flex; font-size: 9.2px; color: grey; gap: 13px; position: absolute; bottom: 0; padding: 10px 0; }
.footer a { color: grey; }
.right { margin: 16px 0; position: relative; }
.header { display: flex; justify-content: space-between; background-color: rgb(34, 34, 34); }
.header>* { padding: 20px; }
.bg-black { background-color: black; color: white; }
.SpotifyPlaylists { padding: 16px; }
.SpotifyPlaylists h1 { padding: 16px; }
.cardContainer { margin: 30px; display: flex; gap: 10px; flex-wrap: wrap; overflow-y: auto; max-height: 70vh; }
.card { width: 200px; padding: 10px; border-radius: 5px; background-color: #252525; position: relative; transition: all .9s; }
.card:hover{ background-color: rgb(105, 103, 103); cursor: pointer; --a: 1; }
.card>* { padding-top: 10px; }
.card img { width: 100%; object-fit: contain; border-radius: 5px; }
.play { width: 48px; height: 48px; border-radius: 50%; background-color: #1fdf64; display: flex; align-items: center; justify-content: center; padding: 6px; box-sizing: border-box; position: absolute; top: 168px; right: 17px; opacity: var(--a); transition: all 1s ease-out; }
.buttons>* { margin: 0 12px; }
.signupbtn { background-color: rgb(34, 34, 34); color: rgb(156, 148, 148); font-weight: bold; border: none; outline: none; cursor: pointer; font-size: 16px; }
.signupbtn:hover { font-size: 1.01rem; color: white; }
.loginbtn { background-color: white; border-radius: 21px; padding: 10px; color: black; font-weight: bold; width: 79px; cursor: pointer; font-size: 16px; }
.loginbtn:hover { font-weight: bold; font-size: 17px; }
.playbar { position: fixed; bottom: 30px; filter: invert(1); background: #dad5d5; border-radius: 10px; width: 90%; min-height: 40px; padding: 12px; width: 70vw; }
.songbuttons { display: flex; justify-content: center; gap: 16px; }
.songlist ul { padding: 0 12px; }
.songlist ul li { list-style-type: decimal; display: flex; gap: 12px; cursor: pointer; padding: 12px 0; border: 1px solid white; margin: 12px 0; padding: 8px; border-radius: 5px; justify-content: space-between; }
.songlist { height: 544px; margin-bottom: 44px; overflow: auto; }
.hamburger { display: none; }
.hamburgerContainer { display: flex; justify-content: center; align-items: center; gap: 14px; }
.info div { word-break: break-all; }
.songlist .info { font-size: 13px; width: 344px; }
.playnow { display: flex; justify-content: center; align-items: center;
}
.playnow span { font-size: 15px; width: 64px; padding: 12px; }
.seekbar { height: 4px; width: 100%; background: black; border-radius: 10px; position: absolute; bottom: -5%; margin: 6px; left: 0%; cursor: pointer; }
.circle { width: 13px; height: 13px; border-radius: 13px; background-color: black; position: relative; bottom: 6px; left: 0%; transition: left 0.5s; }
.songbuttons img { cursor: pointer; }
.timevol { display: flex; justify-content: space-evenly; align-items: center; }
.songinfo { color: black; padding: 0 12px; width: 250px; }
.songtime { width: 125px; color: black; padding: 0 12px; }
.volume { display: flex; justify-content: center; align-items: center; gap: 12px; }
.abovebar { display: flex; justify-content: space-between; margin: 20px 0; }
@media (max-width: 1200px) { .left { position: absolute; left: -120%; transition: all .3s; z-index: 1; width: 373px; background-color: black; padding: 0; }
.songinfo,
.songtime {
width: auto;
}
.left .close {
position: absolute;
right: 31px;
top: 25px;
width: 29px;
}
.timevol {
display: flex;
justify-content: space-evenly;
align-items: center;
flex-direction: column;
gap: 13px;
}
.right {
width: 100vw;
}
.playbar {
width: calc(100vw - 75px);
}
.seekbar {
width: calc(100vw - 120px);
}
.hamburger {
display: block;
}
.right {
margin: 0;
}
.card {
width: 44vw;
}
.cardContainer {
margin: 0;
justify-content: center;
}
.close {
display: block;
}
.abovebar {
flex-direction: column;
gap: 23px;
align-items: center;
}
}
@media (max-width: 400px) { .card{ width: 84vw; } }
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@700&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
:root{ --a:0; }
- { margin: 0px; padding: 0px; font-family: 'Roboto', sans-serif; }
.close { display: none; }
body { background-color: black; }
.left { width: 25vw; padding: 10px; }
.right { width: 75vw; }
/* .home {} */
.home ul li { width: 14px; display: flex; list-style: none; gap: 15px; padding-top: 14px; font-weight: bold;
}
.heading { width: 100%; display: flex; gap: 15px; padding-top: 14px; padding: 23px 14px; font-weight: bold; align-items: center; font-size: 13px; }
.heading img { width: 20px; }
.library { min-height: 90vh; position: relative; }
.footer { display: flex; font-size: 9.2px; color: grey; gap: 13px; position: absolute; bottom: 0; padding: 10px 0; }
.footer a { color: grey; }
.right { margin: 16px 0; position: relative; }
.header { display: flex; justify-content: space-between; background-color: rgb(34, 34, 34); }
.header>* { padding: 20px; }
.bg-black { background-color: black; color: white; }
.SpotifyPlaylists { padding: 16px; }
.SpotifyPlaylists h1 { padding: 16px; }
.cardContainer { margin: 30px; display: flex; gap: 10px; flex-wrap: wrap; overflow-y: auto; max-height: 70vh; }
.card { width: 200px; padding: 10px; border-radius: 5px; background-color: #252525; position: relative; transition: all .9s; }
.card:hover{ background-color: rgb(105, 103, 103); cursor: pointer; --a: 1; }
.card>* { padding-top: 10px; }
.card img { width: 100%; object-fit: contain; border-radius: 5px; }
.play { width: 48px; height: 48px; border-radius: 50%; background-color: #1fdf64; display: flex; align-items: center; justify-content: center; padding: 6px; box-sizing: border-box; position: absolute; top: 168px; right: 17px; opacity: var(--a); transition: all 1s ease-out; }
.buttons>* { margin: 0 12px; }
.signupbtn { background-color: rgb(34, 34, 34); color: rgb(156, 148, 148); font-weight: bold; border: none; outline: none; cursor: pointer; font-size: 16px; }
.signupbtn:hover { font-size: 1.01rem; color: white; }
.loginbtn { background-color: white; border-radius: 21px; padding: 10px; color: black; font-weight: bold; width: 79px; cursor: pointer; font-size: 16px; }
.loginbtn:hover { font-weight: bold; font-size: 17px; }
.playbar { position: fixed; bottom: 30px; filter: invert(1); background: #dad5d5; border-radius: 10px; width: 90%; min-height: 40px; padding: 12px; width: 70vw; }
.songbuttons { display: flex; justify-content: center; gap: 16px; }
.songlist ul { padding: 0 12px; }
.songlist ul li { list-style-type: decimal; display: flex; gap: 12px; cursor: pointer; padding: 12px 0; border: 1px solid white; margin: 12px 0; padding: 8px; border-radius: 5px; justify-content: space-between; }
.songlist { height: 544px; margin-bottom: 44px; overflow: auto; }
.hamburger { display: none; }
.hamburgerContainer { display: flex; justify-content: center; align-items: center; gap: 14px; }
.info div { word-break: break-all; }
.songlist .info { font-size: 13px; width: 344px; }
.playnow { display: flex; justify-content: center; align-items: center;
}
.playnow span { font-size: 15px; width: 64px; padding: 12px; }
.seekbar { height: 4px; width: 100%; background: black; border-radius: 10px; position: absolute; bottom: -5%; margin: 6px; left: 0%; cursor: pointer; }
.circle { width: 13px; height: 13px; border-radius: 13px; background-color: black; position: relative; bottom: 6px; left: 0%; transition: left 0.5s; }
.songbuttons img { cursor: pointer; }
.timevol { display: flex; justify-content: space-evenly; align-items: center; }
.songinfo { color: black; padding: 0 12px; width: 250px; }
.songtime { width: 125px; color: black; padding: 0 12px; }
.volume { display: flex; justify-content: center; align-items: center; gap: 12px; }
.abovebar { display: flex; justify-content: space-between; margin: 20px 0; }
@media (max-width: 1200px) { .left { position: absolute; left: -120%; transition: all .3s; z-index: 1; width: 373px; background-color: black; padding: 0; }
.songinfo,
.songtime {
width: auto;
}
.left .close {
position: absolute;
right: 31px;
top: 25px;
width: 29px;
}
.timevol {
display: flex;
justify-content: space-evenly;
align-items: center;
flex-direction: column;
gap: 13px;
}
.right {
width: 100vw;
}
.playbar {
width: calc(100vw - 75px);
}
.seekbar {
width: calc(100vw - 120px);
}
.hamburger {
display: block;
}
.right {
margin: 0;
}
.card {
width: 44vw;
}
.cardContainer {
margin: 0;
justify-content: center;
}
.close {
display: block;
}
.abovebar {
flex-direction: column;
gap: 23px;
align-items: center;
}
}
@media (max-width: 400px) { .card{ width: 84vw; } }
/* .signupbtn:active{ text-decoration: underline; }
.home ul li:active{ text-decoration: underline;
} */
/* .signupbtn:active{ text-decoration: underline; }
.home ul li:active{ text-decoration: underline;
} */
JS : - console.log("Lets write the Java Script...") let currentSong = new Audio(); let songs; let currFolder;
function secondsToMinutesSeconds(seconds) { if (isNaN(seconds) || seconds < 0) { return "00:00"; }
const minutes = Math.floor(seconds / 60);
const remainingSeconds = Math.floor(seconds % 60);
const formattedMinutes = String(minutes).padStart(2, '0');
const formattedSeconds = String(remainingSeconds).padStart(2, '0');
return `${formattedMinutes}:${formattedSeconds}`;
}
async function getSongs(folder) {
currFolder = folder;
let a = await fetch(http://127.0.0.1:3000/${folder}/)
let response = await a.text();
let div = document.createElement("div")
div.innerHTML = response;
let as = div.getElementsByTagName("a")
songs = [];
for (let index = 0; index < as.length; index++) {
const element = as[index];
if (element.href.endsWith(".mp3")) {
songs.push(element.href.split(/${folder}/)[1])
}
}
// Show all the songs playlist // what was an error : If i can play the song but not play the song and if i can pause the song not paused the song.
let songUL = document.querySelector(".songlist").getElementsByTagName("ul")[0]
songUL.innerHTML = ""
for (const song of songs) {
songUL.innerHTML = songUL.innerHTML + `<li><img class="invert" width="34" src="music.svg" alt="">
<div class="info">
<div>${song.replaceAll("%20", " ")}</div>
<div>Amartya</div>
</div>
<div class="playnow">
<span>Play Now</span>
<img class="invert" src="play.svg" alt="">
</div> </li>`;
}
//Attach an event lessener to each song //
Array.from(document.querySelector(".songlist").getElementsByTagName("li")).forEach(e => {
e.addEventListener("click", element => {
// console.log(e.querySelector(".info").firstElementChild.innerHTML)
playMusic(e.querySelector(".info").firstElementChild.innerHTML.trim())
})
})
}
const playMusic = (track, pause=false) => {
// let audio = new Audio("/songs/" + track)
currentSong.src = /${currFolder}/ + track
if (!pause) {
currentSong.play()
play.src = "pause.svg"
}
document.querySelector(".songinfo").innerHTML = decodeURI(track)
document.querySelector(".songtime").innerHTML = "00:00 / 00:00"
}console.log("Lets write the Java Script...") let currentSong = new Audio(); let songs; let currFolder;
function secondsToMinutesSeconds(seconds) { if (isNaN(seconds) || seconds < 0) { return "00:00"; }
const minutes = Math.floor(seconds / 60);
const remainingSeconds = Math.floor(seconds % 60);
const formattedMinutes = String(minutes).padStart(2, '0');
const formattedSeconds = String(remainingSeconds).padStart(2, '0');
return `${formattedMinutes}:${formattedSeconds}`;
}
async function getSongs(folder) {
currFolder = folder;
let a = await fetch(http://127.0.0.1:3000/${folder}/)
let response = await a.text();
let div = document.createElement("div")
div.innerHTML = response;
let as = div.getElementsByTagName("a")
songs = [];
for (let index = 0; index < as.length; index++) {
const element = as[index];
if (element.href.endsWith(".mp3")) {
songs.push(element.href.split(/${folder}/)[1])
}
}
// Show all the songs playlist // what was an error : If i can play the song but not play the song and if i can pause the song not paused the song.
let songUL = document.querySelector(".songlist").getElementsByTagName("ul")[0]
songUL.innerHTML = ""
for (const song of songs) {
songUL.innerHTML = songUL.innerHTML + `<li><img class="invert" width="34" src="music.svg" alt="">
<div class="info">
<div>${song.replaceAll("%20", " ")}</div>
<div>Amartya</div>
</div>
<div class="playnow">
<span>Play Now</span>
<img class="invert" src="play.svg" alt="">
</div> </li>`;
}
//Attach an event lessener to each song //
Array.from(document.querySelector(".songlist").getElementsByTagName("li")).forEach(e => {
e.addEventListener("click", element => {
// console.log(e.querySelector(".info").firstElementChild.innerHTML)
playMusic(e.querySelector(".info").firstElementChild.innerHTML.trim())
})
})
}
const playMusic = (track, pause=false) => {
// let audio = new Audio("/songs/" + track)
currentSong.src = /${currFolder}/ + track
if (!pause) {
currentSong.play()
play.src = "pause.svg"
}
document.querySelector(".songinfo").innerHTML = decodeURI(track)
document.querySelector(".songtime").innerHTML = "00:00 / 00:00"
}
async function displayAlbums() {
let a = await fetch(http://127.0.0.1:3000/songs/)
let response = await a.text();
let div = document.createElement("div")
div.innerHTML = response;
let anchors = div.getElementsByTagName("a")
let cardContainer = document.querySelector(".cardContainer")
Array.from(anchors).forEach(async e => {
if (e.href.includes("/songs")) {
let folder = e.href.split("/").slice(-2)[0]
// Get the meta data of the folder //
let a = await fetch(http://127.0.0.1:3000/songs/${folder}/info.json)
let response = await a.json();
console.log(response)
cardContainer.innerHTML = cardContainer.innerHTML + <div data-folder="cs" class="card"> <div class="play"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"> <path fill-rule="evenodd" clip-rule="evenodd" d="M5.25 5.78987C5.25 4.42081 6.7512 3.58195 7.91717 4.29947L18.0091 10.5099C19.1196 11.1933 19.1196 12.8074 18.0091 13.4907L7.91717 19.7011C6.7512 20.4187 5.25 19.5798 5.25 18.2107V5.78987Z" fill="#141B34" /> </svg> </div> <img src="/songs/${folder}/cover.jpg" alt=""> <h2>${response.title}</h2> <p>${response.description}</p> </div>
}
})
}
async function main() { // Get the list of all the songs // await getSongs("songs/ncs") // Load folder // playMusic(songs[0], true)
// Display all the albums on the page //
displayAlbums()
//Attach an event lessener to previous, play, next //
play.addEventListener("click", () => {
if (currentSong.paused) {
currentSong.play()
play.src = "pause.svg"
}
else {
currentSong.pause()
play.src = "play.svg"
}
})
// Listen for timeupdate event //
currentSong.addEventListener("timeupdate", () => {
// console.log(currentSong.currentTime, currentSong.duration);
document.querySelector(".songtime").innerHTML = `${secondsToMinutesSeconds(currentSong.currentTime)} / ${secondsToMinutesSeconds(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 listner for hamburger //
document.querySelector(".hamburger").addEventListener("click", () => {
document.querySelector(".left").style.left = "0"
})
// Add an event listner for close button //
document.querySelector(".close").addEventListener("click", () => {
document.querySelector(".left").style.left = "-120%"
})
// Add an event listner for previous and next..... //
// Add an event listner for previous //
previous.addEventListener("click", () => {
currentSong.pause()
console.log("Previous clicked")
// console.log(currentSong)
let index = songs.indexOf(currentSong.src.split("/").slice(-1)[0])
if ((index - 1) >= 0) {
playMusic(songs[index - 1])
}
})
// Add an event listner for next //
next.addEventListener("click", () => {
currentSong.pause()
console.log("Next clicked")
let index = songs.indexOf(currentSong.src.split("/").slice(-1)[0])
if ((index + 1) < songs.length) {
playMusic(songs[index + 1])
}
})
// Add an event to volume //
document.querySelector(".range").getElementsByTagName("input")[0].addEventListener("change", (e) => {
console.log("setting volume to", e.target.value, "/ 100")
currentSong.volume = parseInt(e.target.value) / 100
})
// Load the playlist whenever card is clicked //
Array.from(document.getElementsByClassName("card")).forEach(e => {
e.addEventListener("click", async item => {
// console.log(item.target, item.currentTarget.dataset)
songs = await getSongs(`songs/${item.currentTarget.dataset.folder}`)
})
})
}
main()
https://github.com/user-attachments/assets/e1849237-7e56-41d4-bf1b-e247b55005d3
https://github.com/user-attachments/assets/f82bbe33-42dc-4443-8178-fbd471abb83e
https://github.com/user-attachments/assets/6d6c2c4f-5ffc-4f20-a319-06ee74607e39
async function displayAlbums() {
let a = await fetch(http://127.0.0.1:3000/songs/)
let response = await a.text();
let div = document.createElement("div")
div.innerHTML = response;
let anchors = div.getElementsByTagName("a")
let cardContainer = document.querySelector(".cardContainer")
Array.from(anchors).forEach(async e => {
if (e.href.includes("/songs")) {
let folder = e.href.split("/").slice(-2)[0]
// Get the meta data of the folder //
let a = await fetch(http://127.0.0.1:3000/songs/${folder}/info.json)
let response = await a.json();
console.log(response)
cardContainer.innerHTML = cardContainer.innerHTML + <div data-folder="cs" class="card"> <div class="play"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"> <path fill-rule="evenodd" clip-rule="evenodd" d="M5.25 5.78987C5.25 4.42081 6.7512 3.58195 7.91717 4.29947L18.0091 10.5099C19.1196 11.1933 19.1196 12.8074 18.0091 13.4907L7.91717 19.7011C6.7512 20.4187 5.25 19.5798 5.25 18.2107V5.78987Z" fill="#141B34" /> </svg> </div> <img src="/songs/${folder}/cover.jpg" alt=""> <h2>${response.title}</h2> <p>${response.description}</p> </div>
}
})
}
async function main() { // Get the list of all the songs // await getSongs("songs/ncs") // Load folder // playMusic(songs[0], true)
// Display all the albums on the page //
displayAlbums()
//Attach an event lessener to previous, play, next //
play.addEventListener("click", () => {
if (currentSong.paused) {
currentSong.play()
play.src = "pause.svg"
}
else {
currentSong.pause()
play.src = "play.svg"
}
})
// Listen for timeupdate event //
currentSong.addEventListener("timeupdate", () => {
// console.log(currentSong.currentTime, currentSong.duration);
document.querySelector(".songtime").innerHTML = `${secondsToMinutesSeconds(currentSong.currentTime)} / ${secondsToMinutesSeconds(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 listner for hamburger //
document.querySelector(".hamburger").addEventListener("click", () => {
document.querySelector(".left").style.left = "0"
})
// Add an event listner for close button //
document.querySelector(".close").addEventListener("click", () => {
document.querySelector(".left").style.left = "-120%"
})
// Add an event listner for previous and next..... //
// Add an event listner for previous //
previous.addEventListener("click", () => {
currentSong.pause()
console.log("Previous clicked")
// console.log(currentSong)
let index = songs.indexOf(currentSong.src.split("/").slice(-1)[0])
if ((index - 1) >= 0) {
playMusic(songs[index - 1])
}
})
// Add an event listner for next //
next.addEventListener("click", () => {
currentSong.pause()
console.log("Next clicked")
let index = songs.indexOf(currentSong.src.split("/").slice(-1)[0])
if ((index + 1) < songs.length) {
playMusic(songs[index + 1])
}
})
// Add an event to volume //
document.querySelector(".range").getElementsByTagName("input")[0].addEventListener("change", (e) => {
console.log("setting volume to", e.target.value, "/ 100")
currentSong.volume = parseInt(e.target.value) / 100
})
// Load the playlist whenever card is clicked //
Array.from(document.getElementsByClassName("card")).forEach(e => {
e.addEventListener("click", async item => {
// console.log(item.target, item.currentTarget.dataset)
songs = await getSongs(`songs/${item.currentTarget.dataset.folder}`)
})
})
}
main()
This error are showing :
Lets write the Java Script... script.js:87 GET http://127.0.0.1:3000/songs/ncs/info.json 404 (Not Found) (anonymous) @ script.js:87 displayAlbums @ script.js:83 await in displayAlbums main @ script.js:114 await in main (anonymous) @ script.js:198 script.js:87 GET http://127.0.0.1:3000/songs/songs/info.json 404 (Not Found) (anonymous) @ script.js:87 displayAlbums @ script.js:83 await in displayAlbums main @ script.js:114 await in main (anonymous) @ script.js:198 script.js:87 GET http://127.0.0.1:3000/songs/songs/info.json 404 (Not Found) (anonymous) @ script.js:87 displayAlbums @ script.js:83 await in displayAlbums main @ script.js:114 await in main (anonymous) @ script.js:198 script.js:89 {title: 'No Copyright Songs', description: 'Songs for you'}description: "Songs for you"title: "No Copyright Songs"[[Prototype]]: Object script.js:87 GET http://127.0.0.1:3000/songs/songs/info.json 404 (Not Found) (anonymous) @ script.js:87 displayAlbums @ script.js:83 await in displayAlbums main @ script.js:114 await in main (anonymous) @ script.js:198 VM15705:2 Uncaught (in promise) SyntaxError: Unexpected token '<', " <!DOCTYPE "... is not valid JSON VM15706:2 Uncaught (in promise) SyntaxError: Unexpected token '<', " <!DOCTYPE "... is not valid JSON VM15707:2 Uncaught (in promise) SyntaxError: Unexpected token '<', " <!DOCTYPE "... is not valid JSON script.js:87 GET http://127.0.0.1:3000/songs/songs/info.json 404 (Not Found) (anonymous) @ script.js:87 displayAlbums @ script.js:83 await in displayAlbums main @ script.js:114 await in main (anonymous) @ script.js:198 script.js:87 GET http://127.0.0.1:3000/songs/songs/info.json 404 (Not Found) (anonymous) @ script.js:87 displayAlbums @ script.js:83 await in displayAlbums main @ script.js:114 await in main (anonymous) @ script.js:198 VM15708:2 Uncaught (in promise) SyntaxError: Unexpected token '<', " <!DOCTYPE "... is not valid JSON VM15710:2 Uncaught (in promise) SyntaxError: Unexpected token '<', " <!DOCTYPE "... is not valid JSON script.js:87 GET http://127.0.0.1:3000/songs/songs/info.json 404 (Not Found) (anonymous) @ script.js:87 displayAlbums @ script.js:83 await in displayAlbums main @ script.js:114 await in main (anonymous) @ script.js:198 VM15711:2 Uncaught (in promise) SyntaxError: Unexpected token '<', " <!DOCTYPE "... is not valid JSON VM15712:2 Uncaught (in promise) SyntaxError: Unexpected token '<', " <!DOCTYPE "... is not valid JSON script.js:87 GET http://127.0.0.1:3000/songs/songs/info.json 404 (Not Found) (anonymous) @ script.js:87 displayAlbums @ script.js:83 await in displayAlbums main @ script.js:114 await in main (anonymous) @ script.js:198 VM15713:2 Uncaught (in promise) SyntaxError: Unexpected token '<', " <!DOCTYPE "... is not valid JSON script.js:87 GET http://127.0.0.1:3000/songs/songs/info.json 404 (Not Found) (anonymous) @ script.js:87 displayAlbums @ script.js:83 await in displayAlbums main @ script.js:114 await in main (anonymous) @ script.js:198 VM15714:2 Uncaught (in promise) SyntaxError: Unexpected token '<', " <!DOCTYPE "... is not valid JSON script.js:87 GET http://127.0.0.1:3000/songs/songs/info.json 404 (Not Found) (anonymous) @ script.js:87 displayAlbums @ script.js:83 await in displayAlbums main @ script.js:114 await in main (anonymous) @ script.js:198 VM15715:2 Uncaught (in promise) SyntaxError: Unexpected token '<', " <!DOCTYPE "... is not valid JSON script.js:87 GET http://127.0.0.1:3000/songs/songs/info.json 404 (Not Found) (anonymous) @ script.js:87 displayAlbums @ script.js:83 await in displayAlbums main @ script.js:114 await in main (anonymous) @ script.js:198 VM15716:2 Uncaught (in promise) SyntaxError: Unexpected token '<', " <!DOCTYPE "... is not valid JSON script.js:87 GET http://127.0.0.1:3000/songs/songs/info.json 404 (Not Found) (anonymous) @ script.js:87 displayAlbums @ script.js:83 await in displayAlbums main @ script.js:114 await in main (anonymous) @ script.js:198 VM15717:2 Uncaught (in promise) SyntaxError: Unexpected token '<', " <!DOCTYPE "... is not valid JSON script.js:87 GET http://127.0.0.1:3000/songs/songs/info.json 404 (Not Found) (anonymous) @ script.js:87 displayAlbums @ script.js:83 await in displayAlbums main @ script.js:114 await in main (anonymous) @ script.js:198Lets write the Java Script... script.js:87 GET http://127.0.0.1:3000/songs/ncs/info.json 404 (Not Found) (anonymous) @ script.js:87 displayAlbums @ script.js:83 await in displayAlbums main @ script.js:114 await in main (anonymous) @ script.js:198 script.js:87 GET http://127.0.0.1:3000/songs/songs/info.json 404 (Not Found) (anonymous) @ script.js:87 displayAlbums @ script.js:83 await in displayAlbums main @ script.js:114 await in main (anonymous) @ script.js:198 script.js:87 GET http://127.0.0.1:3000/songs/songs/info.json 404 (Not Found) (anonymous) @ script.js:87 displayAlbums @ script.js:83 await in displayAlbums main @ script.js:114 await in main (anonymous) @ script.js:198 script.js:89 {title: 'No Copyright Songs', description: 'Songs for you'}description: "Songs for you"title: "No Copyright Songs"[[Prototype]]: Object script.js:87 GET http://127.0.0.1:3000/songs/songs/info.json 404 (Not Found) (anonymous) @ script.js:87 displayAlbums @ script.js:83 await in displayAlbums main @ script.js:114 await in main (anonymous) @ script.js:198 VM15705:2 Uncaught (in promise) SyntaxError: Unexpected token '<', " <!DOCTYPE "... is not valid JSON VM15706:2 Uncaught (in promise) SyntaxError: Unexpected token '<', " <!DOCTYPE "... is not valid JSON VM15707:2 Uncaught (in promise) SyntaxError: Unexpected token '<', " <!DOCTYPE "... is not valid JSON script.js:87 GET http://127.0.0.1:3000/songs/songs/info.json 404 (Not Found) (anonymous) @ script.js:87 displayAlbums @ script.js:83 await in displayAlbums main @ script.js:114 await in main (anonymous) @ script.js:198 script.js:87 GET http://127.0.0.1:3000/songs/songs/info.json 404 (Not Found) (anonymous) @ script.js:87 displayAlbums @ script.js:83 await in displayAlbums main @ script.js:114 await in main (anonymous) @ script.js:198 VM15708:2 Uncaught (in promise) SyntaxError: Unexpected token '<', " <!DOCTYPE "... is not valid JSON VM15710:2 Uncaught (in promise) SyntaxError: Unexpected token '<', " <!DOCTYPE "... is not valid JSON script.js:87 GET http://127.0.0.1:3000/songs/songs/info.json 404 (Not Found) (anonymous) @ script.js:87 displayAlbums @ script.js:83 await in displayAlbums main @ script.js:114 await in main (anonymous) @ script.js:198 VM15711:2 Uncaught (in promise) SyntaxError: Unexpected token '<', " <!DOCTYPE "... is not valid JSON VM15712:2 Uncaught (in promise) SyntaxError: Unexpected token '<', " <!DOCTYPE "... is not valid JSON script.js:87 GET http://127.0.0.1:3000/songs/songs/info.json 404 (Not Found) (anonymous) @ script.js:87 displayAlbums @ script.js:83 await in displayAlbums main @ script.js:114 await in main (anonymous) @ script.js:198 VM15713:2 Uncaught (in promise) SyntaxError: Unexpected token '<', " <!DOCTYPE "... is not valid JSON script.js:87 GET http://127.0.0.1:3000/songs/songs/info.json 404 (Not Found) (anonymous) @ script.js:87 displayAlbums @ script.js:83 await in displayAlbums main @ script.js:114 await in main (anonymous) @ script.js:198 VM15714:2 Uncaught (in promise) SyntaxError: Unexpected token '<', " <!DOCTYPE "... is not valid JSON script.js:87 GET http://127.0.0.1:3000/songs/songs/info.json 404 (Not Found) (anonymous) @ script.js:87 displayAlbums @ script.js:83 await in displayAlbums main @ script.js:114 await in main (anonymous) @ script.js:198 VM15715:2 Uncaught (in promise) SyntaxError: Unexpected token '<', " <!DOCTYPE "... is not valid JSON script.js:87 GET http://127.0.0.1:3000/songs/songs/info.json 404 (Not Found) (anonymous) @ script.js:87 displayAlbums @ script.js:83 await in displayAlbums main @ script.js:114 await in main (anonymous) @ script.js:198 VM15716:2 Uncaught (in promise) SyntaxError: Unexpected token '<', " <!DOCTYPE "... is not valid JSON script.js:87 GET http://127.0.0.1:3000/songs/songs/info.json 404 (Not Found) (anonymous) @ script.js:87 displayAlbums @ script.js:83 await in displayAlbums main @ script.js:114 await in main (anonymous) @ script.js:198 VM15717:2 Uncaught (in promise) SyntaxError: Unexpected token '<', " <!DOCTYPE "... is not valid JSON script.js:87 GET http://127.0.0.1:3000/songs/songs/info.json 404 (Not Found) (anonymous) @ script.js:87 displayAlbums @ script.js:83 await in displayAlbums main @ script.js:114 await in main (anonymous) @ script.js:198 VM15718:2 Uncaught (in promise) SyntaxError: Unexpected token '<', " <!DOCTYPE "... is not valid JSON script.js:87 GET http://127.0.0.1:3000/songs/songs/info.json 404 (Not Found) (anonymous) @ script.js:87 displayAlbums @ script.js:83 await in displayAlbums main @ script.js:114 await in main (anonymous) @ script.js:198 VM15719:2 Uncaught (in promise) SyntaxError: Unexpected token '<', " <!DOCTYPE "... is not valid JSON script.js:87 GET http://127.0.0.1:3000/songs/songs/info.json 404 (Not Found) (anonymous) @ script.js:87 displayAlbums @ script.js:83 await in displayAlbums main @ script.js:114 await in main (anonymous) @ script.js:198 VM15720:2 Uncaught (in promise) SyntaxError: Unexpected token '<', " <!DOCTYPE "... is not valid JSON VM15718:2 Uncaught (in promise) SyntaxError: Unexpected token '<', " <!DOCTYPE "... is not valid JSON script.js:87 GET http://127.0.0.1:3000/songs/songs/info.json 404 (Not Found) (anonymous) @ script.js:87 displayAlbums @ script.js:83 await in displayAlbums main @ script.js:114 await in main (anonymous) @ script.js:198 VM15719:2 Uncaught (in promise) SyntaxError: Unexpected token '<', " <!DOCTYPE "... is not valid JSON script.js:87 GET http://127.0.0.1:3000/songs/songs/info.json 404 (Not Found) (anonymous) @ script.js:87 displayAlbums @ script.js:83 await in displayAlbums main @ script.js:114 await in main (anonymous) @ script.js:198 VM15720:2 Uncaught (in promise) SyntaxError: Unexpected token '<', " <!DOCTYPE "... is not valid JSON
Please harry sir told me how to solve this cods!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
