So I’ve been creating an html music player, and I’ve run into a problem. The problem is that when I click on an album, it filters out all the song that belong to any album, instead of filtering out the songs that only belong to the clicked album. Here is my .js files.
main.js
var btnv = 0;
var update = 0;
var NumberOfSongs = 37;
function Dropdown() {
var i = 0;
if (i == 0) {
i++;
document.getElementById("Dropbutton").classList.toggle("dropbtnclick");
document.getElementById("Dropbutton").classList.toggle("dropbtnpos");
document.getElementById("myDropdown").classList.toggle("show");
document.getElementById("PlaylistDropdown").classList.toggle("show");
document.getElementById("SearchBox").setAttribute("style", "height: 30px;");
} else {
i--;
document.getElementById("Dropbutton").classList.remove("dropbtnclick");
}}
window.onerror = function(error) {console.log(error);};
function startUI() {
var SB;
for (SB = 0; SB < NumberOfSongs;) {
SB++;
let NewSongBtn = document.createElement("a");
NewSongBtn.id = SB;
NewSongBtn.setAttribute("style", "color: white; padding: 10px 50px; text-decoration: none; text-align: left; display: block; border-top: 0.9px solid #9B9898;");
NewSongBtn.innerHTML = titles[SB] + " -- " + artists[SB];
NewSongBtn.onclick = function() {Playbutton(NewSongBtn.id);};
let LI = document.createElement("li");
LI.appendChild(NewSongBtn);
document.getElementById("SongBtns").appendChild(LI);
}
var n;
for (n = 0; n < NumberOfSongs; n++) {}
createAlbums();
}
function createAlbums() {
var AB;
for (AB = 0; AB < NumberOfSongs;) {
AB++;
if (AlbumName[AB] == "") {} else {
if (AlbumIMG[AB] == "") {} else {
let NewAlbumBtn = document.createElement("div");
NewAlbumBtn.classList.toggle("column");
NewAlbumBtn.id = AB;
NewAlbumBtn.setAttribute("style", "float: left; width: 25%; padding: 0 8px; text-align:center;align-items:center; display: inline-block; float: none; white-space: nowrap; overflow: hidden; text-overflow:ellipsis;");
//NewAlbumBtn.innerHTML = AlbumName[AB];
NewAlbumBtn.onclick = function() {PlayAlbum(NewAlbumBtn.id);};
let IMG = document.createElement("img");
IMG.src = AlbumIMG[AB];
IMG.style.width = "100%";
NewAlbumBtn.appendChild(IMG);
let text = document.createElement("p");
text.innerHTML = AlbumName[AB];
NewAlbumBtn.appendChild(text);
document.getElementById("albums").appendChild(NewAlbumBtn);
}}}}
function PlayAlbum(clicked_id) {
Id = clicked_id;
var AN;
for (AN = 0; AN < NumberOfSongs;) {
AN++;
let AB = document.getElementById(AN);
if (AlbumName[AB.id] == AlbumName[Id]) {
console.log("AlbumName " + AlbumName[Id]);
} else {
console.log("id: " + Id.id + " AB " + AB.id);
AB.remove();
}
}
}
function Update() {
let UpdateContainer = document.createElement("div");
UpdateContainer.id = "UC";
UpdateContainer.classList.toggle("NewUpdate");
document.body.appendChild(UpdateContainer);
let Updatetxt = document.createElement("div");
Updatetxt.id = "UTXT";
var wm = "Welcome to LanyxSoft Music!";
var wmr= wm.bold();
Updatetxt.innerHTML = wmr + " please note that this web player is still in beta testing mode meaning that there will most likely be issues. Thank you for you coaperation.";
Updatetxt.setAttribute("style", "z-index: 7; position: fixed; left: 50%; top: 15%; transform: translate(-50%, -50%); text-align: center; color: black; font-size: 20px; width: 430px;")
UpdateContainer.appendChild(Updatetxt);
let Updatebackground = document.createElement("div");
Updatebackground.id = "UB";
Updatebackground.classList.toggle("UpdateBackground");
document.body.appendChild(Updatebackground);
let UpdateScrollController = document.createElement("div");
UpdateScrollController.setAttribute("style", "z-index: 7; position: fixed; left: 50%; top: 40%; transform: translate(-50%, -50%); text-align: left; color: black; font-size: 20px; width: 430px; height: 120px;")
UpdateScrollController.id = "USC";
UpdateContainer.appendChild(UpdateScrollController);
let UpdateHead = document.createElement("div");
UpdateHead.id = "UH";
var u = "UPDATES";
var ur = u.bold();
UpdateHead.innerHTML = ur;
UpdateHead.setAttribute("style", "position: relative; text-align: center; color: black; font-size: 23px; width: 430px;")
UpdateScrollController.appendChild(UpdateHead);
let Updatetxt2 = document.createElement("div");
Updatetxt2.id = "UTXT2";
var UTXT2B = "Automatic button creation";
Updatetxt2.innerHTML = UTXT2B.bold() + " makes the player's ability to load faster.";
Updatetxt2.setAttribute("style", "position: relative; text-align: left; color: black; font-size: 20px; width: 430px;")
UpdateScrollController.appendChild(Updatetxt2);
let Updatetxt3 = document.createElement("div");
Updatetxt3.id = "UTXT3";
var UTXT3B = "Automatic Update notifications";
Updatetxt3.innerHTML = UTXT3B.bold() + " makes sure that when there's a new update, you will be notified.";
Updatetxt3.setAttribute("style", "position: relative; text-align: left; color: black; font-size: 20px; width: 430px;")
UpdateScrollController.appendChild(Updatetxt3);
let Updatetxt4 = document.createElement("div");
Updatetxt4.id = "UTXT4";
var UTXT4B = "More Album Art";
Updatetxt4.innerHTML = UTXT4B.bold() + " new and updated album art.";
Updatetxt4.setAttribute("style", "position: relative; text-align: left; color: black; font-size: 20px; width: 430px;")
UpdateScrollController.appendChild(Updatetxt4);
let Updatebutton = document.createElement("div");
Updatebutton.id = "UBTN";
Updatebutton.classList.toggle("UpdateCB");
Updatebutton.style.fontSize = "xx-large";
Updatebutton.innerHTML = "Continue";
Updatebutton.onclick = function() {document.getElementById("UTXT").style.visibility = "hidden"; document.getElementById("UTXT2").style.visibility = "hidden"; document.getElementById("UC").style.visibility = "hidden"; document.getElementById("UB").style.visibility = "hidden"; document.getElementById("UBTN").style.visibility = "hidden"; startUI();}
UpdateContainer.appendChild(Updatebutton);
}
var config = {apiKey:"AIzaSyAz0J5c0czjU3S2PddQdFxmnd52hGHqtWQ", authDomain: "fitbit-flex2-integration.firebaseapp.com", databaseURL: "https://fitbit-flex2-integration.firebaseio.com", projectId: "fitbit-flex2-integration", storageBucket: "fitbit-flex2-integration.appspot.com", messagingSenderId: "247113062436"};
firebase.initializeApp(config);
function InitializeStartzup() {
let id = localStorage.getItem("LUDIN");
var ref = firebase.database().ref('LanyxSoft-Music-Update/' + id + '/updatestats');
ref.on('value', function(snapshot) {
startUI();
});
}
function BeginUpdate() {
var postData = {};
let id = (0|Math.random()*9e6).toString(36)+"-"+(0|Math.random()*9e6).toString(36)+"-"+(0|Math.random()*9e6).toString(36);
var updates = {};
let L = localStorage.getItem("LUDIN");
Update();
firebase.database().ref('LanyxSoft-Music-Update/' + L).set({
updated : "true"
});
var ref = firebase.database().ref().child('/LanyxSoft-Music-Update/'+id);
ref.on("child_added", function(child) {
var IDofFriends = child.val();
if(IDofFriends == localStorage.getItem("LUDIN")) {
console.log("func: child_added result: User id matches to id in accepted LanyxSoft database");
} else {
console.log("func: child_added result: User id doesn't match to id in accepted LanyxSoft database");
}
});
//updates["/posts/" + "hihihihihi"] = postData;
return firebase.database().ref().update(updates);
}
//child_added
function SetID() {
let id = (0|Math.random()*9e6).toString(36)+"-"+(0|Math.random()*9e6).toString(36)+"-"+(0|Math.random()*9e6).toString(36);
localStorage.setItem("LUDIN", id);
BeginUpdate();
}
// Check browser support
if (typeof(Storage) !== "undefined") {
if (localStorage.getItem("LUDIN") == null) {
console.log("func: SetID() result:", true);
SetID();
} else {
console.log("func: InitializeStartzup() result:", true); //console.log("func: InitializeStartzup() result: func success= "+ true);
InitializeStartzup();
}
} else {
Update();
console.log("s means that some feature aren't available on this device");
}
function drop() {
}
window.onclick = function(event, clicked_id) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
//openDropdown.classList.remove('show');
}}}}
//labels
//buttons
var input = document.getElementById("button");
var input2 = document.getElementById("button2");
//text/labels/numbers
//number vals
var num = 1;
var a = new Date();
var mt = a.getMonth() + 1;
var dy = a.getDate();
var yr = a.getFullYear();
var tm = a.getHours()+":"+a.getMinutes();
var dateFormat = mt+"/"+dy+"/"+yr+"_"+tm;
//labels
var audiotitle = document.getElementById("audiotitle");
var audioartist = document.getElementById("artist");
var image = document.getElementById("AlbumArt");
var x = document.getElementById("myAudio");
var percent = document.getElementById("currentlbl");
audiotitle.innerHTML = x.title;
//inputslider
var slider = document.getElementById("myRange");
slider.oninput = function() {
percent.innerHTML = this.value + "%";
x.currentTime = slider.value;
}
//device orientation functions
function zoomOutMobile() {
var viewport = document.querySelector('meta[name="viewport"]');
if ( viewport ) {
viewport.content = "width=device-width, initial-scale=1.0";
}
}
function readDeviceOrientation() {
switch (window.orientation) {
case 0:
// Portrait
document.getElementById("PlaylistC").style.visibility = "hidden";
document.getElementById("PlaylistC").style.display = "none";
document.getElementById("container").setAttribute("style", "top: 5%; position: relative; width: 330px; min-height:480px; background: #333; overflow: auto; margin: 20px auto; border-radius: 10px; box-shadow: 0 10px 8px -8px #333; align-items: center; text-align: center;");
break;
case 180:
// Portrait (Upside-down)
document.getElementById("PlaylistC").style.visibility = "hidden";
document.getElementById("PlaylistC").style.display = "none";
document.getElementById("container").setAttribute("style", "top: 5%; position: relative; width: 330px; min-height:480px; background: #333; overflow: auto; margin: 20px auto; border-radius: 10px; box-shadow: 0 10px 8px -8px #333; align-items: center; text-align: center;");
break;
case -90:
// Landscape (Clockwise)
document.getElementById("PlaylistC").style.visibility = "visible";
document.getElementById("PlaylistC").style.display = "block";
document.getElementById("container").setAttribute("style", "position: relative; width: 330px; min-height:480px; background: #333; overflow: auto; margin: 0px; left: 0; border-radius: 10px; box-shadow: 0 10px 8px -8px #333; align-items: center; text-align: center;");
zoomOutMobile();
break;
case 90:
// Landscape (Counterclockwise)
document.getElementById("PlaylistC").style.visibility = "visible";
document.getElementById("PlaylistC").style.display = "block";
document.getElementById("container").setAttribute("style", "position: relative; width: 330px; min-height:480px; background: #333; overflow: auto; margin: 0px; left: 0; border-radius: 10px; box-shadow: 0 10px 8px -8px #333; align-items: center; text-align: center;");
zoomOutMobile();
break;
}
}
readDeviceOrientation();
window.onorientationchange = readDeviceOrientation;
//SEARCH
//document.getElementById("SearchBox").addEventListener("keyup",);
function search() {
var input, filter, ui, li, a, w;
input = document.getElementById("SearchBox");
filter = input.value.toUpperCase();
ui = document.getElementById("PlaylistDropdown");
li = ui.getElementsByTagName("li");
//function for dd
for (w = 0; w < li.length; w++) {
a = li[w].getElementsByTagName("a")[0];
if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
li[w].style.display = "";
} else {
li[w].style.display = "none";
}}
}
/*function searchAlbums() {
var input, filter, ui, li, a, w;
input = document.getElementById("SearchBox");
filter = input.value.toUpperCase();
ui = document.getElementById("albums");
li = ui.getElementsByTagName("div");
//function for dd
for (w = 0; w < li.length; w++) {
a = li[w].getElementsByTagName("p")[0];
if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
li[w].style.display = "";
} else {
li[w].style.display = "none";
}}
}*/
function Shuffle() {
var s = Math.floor(Math.random() * NumberOfSongs) + 1;
x.title = titles[s];
audiotitle.innerHTML = x.title;
audioartist.innerHTML = artists[s];
if (albumart[s] == "") {
image.src = "https://iplock.weebly.com/uploads/9/5/7/3/95731436/p164.png";
} else {
image.src = albumart[s];
}
x.src = songs[s];
x.play();
num = 1;
playAudio();
}
var i = 1;
function keys() {
if (x.currentTime == x.duration) {
//x.src = sources.two;
i++;
x.title = titles[i];
audiotitle.innerHTML = x.title;
audioartist.innerHTML = artists[i];
if (albumart[i] == "") {
image.src = "https://iplock.weebly.com/uploads/9/5/7/3/95731436/p164.png";
} else {
image.src = albumart[i];
}
x.src = songs[i];
x.play();
num = 1;
playAudio();
}}
function next() {
i++;
x.title = titles[i];
audiotitle.innerHTML = x.title;
audioartist.innerHTML = artists[i];
if (albumart[i] == "") {
image.src = "https://iplock.weebly.com/uploads/9/5/7/3/95731436/p164.png";
} else {
image.src = albumart[i];
}
x.src = songs[i];
x.play();
num = 1;
playAudio();
}
function rewind() {
i--;
x.title = titles[i];
audiotitle.innerHTML = x.title;
audioartist.innerHTML = artists[i];
if (albumart[i] == "") {
image.src = "https://iplock.weebly.com/uploads/9/5/7/3/95731436/p164.png";
} else {
image.src = albumart[i];
}
x.src = songs[i];
x.play();
num = 1;
playAudio();
}
function Playbutton(clicked_id) {
i = clicked_id;
x.title = titles[i];
audiotitle.innerHTML = x.title;
audioartist.innerHTML = artists[i];
if (albumart[i] == "") {
image.src = "https://iplock.weebly.com/uploads/9/5/7/3/95731436/p164.png";
} else {
image.src = albumart[i];
}
x.src = songs[i];
x.play();
num = 1;
playAudio();
}
function startup() {
input2.style.display="none";
}
startup()
function playAudio() {
x.play();
if (num == 1) {
x.play();
//text.innerHTML = "pause";
input.style.display="none";
input2.style="visibility:visible;";
input2.style.display="block";
num = 0;
d = dateFormat + "playing";
} else {
x.pause();
//text.innerHTML = "play";
input2.style="visibility:hidden;";
input2.style.display="none";
input.style="visibility:visable;";
num = 1;
d = dateFormat + "paused";
}}
window.addEventListener('load', function() {
var cur = document.querySelector('#perc'),
vid = document.querySelector('#myAudio')
dur = document.getElementById("durationlbl");
per = document.getElementById("currentlbl");
})
myAudio.addEventListener('timeupdate', function(e) {
//current time
per.textContent = sToTime(e.target.currentTime);
//duraion
dur.textContent = sToTime(e.target.duration);
slider.value = x.currentTime;
//percent.innerHTML = x.currentTime;
slider.max = x.duration;
keys();
})
function sToTime(t) {
return padZero(parseInt((t / (60 * 60)) % 24)) + ":" +
padZero(parseInt((t / (60)) % 60)) + ":" +
padZero(parseInt((t) % 60));
}
function padZero(v) {
return (v < 10) ? "0" + v : v;
}
So in main.js I have the “brains” i guess, of the entire player. The function PlayAlbum(clicked_id) is the problem. That’s the function that is supposed to filter all the songs so that the only songs left are the ones from the clicked album.
song-list.js
var songs = {
1 : "https://iplock.weebly.com/uploads/9/5/7/3/95731436/i_like_me_better__bass_boosted_.m4a",
2 : "https://iplock.weebly.com/uploads/9/5/7/3/95731436/marshmello_ft._khalid_-_silence__official_lyric_video_.mp3",
3 : "https://iplock.weebly.com/uploads/9/5/7/3/95731436/marshmello_-_alone.mp3",
4 : "https://iplock.weebly.com/uploads/9/5/7/3/95731436/selena_gomez_marshmello_-_wolves__visualizer_.mp3",
5 : "https://iplock.weebly.com/uploads/9/5/7/3/95731436/wilson__expensive_mistakes_.mp3",
6 : "https://iplock.weebly.com/uploads/9/5/7/3/95731436/marshmello_x_lil_peep_-_spotlight__official_music_video_.mp3",
7 : "https://iplock.weebly.com/uploads/9/5/7/3/95731436/walk_it_talk_it.mp3",
8 : "https://iplock.weebly.com/uploads/9/5/7/3/95731436/friends_are_family_mp3.mp3",
9 : "https://iplock.weebly.com/uploads/9/5/7/3/95731436/imortals.mp3",
10 : "https://iplock.weebly.com/uploads/9/5/7/3/95731436/better_when_im_dancin_mp3.mp3",
11 : "https://iplock.weebly.com/uploads/9/5/7/3/95731436/ode_to_sleep_mp3.mp3",
12 : "https://iplock.weebly.com/uploads/9/5/7/3/95731436/shine_your_way.mp3",
13 : "https://iplock.weebly.com/uploads/9/5/7/3/95731436/fake_you_out.mp3",
14 : "https://iplock.weebly.com/uploads/9/5/7/3/95731436/uma_thurman_mp3.mp3",
15 : "https://iplock.weebly.com/uploads/9/5/7/3/95731436/migos__amp__marshmello_-_danger__from_bright__the_album__%5Bmusic_video%5D.mp3",
16 : "https://iplock.weebly.com/uploads/9/5/7/3/95731436/post_malone_-_rockstar_ft._21_savage__official_audio_.mp3",
17 : "https://iplock.weebly.com/uploads/9/5/7/3/95731436/thunder.mp3",
18 : "https://iplock.weebly.com/uploads/9/5/7/3/95731436/alan_walker_-_fade_%5Bncs_release%5D.mp3",
19 : "https://iplock.weebly.com/uploads/9/5/7/3/95731436/10__official_audio_.mp3",
20 : "https://iplock.weebly.com/uploads/9/5/7/3/95731436/lil_dicky_-_freaky_friday__lyrics__ft._chris_brown.mp3",
21 : "https://iplock.weebly.com/uploads/9/5/7/3/95731436/bastille_-_pompeii__lyrics_.mp3",
22 : "https://iplock.weebly.com/uploads/9/5/7/3/95731436/preme_-_jackie_chan__audio__ft._post_malone.mp3",
23 : "https://iplock.weebly.com/uploads/9/5/7/3/95731436/guns_for_hands_instrumental_mp3.mp3",
24 : "https://iplock.weebly.com/uploads/9/5/7/3/95731436/owl_city_-_fireflies__lyrics_.mp3",
25 : "https://iplock.weebly.com/uploads/9/5/7/3/95731436/logic_-_ballin__ft._castro___prod._arthur_mcarthur_.mp3",
26 : "https://iplock.weebly.com/uploads/9/5/7/3/95731436/live_it_up.mp3",
27 : "https://iplock.weebly.com/uploads/9/5/7/3/95731436/geronimo.mp3",
28 : "https://iplock.weebly.com/uploads/9/5/7/3/95731436/cardi_b_bad_bunny__amp__j_balvin_-_i_like_it_[official_music_video].mp3",
29 : "https://iplock.weebly.com/uploads/9/5/7/3/95731436/mkto_-_classic.mp3",
30 : "https://iplock.weebly.com/uploads/9/5/7/3/95731436/owl_city_-_verge_ft._aloe_blacc.mp3",
31 : "https://iplock.weebly.com/uploads/9/5/7/3/95731436/walk_the_moon_-_one_foot__official_video_.mp3",
32 : "https://iplock.weebly.com/uploads/9/5/7/3/95731436/marshmello__amp__logic_-_everyday__audio_.mp3",
33 : "https://iplock.weebly.com/uploads/9/5/7/3/95731436/fall_out_boy_-_bishops_knife_trick__lyrics_lyric_video_.mp3",
34 : "https://iplock.weebly.com/uploads/9/5/7/3/95731436/sheppard_-_coming_home__official_audio_.mp3",
35 : "https://iplock.weebly.com/uploads/9/5/7/3/95731436/bts__%E1%84%87%E1%85%A1%E1%86%BC%E1%84%90%E1%85%A1%E1%86%AB%E1%84%89%E1%85%A9%E1%84%82%E1%85%A7%E1%86%AB%E1%84%83%E1%85%A1%E1%86%AB__%E2%80%93_blood_sweat__amp__tears__%E1%84%91%E1%85%B5_%E1%84%84%E1%85%A1%E1%86%B7_%E1%84%82%E1%85%AE%E1%86%AB%E1%84%86%E1%85%AE%E1%86%AF__lyrics_[color_coded_han_rom_eng].mp3",
36 : "https://iplock.weebly.com/uploads/9/5/7/3/95731436/bts__bangtan_boys__%E1%84%87%E1%85%A1%E1%86%BC%E1%84%90%E1%85%A1%E1%86%AB%E1%84%89%E1%85%A9%E1%84%82%E1%85%A7%E1%86%AB%E1%84%83%E1%85%A1%E1%86%AB__-_i_need_u__color_coded_han|rom|eng_lyrics_.mp3",
37 : "https://iplock.weebly.com/uploads/9/5/7/3/95731436/bts__%E1%84%87%E1%85%A1%E1%86%BC%E1%84%90%E1%85%A1%E1%86%AB%E1%84%89%E1%85%A9%E1%84%82%E1%85%A7%E1%86%AB%E1%84%83%E1%85%A1%E1%86%AB__%E2%80%93_save_me__color_coded_han|rom|eng_lyrics__|_by_yankat.mp3"
}
var titles = {
1 : "I Like Me Better",
2 : "Silence ft. Khalid",
3 : "Alone (Spotify extended version)",
4 : "Wolves",
5 : "Wilson Expensive Mistakes",
6 : "Spotlight",
7 : "Walk it Talk it",
8 : "Friends Are Family",
9 : "Imortals",
10 : "Better When I'm Dancin",
11 : "Ode to Sleep",
12 : "Shine Your Way",
13 : "Fake You Out",
14 : "Uma Therman",
15 : "Danger",
16 : "Rockstar",
17 : "Thunder",
18 : "Faded",
19 : "6/10",
20 : "Freaky Friday",
21 : "Pompeii",
22 : "Jackie Chan",
23 : "Guns For Hands",
24 : "Fireflies",
25 : "Ballin'",
26 : "Live it Up",
27 : "Geronimo",
28 : "I Like it",
29 : "Classic",
30 : "Verge",
31 : "One Foot",
32 : "Everyday",
33 : "Bishops Knife Trick",
34 : "Coming Home",
35 : "Blood Sweat and Tears",
36 : "I Need U",
37 : "Save Me"
}
var albumart = {
1 : "https://is4-ssl.mzstatic.com/image/thumb/Music117/v4/c5/5f/e5/c55fe54a-8696-396b-977d-05d6e1000d6b/5056167100188_1.jpg/268x0w.jpg",
2 : "https://upload.wikimedia.org/wikipedia/en/thumb/c/c4/Marshmello_Silence.jpg/220px-Marshmello_Silence.jpg",
3 : "https://vignette.wikia.nocookie.net/monstercat/images/0/0c/Marshmello_-_Alone.jpg/revision/latest?cb=20160513204533",
4 : "https://is3-ssl.mzstatic.com/image/thumb/Music118/v4/68/6d/01/686d0165-5745-b529-fbfc-2f9bf79bce02/17UM1IM41679.jpg/268x0w.jpg",
5 : "https://images-na.ssl-images-amazon.com/images/I/41K3SuHNQpL._SS500.jpg",
6 : "",
7 : "",
8 : "",
9 : "",
10 : "https://i.ytimg.com/vi/npdg21rjowU/maxresdefault.jpg",
11 : "",
12 : "",
13 : "",
14 : "",
15 : "",
16 : "",
17 : "",
18 : "",
19 : "",
20 : "https://iplock.weebly.com/uploads/9/5/7/3/95731436/p157.png",
21 : "",
22 : "",
23 : "",
24 : "",
25 : "",
26 : "",
27 : "",
28 : "",
29 : "",
30 : "",
31 : "",
32 : "",
33 : "",
34 : "https://iplock.weebly.com/uploads/9/5/7/3/95731436/p184.png",
35 : "",
36 : "",
37 : ""
}
var artists = {
1 : "LAUV",
2 : "Marshmello and Khalid",
3 : "Marshmello",
4 : "Marshmello and Selena Gomez",
5 : "Fall Out Boy",
6 : "Marshmello ft. lil Peep",
7 : "Migos",
8 : "(undefined)",
9 : "Fall Out Boy",
10 : "Megan Trainer",
11 : "Twentyone Pilots",
12 : "Owl City",
13 : "Twentyone Pilots",
14 : "Fall Out Boy",
15 : "Marshmello ft. Migos and",
16 : "Post Malone ft. 21 Savage",
17 : "Imagine Dragons",
18 : "Alan Walker",
19 : "Dodie Clark",
20 : "lil Dicky ft. Chris Brown",
21 : "Bastille",
22 : "Post Malone",
23 : "Twentyone Pilots",
24 : "Owl City",
25 : "Logic ft. Castro",
26 : "Owl City",
27 : "Shepherd",
28 : "Cardi B ft. Bad Bunny",
29 : "MKTO",
30 : "Owl City",
31 : "Walk The Moon",
32 : "Marshmello ft. Logic",
33 : "Fall Out Boy",
34 : "Sheppard",
35 : "BTS",
36 : "BTS",
37 : "BTS"
}
So in song-list.js i have the list of songs and the album art for it. I also have the link to the file. For you guys’s Sake i really should organize this better, but that’ll happen in a little bit.
variables.js
var AlbumName = {
1 : "",
2 : "",
3 : "",
4 : "",
5 : "Mania",
6 : "",
7 : "",
8 : "",
9 : "American Beauty/American Psycho",
10 : "",
11 : "Vessel",
12 : "",
13 : "Vessel",
14 : "American Beauty/American Psycho",
15 : "",
16 : "",
17 : "",
18 : "",
19 : "",
20 : "",
21 : "",
22 : "",
23 : "Vessel",
24 : "",
25 : "",
26 : "",
27 : "",
28 : "",
29 : "",
30 : "",
31 : "",
32 : "",
33 : "Mania",
34 : "Watching the Sky",
35 : "",
36 : "",
37 : ""
}
var AlbumIMG = {
1 : "",
2 : "",
3 : "https://vignette.wikia.nocookie.net/monstercat/images/0/0c/Marshmello_-_Alone.jpg/revision/latest?cb=20160513204533",
4 : "",
5 : "https://images-na.ssl-images-amazon.com/images/I/41K3SuHNQpL._SS500.jpg",
6 : "",
7 : "",
8 : "",
9 : "https://upload.wikimedia.org/wikipedia/en/b/b6/American_Beauty_American_Psycho_cover.png",
10 : "",
11 : "https://images-na.ssl-images-amazon.com/images/I/41%2BCuqqyyvL.jpg",
12 : "",
13 : "https://images-na.ssl-images-amazon.com/images/I/41%2BCuqqyyvL.jpg",
14 : "https://upload.wikimedia.org/wikipedia/en/b/b6/American_Beauty_American_Psycho_cover.png",
15 : "",
16 : "",
17 : "",
18 : "",
19 : "",
20 : "",
21 : "",
22 : "",
23 : "https://images-na.ssl-images-amazon.com/images/I/41%2BCuqqyyvL.jpg",
24 : "",
25 : "",
26 : "",
27 : "",
28 : "",
29 : "",
30 : "",
31 : "",
32 : "",
33 : "https://images-na.ssl-images-amazon.com/images/I/41K3SuHNQpL._SS500.jpg",
34 : "https://iplock.weebly.com/uploads/9/5/7/3/95731436/p184.png",
35 : "",
36 : "",
37 : ""
}
So the variables.js file is just the list of the albums, like the first set of variables is the list of songs and what album they belong to. The second is the links to the album art for the specified album.
To see my full code go to https://github.com/lightning417techa/Music
Aucun commentaire:
Enregistrer un commentaire