'use strict'; /** * all music information */ const musicData = [ { backgroundImage: "MUSICDIR/Ahmad_Jamal_-_Jamalca_(1974).jpeg", posterUrl: "MUSICDIR/Ahmad_Jamal_-_Jamalca_(1974).jpeg", title: "Jamalca", album: "Jamalca", year: 1974, artist: "Ahmad Jamal", musicPath: "MUSICDIR/Ahmad_Jamal_-_Jamalca_(1974).mp3", track1: " - Ghetto Child", track1Time: "00:00", track2: " - Misdemeanor", track2Time: "05:37", track3: " - Along the Nile", track3Time: "10:12", track4: " - Trouble Man", track4Time: "15:01", track5: " - Jamalca", track5Time: "20:16", track6: " - Don't Misunderstand", track6Time: "24:13", track7: " - Theme Bahamas", track7Time: "28:25", track8: " - Children Calling", track8Time: "33:37", track9: " - Suicide is Painless", track9Time: "38:25", track10: " ", track10Time: " ", track11: " ", track11Time: " ", track12: " ", track12Time: " ", track13: " ", track13Time: " ", track14: " ", track14Time: " ", track15: " ", track15Time: " ", track16: " ", track16Time: " ", track17: " ", track17Time: " ", track18: " ", track18Time: " ", track19: " ", track19Time: " ", track20: " ", track20Time: " ", track21: " ", track21Time: " ", track22: " ", track22Time: " ", track23: " ", track23Time: " ", track24: " ", track24Time: " ", track25: " ", track25Time: " ", }, { backgroundImage: "MUSICDIR/Ahmad_Jamal_-_One_(1978).jpeg", posterUrl: "MUSICDIR/Ahmad_Jamal_-_One_(1978).jpeg", title: "One", album: "One", year: 1978, artist: "Ahmad Jamal", musicPath: "MUSICDIR/Ahmad_Jamal_-_One_(1978).mp3", track1: " - One", track1Time: "00:00", track2: " - Just The Way You Are", track2Time: "08:39", track3: " - Jet", track3Time: "15:41", track4: " - Black Cow", track4Time: "20:49", track5: " - Dynamo", track5Time: "25:38", track6: " - Sumayah", track6Time: "31:24", track7: " - Festival", track7Time: "36:36", track8: " ", track8Time: "", track9: " ", track9Time: "", track10: " ", track10Time: "", track11: " ", track11Time: "", track12: " ", track12Time: "", track13: " ", track13Time: "", track14: " ", track14Time: "", track15: " ", track15Time: "", track16: " ", track16Time: "", track17: " ", track17Time: "", track18: " ", track18Time: "", track19: " ", track19Time: "", track20: " ", track20Time: "", track21: " ", track21Time: "", track22: " ", track22Time: "", track23: " ", track23Time: "", track24: " ", track24Time: "", track25: " ", track25Time: "", }, { backgroundImage: "MUSICDIR/Ahmad_Jamal_-_Poinciana_(1951).jpeg", posterUrl: "MUSICDIR/Ahmad_Jamal_-_Poinciana_(1951).jpeg", title: "Poinciana", album: "Poinciana", year: 1951, artist: "Ahmad Jamal", musicPath: "MUSICDIR/Ahmad_Jamal_-_Poinciana_(1951).mp3", track1: " - Old Devil Moon", track1Time: "00:00", track2: " - Ahmad's Blues", track2Time: "03:50", track3: " - Poinciana", track3Time: "06:44", track4: " - Billy Boy", track4Time: "11:24", track5: " - Will You Still Be Mine", track5Time: "14:05", track6: " - Pavanne", track6Time: "16:49", track7: " - Crazy He Calls Me", track7Time: "21:18", track8: " - The Surrey With The Fringe On Top", track8Time: "26:19", track9: " - Aki And Ukthay", track9Time: "29:11", track10: " - Slaughter On 10th Avenue", track10Time: "32:19", track11: " - A Gal In Galico", track11Time: "37:11", track12: " - It's Easy To Remember", track12Time: "39:50", track13: " ", track13Time: " ", track14: " ", track14Time: " ", track15: " ", track15Time: " ", track16: " ", track16Time: " ", track17: " ", track17Time: " ", track18: " ", track18Time: " ", track19: " ", track19Time: " ", track20: " ", track20Time: " ", track21: " ", track21Time: " ", track22: " ", track22Time: " ", track23: " ", track23Time: " ", track24: " ", track24Time: " ", track25: " ", track25Time: " ", }, { backgroundImage: "MUSICDIR/Akira_Ishikawa_&_His_Count_Buffalos_-_Get_Up_!_(1975).jpeg", posterUrl: "MUSICDIR/Akira_Ishikawa_&_His_Count_Buffalos_-_Get_Up_!_(1975).jpeg", title: "Get Up!", album: "Get Up!", year: 1975, artist: "Akira Ishikawa & His Count Buffalos", musicPath: "MUSICDIR/Akira_Ishikawa_&_His_Count_Buffalos_-_Get_Up_!_(1975).mp3", track1: " - Get Up!", track1Time: "00:00", track2: " - Discharge", track2Time: "05:34", track3: " - Heated Point", track3Time: "13:14", track4: " - Painted Paradise", track4Time: "21:06", track5: " - Stone River", track5Time: "27:13", track6: " - Minor Jump", track6Time: "32:56", track7: " ", track7Time: " ", track8: " ", track8Time: " ", track9: " ", track9Time: " ", track10: " ", track10Time: " ", track11: " ", track11Time: " ", track12: " ", track12Time: " ", track13: " ", track13Time: " ", track14: " ", track14Time: " ", track15: " ", track15Time: " ", track16: " ", track16Time: " ", track17: " ", track17Time: " ", track18: " ", track18Time: " ", track19: " ", track19Time: " ", track20: " ", track20Time: " ", track21: " ", track21Time: " ", track22: " ", track22Time: " ", track23: " ", track23Time: " ", track24: " ", track24Time: " ", track25: " ", track25Time: " ", }, { backgroundImage: "MUSICDIR/Akira_Ishikawa_-_Bakishinba_Memories_of_Africa_(1970).jpeg", posterUrl: "MUSICDIR/Akira_Ishikawa_-_Bakishinba_Memories_of_Africa_(1970).jpeg", title: "Bakishinba Memories of Africa", album: "Bakishinba Memories of Africa", year: 1970, artist: "Akira Ishikawa", musicPath: "MUSICDIR/Akira_Ishikawa_-_Bakishinba_Memories_of_Africa_(1970).mp3", track1: " - Sandstorm", track1Time: "00:00", track2: " - Sunrise", track2Time: "04:27", track3: " - Flamingo", track3Time: "08:24", track4: " - African Deer", track4Time: "14:50", track5: " Bakishinba", track5Time: "21:08", track6: " Mirage", track6Time: "32:03", track7: " Blue Soul", track7Time: "38:08", track8: " ", track8Time: " ", track9: " ", track9Time: " ", track10: " ", track10Time: " ", track11: " ", track11Time: " ", track12: " ", track12Time: " ", track13: " ", track13Time: " ", track14: " ", track14Time: " ", track15: " ", track15Time: " ", track16: " ", track16Time: " ", track17: " ", track17Time: " ", track18: " ", track18Time: " ", track19: " ", track19Time: " ", track20: " ", track20Time: " ", track21: " ", track21Time: " ", track22: " ", track22Time: " ", track23: " ", track23Time: " ", track24: " ", track24Time: " ", track25: " ", track25Time: " ", }, { backgroundImage: "MUSICDIR/AllahLas_-_AllahLas_(2012).jpeg", posterUrl: "MUSICDIR/AllahLas_-_AllahLas_(2012).jpeg", title: "Allah-Las", album: "Allah-Las", year: 2012, artist: "Allah-Las", musicPath: "MUSICDIR/AllahLas_-_AllahLas_(2012).mp3", track1: " - Catarman", track1Time: "00:00", track2: " - Don't You Forget It", track2Time: "03:31", track3: " - Busman's Holiday", track3Time: "06:34", track4: " - Sacred Sands", track4Time: "10:02", track5: " - No Voodoo", track5Time: "13:34", track6: " - Sandy", track6Time: "16:35", track7: " - Ela Navega", track7Time: "19:17", track8: " - Tell Me", track8Time: "23:13", track9: " - Catalina", track9Time: "26:46", track10: " - Vis-A-Vis", track10Time: "30:28", track11: " - Seven Point Five", track11Time: "33:57", track12: " - Long Journey", track12Time: "36:46", track13: " ", track13Time: " ", track14: " ", track14Time: " ", track15: " ", track15Time: " ", track16: " ", track16Time: " ", track17: " ", track17Time: " ", track18: " ", track18Time: " ", track19: " ", track19Time: " ", track20: " ", track20Time: " ", track21: " ", track21Time: " ", track22: " ", track22Time: " ", track23: " ", track23Time: " ", track24: " ", track24Time: " ", track25: " ", track25Time: " ", }, { backgroundImage: "MUSICDIR/AllahLas_-_Worship_The_Sun_(2014).jpeg", posterUrl: "MUSICDIR/AllahLas_-_Worship_The_Sun_(2014).jpeg", title: "Worship The Sun", album: "Worship The Sun", year: 2014, artist: "AllahLas", musicPath: "MUSICDIR/AllahLas_-_Worship_The_Sun_(2014).mp3", track1: " - De Vida Voz", track1Time: "00:00", track2: " - Had It All", track2Time: "02:31", track3: " - Artifact", track3Time: "05:11", track4: " - Ferus Gallery", track4Time: "08:44", track5: " - Recurring", track5Time: "12:20", track6: " - Nothing to Hide", track6Time: "14:37", track7: " - Buffalo Nickel", track7Time: "18:18", track8: " - Follow You Down", track8Time: "21:05", track9: " - 501-415", track9Time: "24:16", track10: " - Yemeni Jade", track10Time: "26:00", track11: " - Worship The Sun", track11Time: "28:39", track12: " - Better Than Mine", track12Time: "31:29", track13: " - No Werewolf", track13Time: "34:18", track14: " - Every Girl", track14Time: "36:46", track15: " ", track15Time: " ", track16: " ", track16Time: " ", track17: " ", track17Time: " ", track18: " ", track18Time: " ", track19: " ", track19Time: " ", track20: " ", track20Time: " ", track21: " ", track21Time: " ", track22: " ", track22Time: " ", track23: " ", track23Time: " ", track24: " ", track24Time: " ", track25: " ", track25Time: " ", }, { backgroundImage: "MUSICDIR/Anri_-_Timely_(1983).jpeg", posterUrl: "MUSICDIR/Anri_-_Timely_(1983).jpeg", title: "Timely", album: "Timely", year: 1983, artist: "Anri", musicPath: "MUSICDIR/Anri_-_Timely_(1983).mp3", track1Time: "00:00", track1: " - Cat's Eye", track2Time: "03:09", track2: " - Windy Summer", track3Time: "07:15", track3: " - Stay By Me", track4Time: "10:53", track4: " - A Hope From Sad Street", track5Time: "15:13", track5: " - You Are Not Alone", track6Time: "19:16", track6: " - I Can't Stop The Loneliness", track7Time: "23:41", track7: " - Shyness Boy", track8Time: "26:58", track8: " - Lost Love in the Rain", track9Time: "31:17", track9: " - Driving My Love", track10Time: "36:09", track10: " - Good Night For You", track11Time: "41:30", track11: " - Remember Summer Days", track12: " ", track12Time: " ", track13: " ", track13Time: " ", track14: " ", track14Time: " ", track15: " ", track15Time: " ", track16: " ", track16Time: " ", track17: " ", track17Time: " ", track18: " ", track18Time: " ", track19: " ", track19Time: " ", track20: " ", track20Time: " ", track21: " ", track21Time: " ", track22: " ", track22Time: " ", track23: " ", track23Time: " ", track24: " ", track24Time: " ", track25: " ", track25Time: " ", }, { backgroundImage: "MUSICDIR/Automatic_Man_-_Visitors_(1977).jpeg", posterUrl: "MUSICDIR/Automatic_Man_-_Visitors_(1977).jpeg", title: "Visitors", album: "Visitors", year: 1977, artist: "Automatic Man", musicPath: "MUSICDIR/Automatic_Man_-_Visitors_(1977).mp3", track1: " - Atlantis Rising Fanfare", track1Time: "00:00", track2: " - Comin' Through", track2Time: "01:39", track3: " - My Pearl", track3Time: "05:14", track4: " - One And One", track4Time: "08:58", track5: " - Newspapers", track5Time: "15:00", track6: " - Geni-Geni", track6Time: "19:00", track7: " - Right Back Down", track7Time: "24:35", track8: " - There's A Way", track8Time: "30:32", track9: " - I.T.D. (Interstellar Tracking Devices)", track9Time: "35:48", track10: " - Automatic Man", track10Time: "41:03", track11: " - Atlantis Rising Theme", track11Time: "44:58", track12: " ", track12Time: " ", track13: " ", track13Time: " ", track14: " ", track14Time: " ", track15: " ", track15Time: " ", track16: " ", track16Time: " ", track17: " ", track17Time: " ", track18: " ", track18Time: " ", track19: " ", track19Time: " ", track20: " ", track20Time: " ", track21: " ", track21Time: " ", track22: " ", track22Time: " ", track23: " ", track23Time: " ", track24: " ", track24Time: " ", track25: " ", track25Time: " ", }, { backgroundImage: "MUSICDIR/Camel_-_Mirage_(1974).jpeg", posterUrl: "MUSICDIR/Camel_-_Mirage_(1974).jpeg", title: "Mirage", album: "Mirage", year: 1974, artist: "Camel", musicPath: "MUSICDIR/Camel_-_Mirage_(1974).mp3", track1: " ", track1Time: " ", track2: " ", track2Time: " ", track3: " ", track3Time: " ", track4: " ", track4Time: " ", track5: " ", track5Time: " ", track6: " ", track6Time: " ", track7: " ", track7Time: " ", track8: " ", track8Time: " ", track9: " ", track9Time: " ", track10: " ", track10Time: " ", track11: " ", track11Time: " ", track12: " ", track12Time: " ", track13: " ", track13Time: " ", track14: " ", track14Time: " ", track15: " ", track15Time: " ", track16: " ", track16Time: " ", track17: " ", track17Time: " ", track18: " ", track18Time: " ", track19: " ", track19Time: " ", track20: " ", track20Time: " ", track21: " ", track21Time: " ", track22: " ", track22Time: " ", track23: " ", track23Time: " ", track24: " ", track24Time: " ", track25: " ", track25Time: " ", }, { backgroundImage: "MUSICDIR/Casey_And_The_Pressure_Group_-_Powerhouse_(1970).jpeg", posterUrl: "MUSICDIR/Casey_And_The_Pressure_Group_-_Powerhouse_(1970).jpeg", title: "Powerhouse", album: "Powerhouse", year: 1970, artist: "Casey And The Pressure Group", musicPath: "MUSICDIR/Casey_And_The_Pressure_Group_-_Powerhouse_(1970).mp3", track1: " ", track1Time: " ", track2: " ", track2Time: " ", track3: " ", track3Time: " ", track4: " ", track4Time: " ", track5: " ", track5Time: " ", track6: " ", track6Time: " ", track7: " ", track7Time: " ", track8: " ", track8Time: " ", track9: " ", track9Time: " ", track10: " ", track10Time: " ", track11: " ", track11Time: " ", track12: " ", track12Time: " ", track13: " ", track13Time: " ", track14: " ", track14Time: " ", track15: " ", track15Time: " ", track16: " ", track16Time: " ", track17: " ", track17Time: " ", track18: " ", track18Time: " ", track19: " ", track19Time: " ", track20: " ", track20Time: " ", track21: " ", track21Time: " ", track22: " ", track22Time: " ", track23: " ", track23Time: " ", track24: " ", track24Time: " ", track25: " ", track25Time: " ", }, { backgroundImage: "MUSICDIR/Casiopea_-_Crosspoint_(1981).jpeg", posterUrl: "MUSICDIR/Casiopea_-_Crosspoint_(1981).jpeg", title: "Crosspoint", album: "Crosspoint", year: 1981, artist: "Casiopea", musicPath: "MUSICDIR/Casiopea_-_Crosspoint_(1981).mp3", track1: " ", track1Time: " ", track2: " ", track2Time: " ", track3: " ", track3Time: " ", track4: " ", track4Time: " ", track5: " ", track5Time: " ", track6: " ", track6Time: " ", track7: " ", track7Time: " ", track8: " ", track8Time: " ", track9: " ", track9Time: " ", track10: " ", track10Time: " ", track11: " ", track11Time: " ", track12: " ", track12Time: " ", track13: " ", track13Time: " ", track14: " ", track14Time: " ", track15: " ", track15Time: " ", track16: " ", track16Time: " ", track17: " ", track17Time: " ", track18: " ", track18Time: " ", track19: " ", track19Time: " ", track20: " ", track20Time: " ", track21: " ", track21Time: " ", track22: " ", track22Time: " ", track23: " ", track23Time: " ", track24: " ", track24Time: " ", track25: " ", track25Time: " ", }, { backgroundImage: "MUSICDIR/Casiopea_-_Mint_Jams_(1982).jpeg", posterUrl: "MUSICDIR/Casiopea_-_Mint_Jams_(1982).jpeg", title: "Mint Jams", album: "Mint Jams", year: 1982, artist: "Casiopea", musicPath: "MUSICDIR/Casiopea_-_Mint_Jams_(1982).mp3", track1: " ", track1Time: " ", track2: " ", track2Time: " ", track3: " ", track3Time: " ", track4: " ", track4Time: " ", track5: " ", track5Time: " ", track6: " ", track6Time: " ", track7: " ", track7Time: " ", track8: " ", track8Time: " ", track9: " ", track9Time: " ", track10: " ", track10Time: " ", track11: " ", track11Time: " ", track12: " ", track12Time: " ", track13: " ", track13Time: " ", track14: " ", track14Time: " ", track15: " ", track15Time: " ", track16: " ", track16Time: " ", track17: " ", track17Time: " ", track18: " ", track18Time: " ", track19: " ", track19Time: " ", track20: " ", track20Time: " ", track21: " ", track21Time: " ", track22: " ", track22Time: " ", track23: " ", track23Time: " ", track24: " ", track24Time: " ", track25: " ", track25Time: " ", }, { backgroundImage: "MUSICDIR/Chu_Kosaka_-_Arigato_(1971).jpeg", posterUrl: "MUSICDIR/Chu_Kosaka_-_Arigato_(1971).jpeg", title: "Arigato", album: "Arigato", year: 1971, artist: "Chu Kosaka", musicPath: "MUSICDIR/Chu_Kosaka_-_Arigato_(1971).mp3", track1: " ", track1Time: " ", track2: " ", track2Time: " ", track3: " ", track3Time: " ", track4: " ", track4Time: " ", track5: " ", track5Time: " ", track6: " ", track6Time: " ", track7: " ", track7Time: " ", track8: " ", track8Time: " ", track9: " ", track9Time: " ", track10: " ", track10Time: " ", track11: " ", track11Time: " ", track12: " ", track12Time: " ", track13: " ", track13Time: " ", track14: " ", track14Time: " ", track15: " ", track15Time: " ", track16: " ", track16Time: " ", track17: " ", track17Time: " ", track18: " ", track18Time: " ", track19: " ", track19Time: " ", track20: " ", track20Time: " ", track21: " ", track21Time: " ", track22: " ", track22Time: " ", track23: " ", track23Time: " ", track24: " ", track24Time: " ", track25: " ", track25Time: " ", }, { backgroundImage: "MUSICDIR/Chu_Kosaka_-_Horo_(1975).jpeg", posterUrl: "MUSICDIR/Chu_Kosaka_-_Horo_(1975).jpeg", title: "Horo", album: "Horo", year: 1975, artist: "Chu Kosaka", musicPath: "MUSICDIR/Chu_Kosaka_-_Horo_(1975).mp3", track1: " ", track1Time: " ", track2: " ", track2Time: " ", track3: " ", track3Time: " ", track4: " ", track4Time: " ", track5: " ", track5Time: " ", track6: " ", track6Time: " ", track7: " ", track7Time: " ", track8: " ", track8Time: " ", track9: " ", track9Time: " ", track10: " ", track10Time: " ", track11: " ", track11Time: " ", track12: " ", track12Time: " ", track13: " ", track13Time: " ", track14: " ", track14Time: " ", track15: " ", track15Time: " ", track16: " ", track16Time: " ", track17: " ", track17Time: " ", track18: " ", track18Time: " ", track19: " ", track19Time: " ", track20: " ", track20Time: " ", track21: " ", track21Time: " ", track22: " ", track22Time: " ", track23: " ", track23Time: " ", track24: " ", track24Time: " ", track25: " ", track25Time: " ", }, { backgroundImage: "MUSICDIR/Chu_Kosaka_-_Morning_(1977).jpeg", posterUrl: "MUSICDIR/Chu_Kosaka_-_Morning_(1977).jpeg", title: "Morning", album: "Morning", year: 1977, artist: "Chu Kosaka", musicPath: "MUSICDIR/Chu_Kosaka_-_Morning_(1977).mp3", track1: " ", track1Time: " ", track2: " ", track2Time: " ", track3: " ", track3Time: " ", track4: " ", track4Time: " ", track5: " ", track5Time: " ", track6: " ", track6Time: " ", track7: " ", track7Time: " ", track8: " ", track8Time: " ", track9: " ", track9Time: " ", track10: " ", track10Time: " ", track11: " ", track11Time: " ", track12: " ", track12Time: " ", track13: " ", track13Time: " ", track14: " ", track14Time: " ", track15: " ", track15Time: " ", track16: " ", track16Time: " ", track17: " ", track17Time: " ", track18: " ", track18Time: " ", track19: " ", track19Time: " ", track20: " ", track20Time: " ", track21: " ", track21Time: " ", track22: " ", track22Time: " ", track23: " ", track23Time: " ", track24: " ", track24Time: " ", track25: " ", track25Time: " ", }, { backgroundImage: "MUSICDIR/Crypto_-_Crypto_(1975).jpeg", posterUrl: "MUSICDIR/Crypto_-_Crypto_(1975).jpeg", title: "Crypto", album: "Crypto", year: 1975, artist: "Crypto", musicPath: "MUSICDIR/Crypto_-_Crypto_(1975).mp3", track1: " ", track1Time: " ", track2: " ", track2Time: " ", track3: " ", track3Time: " ", track4: " ", track4Time: " ", track5: " ", track5Time: " ", track6: " ", track6Time: " ", track7: " ", track7Time: " ", track8: " ", track8Time: " ", track9: " ", track9Time: " ", track10: " ", track10Time: " ", track11: " ", track11Time: " ", track12: " ", track12Time: " ", track13: " ", track13Time: " ", track14: " ", track14Time: " ", track15: " ", track15Time: " ", track16: " ", track16Time: " ", track17: " ", track17Time: " ", track18: " ", track18Time: " ", track19: " ", track19Time: " ", track20: " ", track20Time: " ", track21: " ", track21Time: " ", track22: " ", track22Time: " ", track23: " ", track23Time: " ", track24: " ", track24Time: " ", track25: " ", track25Time: " ", }, { backgroundImage: "MUSICDIR/Cymande_-_Promised_Heights_(1974).jpeg", posterUrl: "MUSICDIR/Cymande_-_Promised_Heights_(1974).jpeg", title: "Promised Heights", album: "Promised Heights", year: 1974, artist: "Cymande", musicPath: "MUSICDIR/Cymande_-_Promised_Heights_(1974).mp3", track1: " ", track1Time: " ", track2: " ", track2Time: " ", track3: " ", track3Time: " ", track4: " ", track4Time: " ", track5: " ", track5Time: " ", track6: " ", track6Time: " ", track7: " ", track7Time: " ", track8: " ", track8Time: " ", track9: " ", track9Time: " ", track10: " ", track10Time: " ", track11: " ", track11Time: " ", track12: " ", track12Time: " ", track13: " ", track13Time: " ", track14: " ", track14Time: " ", track15: " ", track15Time: " ", track16: " ", track16Time: " ", track17: " ", track17Time: " ", track18: " ", track18Time: " ", track19: " ", track19Time: " ", track20: " ", track20Time: " ", track21: " ", track21Time: " ", track22: " ", track22Time: " ", track23: " ", track23Time: " ", track24: " ", track24Time: " ", track25: " ", track25Time: " ", }, { backgroundImage: "MUSICDIR/Daisuke_Tanabe_-_Before_I_Forget_(2010).jpeg", posterUrl: "MUSICDIR/Daisuke_Tanabe_-_Before_I_Forget_(2010).jpeg", title: "Before I Forget", album: "Before I Forget", year: 2010, artist: "Daisuke Tanabe", musicPath: "MUSICDIR/Daisuke_Tanabe_-_Before_I_Forget_(2010).mp3", track1: " ", track1Time: " ", track2: " ", track2Time: " ", track3: " ", track3Time: " ", track4: " ", track4Time: " ", track5: " ", track5Time: " ", track6: " ", track6Time: " ", track7: " ", track7Time: " ", track8: " ", track8Time: " ", track9: " ", track9Time: " ", track10: " ", track10Time: " ", track11: " ", track11Time: " ", track12: " ", track12Time: " ", track13: " ", track13Time: " ", track14: " ", track14Time: " ", track15: " ", track15Time: " ", track16: " ", track16Time: " ", track17: " ", track17Time: " ", track18: " ", track18Time: " ", track19: " ", track19Time: " ", track20: " ", track20Time: " ", track21: " ", track21Time: " ", track22: " ", track22Time: " ", track23: " ", track23Time: " ", track24: " ", track24Time: " ", track25: " ", track25Time: " ", }, { backgroundImage: "MUSICDIR/Daisuke_Tanabe_-_Cat_Steps_(2018).jpeg", posterUrl: "MUSICDIR/Daisuke_Tanabe_-_Cat_Steps_(2018).jpeg", title: "Cat Steps", album: "Cat Steps", year: 2018, artist: "Daisuke Tanabe", musicPath: "MUSICDIR/Daisuke_Tanabe_-_Cat_Steps_(2018).mp3", track1: " ", track1Time: " ", track2: " ", track2Time: " ", track3: " ", track3Time: " ", track4: " ", track4Time: " ", track5: " ", track5Time: " ", track6: " ", track6Time: " ", track7: " ", track7Time: " ", track8: " ", track8Time: " ", track9: " ", track9Time: " ", track10: " ", track10Time: " ", track11: " ", track11Time: " ", track12: " ", track12Time: " ", track13: " ", track13Time: " ", track14: " ", track14Time: " ", track15: " ", track15Time: " ", track16: " ", track16Time: " ", track17: " ", track17Time: " ", track18: " ", track18Time: " ", track19: " ", track19Time: " ", track20: " ", track20Time: " ", track21: " ", track21Time: " ", track22: " ", track22Time: " ", track23: " ", track23Time: " ", track24: " ", track24Time: " ", track25: " ", track25Time: " ", }, { backgroundImage: "MUSICDIR/Daisuke_Tanabe_-_Ten_(2020).jpeg", posterUrl: "MUSICDIR/Daisuke_Tanabe_-_Ten_(2020).jpeg", title: "Ten", album: "Ten", year: 2020, artist: "Daisuke Tanabe", musicPath: "MUSICDIR/Daisuke_Tanabe_-_Ten_(2020).mp3", track1: " ", track1Time: " ", track2: " ", track2Time: " ", track3: " ", track3Time: " ", track4: " ", track4Time: " ", track5: " ", track5Time: " ", track6: " ", track6Time: " ", track7: " ", track7Time: " ", track8: " ", track8Time: " ", track9: " ", track9Time: " ", track10: " ", track10Time: " ", track11: " ", track11Time: " ", track12: " ", track12Time: " ", track13: " ", track13Time: " ", track14: " ", track14Time: " ", track15: " ", track15Time: " ", track16: " ", track16Time: " ", track17: " ", track17Time: " ", track18: " ", track18Time: " ", track19: " ", track19Time: " ", track20: " ", track20Time: " ", track21: " ", track21Time: " ", track22: " ", track22Time: " ", track23: " ", track23Time: " ", track24: " ", track24Time: " ", track25: " ", track25Time: " ", }, { backgroundImage: "MUSICDIR/Dimension_-_Eighth_Dimension_(1996).jpeg", posterUrl: "MUSICDIR/Dimension_-_Eighth_Dimension_(1996).jpeg", title: "Eighth Dimension", album: "Eighth Dimension", year: 1996, artist: "Dimension", musicPath: "MUSICDIR/Dimension_-_Eighth_Dimension_(1996).mp3", track1: " ", track1Time: " ", track2: " ", track2Time: " ", track3: " ", track3Time: " ", track4: " ", track4Time: " ", track5: " ", track5Time: " ", track6: " ", track6Time: " ", track7: " ", track7Time: " ", track8: " ", track8Time: " ", track9: " ", track9Time: " ", track10: " ", track10Time: " ", track11: " ", track11Time: " ", track12: " ", track12Time: " ", track13: " ", track13Time: " ", track14: " ", track14Time: " ", track15: " ", track15Time: " ", track16: " ", track16Time: " ", track17: " ", track17Time: " ", track18: " ", track18Time: " ", track19: " ", track19Time: " ", track20: " ", track20Time: " ", track21: " ", track21Time: " ", track22: " ", track22Time: " ", track23: " ", track23Time: " ", track24: " ", track24Time: " ", track25: " ", track25Time: " ", }, { backgroundImage: "MUSICDIR/Dutch_Treat_-_Tranquility_(1977).jpeg", posterUrl: "MUSICDIR/Dutch_Treat_-_Tranquility_(1977).jpeg", title: "Tranquility", album: "Tranquility", year: 1977, artist: "Dutch Treat", musicPath: "MUSICDIR/Dutch_Treat_-_Tranquility_(1977).mp3", track1: " ", track1Time: " ", track2: " ", track2Time: " ", track3: " ", track3Time: " ", track4: " ", track4Time: " ", track5: " ", track5Time: " ", track6: " ", track6Time: " ", track7: " ", track7Time: " ", track8: " ", track8Time: " ", track9: " ", track9Time: " ", track10: " ", track10Time: " ", track11: " ", track11Time: " ", track12: " ", track12Time: " ", track13: " ", track13Time: " ", track14: " ", track14Time: " ", track15: " ", track15Time: " ", track16: " ", track16Time: " ", track17: " ", track17Time: " ", track18: " ", track18Time: " ", track19: " ", track19Time: " ", track20: " ", track20Time: " ", track21: " ", track21Time: " ", track22: " ", track22Time: " ", track23: " ", track23Time: " ", track24: " ", track24Time: " ", track25: " ", track25Time: " ", }, { backgroundImage: "MUSICDIR/Eloy_-_Colours.jpeg", posterUrl: "MUSICDIR/Eloy_-_Colours.jpeg", title: "Colours", album: "Colours", year: 9999, artist: "Eloy", musicPath: "MUSICDIR/Eloy_-_Colours.mp3", track1: " ", track1Time: " ", track2: " ", track2Time: " ", track3: " ", track3Time: " ", track4: " ", track4Time: " ", track5: " ", track5Time: " ", track6: " ", track6Time: " ", track7: " ", track7Time: " ", track8: " ", track8Time: " ", track9: " ", track9Time: " ", track10: " ", track10Time: " ", track11: " ", track11Time: " ", track12: " ", track12Time: " ", track13: " ", track13Time: " ", track14: " ", track14Time: " ", track15: " ", track15Time: " ", track16: " ", track16Time: " ", track17: " ", track17Time: " ", track18: " ", track18Time: " ", track19: " ", track19Time: " ", track20: " ", track20Time: " ", track21: " ", track21Time: " ", track22: " ", track22Time: " ", track23: " ", track23Time: " ", track24: " ", track24Time: " ", track25: " ", track25Time: " ", }, { backgroundImage: "MUSICDIR/Eloy_-_Ocean_(1977).jpeg", posterUrl: "MUSICDIR/Eloy_-_Ocean_(1977).jpeg", title: "Ocean", album: "Ocean", year: 1977, artist: "Eloy", musicPath: "MUSICDIR/Eloy_-_Ocean_(1977).mp3", track1: " ", track1Time: " ", track2: " ", track2Time: " ", track3: " ", track3Time: " ", track4: " ", track4Time: " ", track5: " ", track5Time: " ", track6: " ", track6Time: " ", track7: " ", track7Time: " ", track8: " ", track8Time: " ", track9: " ", track9Time: " ", track10: " ", track10Time: " ", track11: " ", track11Time: " ", track12: " ", track12Time: " ", track13: " ", track13Time: " ", track14: " ", track14Time: " ", track15: " ", track15Time: " ", track16: " ", track16Time: " ", track17: " ", track17Time: " ", track18: " ", track18Time: " ", track19: " ", track19Time: " ", track20: " ", track20Time: " ", track21: " ", track21Time: " ", track22: " ", track22Time: " ", track23: " ", track23Time: " ", track24: " ", track24Time: " ", track25: " ", track25Time: " ", }, { backgroundImage: "MUSICDIR/Eloy_-_Planets_(1981).jpeg", posterUrl: "MUSICDIR/Eloy_-_Planets_(1981).jpeg", title: "Planets", album: "Planets", year: 1981, artist: "Eloy", musicPath: "MUSICDIR/Eloy_-_Planets_(1981).mp3", track1: " ", track1Time: " ", track2: " ", track2Time: " ", track3: " ", track3Time: " ", track4: " ", track4Time: " ", track5: " ", track5Time: " ", track6: " ", track6Time: " ", track7: " ", track7Time: " ", track8: " ", track8Time: " ", track9: " ", track9Time: " ", track10: " ", track10Time: " ", track11: " ", track11Time: " ", track12: " ", track12Time: " ", track13: " ", track13Time: " ", track14: " ", track14Time: " ", track15: " ", track15Time: " ", track16: " ", track16Time: " ", track17: " ", track17Time: " ", track18: " ", track18Time: " ", track19: " ", track19Time: " ", track20: " ", track20Time: " ", track21: " ", track21Time: " ", track22: " ", track22Time: " ", track23: " ", track23Time: " ", track24: " ", track24Time: " ", track25: " ", track25Time: " ", }, { backgroundImage: "MUSICDIR/Eloy_-_Time_to_turn_(1982).jpeg", posterUrl: "MUSICDIR/Eloy_-_Time_to_turn_(1982).jpeg", title: "Time to turn", album: "Time to turn", year: 1982, artist: "Eloy", musicPath: "MUSICDIR/Eloy_-_Time_to_turn_(1982).mp3", track1: " ", track1Time: " ", track2: " ", track2Time: " ", track3: " ", track3Time: " ", track4: " ", track4Time: " ", track5: " ", track5Time: " ", track6: " ", track6Time: " ", track7: " ", track7Time: " ", track8: " ", track8Time: " ", track9: " ", track9Time: " ", track10: " ", track10Time: " ", track11: " ", track11Time: " ", track12: " ", track12Time: " ", track13: " ", track13Time: " ", track14: " ", track14Time: " ", track15: " ", track15Time: " ", track16: " ", track16Time: " ", track17: " ", track17Time: " ", track18: " ", track18Time: " ", track19: " ", track19Time: " ", track20: " ", track20Time: " ", track21: " ", track21Time: " ", track22: " ", track22Time: " ", track23: " ", track23Time: " ", track24: " ", track24Time: " ", track25: " ", track25Time: " ", }, { backgroundImage: "MUSICDIR/Eloy_-_Visionary.jpeg", posterUrl: "MUSICDIR/Eloy_-_Visionary.jpeg", title: "Visionary", album: "Visionary", year: 9999, artist: "Eloy", musicPath: "MUSICDIR/Eloy_-_Visionary.mp3", track1: " ", track1Time: " ", track2: " ", track2Time: " ", track3: " ", track3Time: " ", track4: " ", track4Time: " ", track5: " ", track5Time: " ", track6: " ", track6Time: " ", track7: " ", track7Time: " ", track8: " ", track8Time: " ", track9: " ", track9Time: " ", track10: " ", track10Time: " ", track11: " ", track11Time: " ", track12: " ", track12Time: " ", track13: " ", track13Time: " ", track14: " ", track14Time: " ", track15: " ", track15Time: " ", track16: " ", track16Time: " ", track17: " ", track17Time: " ", track18: " ", track18Time: " ", track19: " ", track19Time: " ", track20: " ", track20Time: " ", track21: " ", track21Time: " ", track22: " ", track22Time: " ", track23: " ", track23Time: " ", track24: " ", track24Time: " ", track25: " ", track25Time: " ", }, { backgroundImage: "MUSICDIR/Emphasis_-_Emphasis_(1975).jpeg", posterUrl: "MUSICDIR/Emphasis_-_Emphasis_(1975).jpeg", title: "Emphasis", album: "Emphasis", year: 1975, artist: "Emphasis", musicPath: "MUSICDIR/Emphasis_-_Emphasis_(1975).mp3", track1: " ", track1Time: " ", track2: " ", track2Time: " ", track3: " ", track3Time: " ", track4: " ", track4Time: " ", track5: " ", track5Time: " ", track6: " ", track6Time: " ", track7: " ", track7Time: " ", track8: " ", track8Time: " ", track9: " ", track9Time: " ", track10: " ", track10Time: " ", track11: " ", track11Time: " ", track12: " ", track12Time: " ", track13: " ", track13Time: " ", track14: " ", track14Time: " ", track15: " ", track15Time: " ", track16: " ", track16Time: " ", track17: " ", track17Time: " ", track18: " ", track18Time: " ", track19: " ", track19Time: " ", track20: " ", track20Time: " ", track21: " ", track21Time: " ", track22: " ", track22Time: " ", track23: " ", track23Time: " ", track24: " ", track24Time: " ", track25: " ", track25Time: " ", }, { backgroundImage: "MUSICDIR/Fela_Kuti_-_Gentleman_(1973).jpeg", posterUrl: "MUSICDIR/Fela_Kuti_-_Gentleman_(1973).jpeg", title: "Gentleman", album: "Gentleman", year: 1973, artist: "Fela Kuti", musicPath: "MUSICDIR/Fela_Kuti_-_Gentleman_(1973).mp3", track1: " ", track1Time: " ", track2: " ", track2Time: " ", track3: " ", track3Time: " ", track4: " ", track4Time: " ", track5: " ", track5Time: " ", track6: " ", track6Time: " ", track7: " ", track7Time: " ", track8: " ", track8Time: " ", track9: " ", track9Time: " ", track10: " ", track10Time: " ", track11: " ", track11Time: " ", track12: " ", track12Time: " ", track13: " ", track13Time: " ", track14: " ", track14Time: " ", track15: " ", track15Time: " ", track16: " ", track16Time: " ", track17: " ", track17Time: " ", track18: " ", track18Time: " ", track19: " ", track19Time: " ", track20: " ", track20Time: " ", track21: " ", track21Time: " ", track22: " ", track22Time: " ", track23: " ", track23Time: " ", track24: " ", track24Time: " ", track25: " ", track25Time: " ", }, { backgroundImage: "MUSICDIR/Fela_Kuti_-_He_Miss_Road_(1975).jpeg", posterUrl: "MUSICDIR/Fela_Kuti_-_He_Miss_Road_(1975).jpeg", title: "He Miss Road", album: "He Miss Road", year: 1975, artist: "Fela Kuti", musicPath: "MUSICDIR/Fela_Kuti_-_He_Miss_Road_(1975).mp3", track1: " ", track1Time: " ", track2: " ", track2Time: " ", track3: " ", track3Time: " ", track4: " ", track4Time: " ", track5: " ", track5Time: " ", track6: " ", track6Time: " ", track7: " ", track7Time: " ", track8: " ", track8Time: " ", track9: " ", track9Time: " ", track10: " ", track10Time: " ", track11: " ", track11Time: " ", track12: " ", track12Time: " ", track13: " ", track13Time: " ", track14: " ", track14Time: " ", track15: " ", track15Time: " ", track16: " ", track16Time: " ", track17: " ", track17Time: " ", track18: " ", track18Time: " ", track19: " ", track19Time: " ", track20: " ", track20Time: " ", track21: " ", track21Time: " ", track22: " ", track22Time: " ", track23: " ", track23Time: " ", track24: " ", track24Time: " ", track25: " ", track25Time: " ", }, { backgroundImage: "MUSICDIR/Friendship_&_Lee_Ritenour_-_Friendship_(1979).jpeg", posterUrl: "MUSICDIR/Friendship_&_Lee_Ritenour_-_Friendship_(1979).jpeg", title: "Friendship", album: "Friendship", year: 1979, artist: "Friendship & Lee Ritenour", musicPath: "MUSICDIR/Friendship_&_Lee_Ritenour_-_Friendship_(1979).mp3", track1: " ", track1Time: " ", track2: " ", track2Time: " ", track3: " ", track3Time: " ", track4: " ", track4Time: " ", track5: " ", track5Time: " ", track6: " ", track6Time: " ", track7: " ", track7Time: " ", track8: " ", track8Time: " ", track9: " ", track9Time: " ", track10: " ", track10Time: " ", track11: " ", track11Time: " ", track12: " ", track12Time: " ", track13: " ", track13Time: " ", track14: " ", track14Time: " ", track15: " ", track15Time: " ", track16: " ", track16Time: " ", track17: " ", track17Time: " ", track18: " ", track18Time: " ", track19: " ", track19Time: " ", track20: " ", track20Time: " ", track21: " ", track21Time: " ", track22: " ", track22Time: " ", track23: " ", track23Time: " ", track24: " ", track24Time: " ", track25: " ", track25Time: " ", }, { backgroundImage: "MUSICDIR/Gabor_Szabo_-_Dreams_(1968).jpeg", posterUrl: "MUSICDIR/Gabor_Szabo_-_Dreams_(1968).jpeg", title: "Dreams", album: "Dreams", year: 1968, artist: "Gabor Szabo", musicPath: "MUSICDIR/Gabor_Szabo_-_Dreams_(1968).mp3", track1: " ", track1Time: " ", track2: " ", track2Time: " ", track3: " ", track3Time: " ", track4: " ", track4Time: " ", track5: " ", track5Time: " ", track6: " ", track6Time: " ", track7: " ", track7Time: " ", track8: " ", track8Time: " ", track9: " ", track9Time: " ", track10: " ", track10Time: " ", track11: " ", track11Time: " ", track12: " ", track12Time: " ", track13: " ", track13Time: " ", track14: " ", track14Time: " ", track15: " ", track15Time: " ", track16: " ", track16Time: " ", track17: " ", track17Time: " ", track18: " ", track18Time: " ", track19: " ", track19Time: " ", track20: " ", track20Time: " ", track21: " ", track21Time: " ", track22: " ", track22Time: " ", track23: " ", track23Time: " ", track24: " ", track24Time: " ", track25: " ", track25Time: " ", }, { backgroundImage: "MUSICDIR/Hako_Yamasaki_-_Human_Nature_(1979).jpeg", posterUrl: "MUSICDIR/Hako_Yamasaki_-_Human_Nature_(1979).jpeg", title: "Human Nature", album: "Human Nature", year: 1979, artist: "Hako Yamasaki", musicPath: "MUSICDIR/Hako_Yamasaki_-_Human_Nature_(1979).mp3", track1: " ", track1Time: " ", track2: " ", track2Time: " ", track3: " ", track3Time: " ", track4: " ", track4Time: " ", track5: " ", track5Time: " ", track6: " ", track6Time: " ", track7: " ", track7Time: " ", track8: " ", track8Time: " ", track9: " ", track9Time: " ", track10: " ", track10Time: " ", track11: " ", track11Time: " ", track12: " ", track12Time: " ", track13: " ", track13Time: " ", track14: " ", track14Time: " ", track15: " ", track15Time: " ", track16: " ", track16Time: " ", track17: " ", track17Time: " ", track18: " ", track18Time: " ", track19: " ", track19Time: " ", track20: " ", track20Time: " ", track21: " ", track21Time: " ", track22: " ", track22Time: " ", track23: " ", track23Time: " ", track24: " ", track24Time: " ", track25: " ", track25Time: " ", }, { backgroundImage: "MUSICDIR/Hako_Yamasaki_-_Tobimasu_(1975).jpeg", posterUrl: "MUSICDIR/Hako_Yamasaki_-_Tobimasu_(1975).jpeg", title: "Tobimasu", album: "Tobimasu", year: 1975, artist: "Hako Yamasaki", musicPath: "MUSICDIR/Hako_Yamasaki_-_Tobimasu_(1975).mp3", track1: " ", track1Time: " ", track2: " ", track2Time: " ", track3: " ", track3Time: " ", track4: " ", track4Time: " ", track5: " ", track5Time: " ", track6: " ", track6Time: " ", track7: " ", track7Time: " ", track8: " ", track8Time: " ", track9: " ", track9Time: " ", track10: " ", track10Time: " ", track11: " ", track11Time: " ", track12: " ", track12Time: " ", track13: " ", track13Time: " ", track14: " ", track14Time: " ", track15: " ", track15Time: " ", track16: " ", track16Time: " ", track17: " ", track17Time: " ", track18: " ", track18Time: " ", track19: " ", track19Time: " ", track20: " ", track20Time: " ", track21: " ", track21Time: " ", track22: " ", track22Time: " ", track23: " ", track23Time: " ", track24: " ", track24Time: " ", track25: " ", track25Time: " ", }, { backgroundImage: "MUSICDIR/Hiromasa_Suzuki_&_Jiro_Inagaki_Big_Soul_Media_-_By_The_Red_Stream_(1973).jpeg", posterUrl: "MUSICDIR/Hiromasa_Suzuki_&_Jiro_Inagaki_Big_Soul_Media_-_By_The_Red_Stream_(1973).jpeg", title: "By The Red Stream", album: "By The Red Stream", year: 1973, artist: "Hiromasa Suzuki & Jiro Inagaki Big Soul Media", musicPath: "MUSICDIR/Hiromasa_Suzuki_&_Jiro_Inagaki_Big_Soul_Media_-_By_The_Red_Stream_(1973).mp3", track1: " ", track1Time: " ", track2: " ", track2Time: " ", track3: " ", track3Time: " ", track4: " ", track4Time: " ", track5: " ", track5Time: " ", track6: " ", track6Time: " ", track7: " ", track7Time: " ", track8: " ", track8Time: " ", track9: " ", track9Time: " ", track10: " ", track10Time: " ", track11: " ", track11Time: " ", track12: " ", track12Time: " ", track13: " ", track13Time: " ", track14: " ", track14Time: " ", track15: " ", track15Time: " ", track16: " ", track16Time: " ", track17: " ", track17Time: " ", track18: " ", track18Time: " ", track19: " ", track19Time: " ", track20: " ", track20Time: " ", track21: " ", track21Time: " ", track22: " ", track22Time: " ", track23: " ", track23Time: " ", track24: " ", track24Time: " ", track25: " ", track25Time: " ", }, { backgroundImage: "MUSICDIR/Ian_Carr's_Nucleus_-_In_Flagranti_Delicto_(1977).jpeg", posterUrl: "MUSICDIR/Ian_Carr's_Nucleus_-_In_Flagranti_Delicto_(1977).jpeg", title: "In Flagranti Delicto", album: "In Flagranti Delicto", year: 1977, artist: "Ian Carr's Nucleus", musicPath: "MUSICDIR/Ian_Carr's_Nucleus_-_In_Flagranti_Delicto_(1977).mp3", track1: " ", track1Time: " ", track2: " ", track2Time: " ", track3: " ", track3Time: " ", track4: " ", track4Time: " ", track5: " ", track5Time: " ", track6: " ", track6Time: " ", track7: " ", track7Time: " ", track8: " ", track8Time: " ", track9: " ", track9Time: " ", track10: " ", track10Time: " ", track11: " ", track11Time: " ", track12: " ", track12Time: " ", track13: " ", track13Time: " ", track14: " ", track14Time: " ", track15: " ", track15Time: " ", track16: " ", track16Time: " ", track17: " ", track17Time: " ", track18: " ", track18Time: " ", track19: " ", track19Time: " ", track20: " ", track20Time: " ", track21: " ", track21Time: " ", track22: " ", track22Time: " ", track23: " ", track23Time: " ", track24: " ", track24Time: " ", track25: " ", track25Time: " ", }, { backgroundImage: "MUSICDIR/Ice_-_Each_Man_Makes_His_Destiny_(1974).jpeg", posterUrl: "MUSICDIR/Ice_-_Each_Man_Makes_His_Destiny_(1974).jpeg", title: "Each Man Makes His Destiny", album: "Each Man Makes His Destiny", year: 1974, artist: "Ice", musicPath: "MUSICDIR/Ice_-_Each_Man_Makes_His_Destiny_(1974).mp3", track1: " ", track1Time: " ", track2: " ", track2Time: " ", track3: " ", track3Time: " ", track4: " ", track4Time: " ", track5: " ", track5Time: " ", track6: " ", track6Time: " ", track7: " ", track7Time: " ", track8: " ", track8Time: " ", track9: " ", track9Time: " ", track10: " ", track10Time: " ", track11: " ", track11Time: " ", track12: " ", track12Time: " ", track13: " ", track13Time: " ", track14: " ", track14Time: " ", track15: " ", track15Time: " ", track16: " ", track16Time: " ", track17: " ", track17Time: " ", track18: " ", track18Time: " ", track19: " ", track19Time: " ", track20: " ", track20Time: " ", track21: " ", track21Time: " ", track22: " ", track22Time: " ", track23: " ", track23Time: " ", track24: " ", track24Time: " ", track25: " ", track25Time: " ", }, { backgroundImage: "MUSICDIR/Jiro_Inagaki_Big_Soul_Media_-_Funky_Stuff_(1975).jpeg", posterUrl: "MUSICDIR/Jiro_Inagaki_Big_Soul_Media_-_Funky_Stuff_(1975).jpeg", title: "Funky Stuff", album: "Funky Stuff", year: 1975, artist: "Jiro Inagaki Big Soul Media", musicPath: "MUSICDIR/Jiro_Inagaki_Big_Soul_Media_-_Funky_Stuff_(1975).mp3", track1: " ", track1Time: " ", track2: " ", track2Time: " ", track3: " ", track3Time: " ", track4: " ", track4Time: " ", track5: " ", track5Time: " ", track6: " ", track6Time: " ", track7: " ", track7Time: " ", track8: " ", track8Time: " ", track9: " ", track9Time: " ", track10: " ", track10Time: " ", track11: " ", track11Time: " ", track12: " ", track12Time: " ", track13: " ", track13Time: " ", track14: " ", track14Time: " ", track15: " ", track15Time: " ", track16: " ", track16Time: " ", track17: " ", track17Time: " ", track18: " ", track18Time: " ", track19: " ", track19Time: " ", track20: " ", track20Time: " ", track21: " ", track21Time: " ", track22: " ", track22Time: " ", track23: " ", track23Time: " ", track24: " ", track24Time: " ", track25: " ", track25Time: " ", }, { backgroundImage: "MUSICDIR/Jun_Fukamachi_-_The_Sea_Of_Dirac_(1977).jpeg", posterUrl: "MUSICDIR/Jun_Fukamachi_-_The_Sea_Of_Dirac_(1977).jpeg", title: "The Sea Of Dirac", album: "The Sea Of Dirac", year: 1977, artist: "Jun Fukamachi", musicPath: "MUSICDIR/Jun_Fukamachi_-_The_Sea_Of_Dirac_(1977).mp3", track1: " ", track1Time: " ", track2: " ", track2Time: " ", track3: " ", track3Time: " ", track4: " ", track4Time: " ", track5: " ", track5Time: " ", track6: " ", track6Time: " ", track7: " ", track7Time: " ", track8: " ", track8Time: " ", track9: " ", track9Time: " ", track10: " ", track10Time: " ", track11: " ", track11Time: " ", track12: " ", track12Time: " ", track13: " ", track13Time: " ", track14: " ", track14Time: " ", track15: " ", track15Time: " ", track16: " ", track16Time: " ", track17: " ", track17Time: " ", track18: " ", track18Time: " ", track19: " ", track19Time: " ", track20: " ", track20Time: " ", track21: " ", track21Time: " ", track22: " ", track22Time: " ", track23: " ", track23Time: " ", track24: " ", track24Time: " ", track25: " ", track25Time: " ", }, { backgroundImage: "MUSICDIR/Kazumi_Watanabe_&_Manhattan_Blaze_-_Village_In_Bubbles_(1978).jpeg", posterUrl: "MUSICDIR/Kazumi_Watanabe_&_Manhattan_Blaze_-_Village_In_Bubbles_(1978).jpeg", title: "Village In Bubbles", album: "Village In Bubbles", year: 1978, artist: "Kazumi Watanabe & Manhattan Blaze", musicPath: "MUSICDIR/Kazumi_Watanabe_&_Manhattan_Blaze_-_Village_In_Bubbles_(1978).mp3", track1: " ", track1Time: " ", track2: " ", track2Time: " ", track3: " ", track3Time: " ", track4: " ", track4Time: " ", track5: " ", track5Time: " ", track6: " ", track6Time: " ", track7: " ", track7Time: " ", track8: " ", track8Time: " ", track9: " ", track9Time: " ", track10: " ", track10Time: " ", track11: " ", track11Time: " ", track12: " ", track12Time: " ", track13: " ", track13Time: " ", track14: " ", track14Time: " ", track15: " ", track15Time: " ", track16: " ", track16Time: " ", track17: " ", track17Time: " ", track18: " ", track18Time: " ", track19: " ", track19Time: " ", track20: " ", track20Time: " ", track21: " ", track21Time: " ", track22: " ", track22Time: " ", track23: " ", track23Time: " ", track24: " ", track24Time: " ", track25: " ", track25Time: " ", }, { backgroundImage: "MUSICDIR/Kazumi_Watanabe_-_The_Spice_Of_Life_Too_(1988).jpeg", posterUrl: "MUSICDIR/Kazumi_Watanabe_-_The_Spice_Of_Life_Too_(1988).jpeg", title: "The Spice Of Life Too", album: "The Spice Of Life Too", year: 1988, artist: "Kazumi Watanabe", musicPath: "MUSICDIR/Kazumi_Watanabe_-_The_Spice_Of_Life_Too_(1988).mp3", track1: " ", track1Time: " ", track2: " ", track2Time: " ", track3: " ", track3Time: " ", track4: " ", track4Time: " ", track5: " ", track5Time: " ", track6: " ", track6Time: " ", track7: " ", track7Time: " ", track8: " ", track8Time: " ", track9: " ", track9Time: " ", track10: " ", track10Time: " ", track11: " ", track11Time: " ", track12: " ", track12Time: " ", track13: " ", track13Time: " ", track14: " ", track14Time: " ", track15: " ", track15Time: " ", track16: " ", track16Time: " ", track17: " ", track17Time: " ", track18: " ", track18Time: " ", track19: " ", track19Time: " ", track20: " ", track20Time: " ", track21: " ", track21Time: " ", track22: " ", track22Time: " ", track23: " ", track23Time: " ", track24: " ", track24Time: " ", track25: " ", track25Time: " ", }, { backgroundImage: "MUSICDIR/Kazumi_Watanabe_Quartet_-_Milky_Shade_(1976).jpeg", posterUrl: "MUSICDIR/Kazumi_Watanabe_Quartet_-_Milky_Shade_(1976).jpeg", title: "Milky Shade", album: "Milky Shade", year: 1976, artist: "Kazumi Watanabe Quartet", musicPath: "MUSICDIR/Kazumi_Watanabe_Quartet_-_Milky_Shade_(1976).mp3", track1: " ", track1Time: " ", track2: " ", track2Time: " ", track3: " ", track3Time: " ", track4: " ", track4Time: " ", track5: " ", track5Time: " ", track6: " ", track6Time: " ", track7: " ", track7Time: " ", track8: " ", track8Time: " ", track9: " ", track9Time: " ", track10: " ", track10Time: " ", track11: " ", track11Time: " ", track12: " ", track12Time: " ", track13: " ", track13Time: " ", track14: " ", track14Time: " ", track15: " ", track15Time: " ", track16: " ", track16Time: " ", track17: " ", track17Time: " ", track18: " ", track18Time: " ", track19: " ", track19Time: " ", track20: " ", track20Time: " ", track21: " ", track21Time: " ", track22: " ", track22Time: " ", track23: " ", track23Time: " ", track24: " ", track24Time: " ", track25: " ", track25Time: " ", }, { backgroundImage: "MUSICDIR/Känguru_-_Känguru_(1981).jpeg", posterUrl: "MUSICDIR/Känguru_-_Känguru_(1981).jpeg", title: "Känguru", album: "Känguru", year: 1981, artist: "Känguru", musicPath: "MUSICDIR/Känguru_-_Känguru_(1981).mp3", track1: " ", track1Time: " ", track2: " ", track2Time: " ", track3: " ", track3Time: " ", track4: " ", track4Time: " ", track5: " ", track5Time: " ", track6: " ", track6Time: " ", track7: " ", track7Time: " ", track8: " ", track8Time: " ", track9: " ", track9Time: " ", track10: " ", track10Time: " ", track11: " ", track11Time: " ", track12: " ", track12Time: " ", track13: " ", track13Time: " ", track14: " ", track14Time: " ", track15: " ", track15Time: " ", track16: " ", track16Time: " ", track17: " ", track17Time: " ", track18: " ", track18Time: " ", track19: " ", track19Time: " ", track20: " ", track20Time: " ", track21: " ", track21Time: " ", track22: " ", track22Time: " ", track23: " ", track23Time: " ", track24: " ", track24Time: " ", track25: " ", track25Time: " ", }, { backgroundImage: "MUSICDIR/Kumi_Miyasato_-_I_Only_Have_Eyes_For_You_(1985).jpeg", posterUrl: "MUSICDIR/Kumi_Miyasato_-_I_Only_Have_Eyes_For_You_(1985).jpeg", title: "I Only Have Eyes For You", album: "I Only Have Eyes For You", year: 1985, artist: "Kumi Miyasato", musicPath: "MUSICDIR/Kumi_Miyasato_-_I_Only_Have_Eyes_For_You_(1985).mp3", track1: " ", track1Time: " ", track2: " ", track2Time: " ", track3: " ", track3Time: " ", track4: " ", track4Time: " ", track5: " ", track5Time: " ", track6: " ", track6Time: " ", track7: " ", track7Time: " ", track8: " ", track8Time: " ", track9: " ", track9Time: " ", track10: " ", track10Time: " ", track11: " ", track11Time: " ", track12: " ", track12Time: " ", track13: " ", track13Time: " ", track14: " ", track14Time: " ", track15: " ", track15Time: " ", track16: " ", track16Time: " ", track17: " ", track17Time: " ", track18: " ", track18Time: " ", track19: " ", track19Time: " ", track20: " ", track20Time: " ", track21: " ", track21Time: " ", track22: " ", track22Time: " ", track23: " ", track23Time: " ", track24: " ", track24Time: " ", track25: " ", track25Time: " ", }, { backgroundImage: "MUSICDIR/Lamp_-_Gensou_(2008).jpeg", posterUrl: "MUSICDIR/Lamp_-_Gensou_(2008).jpeg", title: "Gensou", album: "Gensou", year: 2008, artist: "Lamp", musicPath: "MUSICDIR/Lamp_-_Gensou_(2008).mp3", track1: " ", track1Time: " ", track2: " ", track2Time: " ", track3: " ", track3Time: " ", track4: " ", track4Time: " ", track5: " ", track5Time: " ", track6: " ", track6Time: " ", track7: " ", track7Time: " ", track8: " ", track8Time: " ", track9: " ", track9Time: " ", track10: " ", track10Time: " ", track11: " ", track11Time: " ", track12: " ", track12Time: " ", track13: " ", track13Time: " ", track14: " ", track14Time: " ", track15: " ", track15Time: " ", track16: " ", track16Time: " ", track17: " ", track17Time: " ", track18: " ", track18Time: " ", track19: " ", track19Time: " ", track20: " ", track20Time: " ", track21: " ", track21Time: " ", track22: " ", track22Time: " ", track23: " ", track23Time: " ", track24: " ", track24Time: " ", track25: " ", track25Time: " ", }, { backgroundImage: "MUSICDIR/Lamp_-_Tokyo_Utopia_Tsushin_(2011).jpeg", posterUrl: "MUSICDIR/Lamp_-_Tokyo_Utopia_Tsushin_(2011).jpeg", title: "Tokyo Utopia Tsushin", album: "Tokyo Utopia Tsushin", year: 2011, artist: "Lamp", musicPath: "MUSICDIR/Lamp_-_Tokyo_Utopia_Tsushin_(2011).mp3", track1: " ", track1Time: " ", track2: " ", track2Time: " ", track3: " ", track3Time: " ", track4: " ", track4Time: " ", track5: " ", track5Time: " ", track6: " ", track6Time: " ", track7: " ", track7Time: " ", track8: " ", track8Time: " ", track9: " ", track9Time: " ", track10: " ", track10Time: " ", track11: " ", track11Time: " ", track12: " ", track12Time: " ", track13: " ", track13Time: " ", track14: " ", track14Time: " ", track15: " ", track15Time: " ", track16: " ", track16Time: " ", track17: " ", track17Time: " ", track18: " ", track18Time: " ", track19: " ", track19Time: " ", track20: " ", track20Time: " ", track21: " ", track21Time: " ", track22: " ", track22Time: " ", track23: " ", track23Time: " ", track24: " ", track24Time: " ", track25: " ", track25Time: " ", }, { backgroundImage: "MUSICDIR/Lamp_-_恋人へ_(2004).jpeg", posterUrl: "MUSICDIR/Lamp_-_恋人へ_(2004).jpeg", title: "恋人へ", album: "恋人へ", year: 2004, artist: "Lamp", musicPath: "MUSICDIR/Lamp_-_恋人へ_(2004).mp3", track1: " ", track1Time: " ", track2: " ", track2Time: " ", track3: " ", track3Time: " ", track4: " ", track4Time: " ", track5: " ", track5Time: " ", track6: " ", track6Time: " ", track7: " ", track7Time: " ", track8: " ", track8Time: " ", track9: " ", track9Time: " ", track10: " ", track10Time: " ", track11: " ", track11Time: " ", track12: " ", track12Time: " ", track13: " ", track13Time: " ", track14: " ", track14Time: " ", track15: " ", track15Time: " ", track16: " ", track16Time: " ", track17: " ", track17Time: " ", track18: " ", track18Time: " ", track19: " ", track19Time: " ", track20: " ", track20Time: " ", track21: " ", track21Time: " ", track22: " ", track22Time: " ", track23: " ", track23Time: " ", track24: " ", track24Time: " ", track25: " ", track25Time: " ", }, { backgroundImage: "MUSICDIR/Lift_-_Caverns_Of_Your_Brain_(1977).jpeg", posterUrl: "MUSICDIR/Lift_-_Caverns_Of_Your_Brain_(1977).jpeg", title: "Caverns Of Your Brain", album: "Caverns Of Your Brain", year: 1977, artist: "Lift", musicPath: "MUSICDIR/Lift_-_Caverns_Of_Your_Brain_(1977).mp3", track1: " ", track1Time: " ", track2: " ", track2Time: " ", track3: " ", track3Time: " ", track4: " ", track4Time: " ", track5: " ", track5Time: " ", track6: " ", track6Time: " ", track7: " ", track7Time: " ", track8: " ", track8Time: " ", track9: " ", track9Time: " ", track10: " ", track10Time: " ", track11: " ", track11Time: " ", track12: " ", track12Time: " ", track13: " ", track13Time: " ", track14: " ", track14Time: " ", track15: " ", track15Time: " ", track16: " ", track16Time: " ", track17: " ", track17Time: " ", track18: " ", track18Time: " ", track19: " ", track19Time: " ", track20: " ", track20Time: " ", track21: " ", track21Time: " ", track22: " ", track22Time: " ", track23: " ", track23Time: " ", track24: " ", track24Time: " ", track25: " ", track25Time: " ", }, { backgroundImage: "MUSICDIR/Mamadou_Diabaté_-_Griot_classique_(2014).jpeg", posterUrl: "MUSICDIR/Mamadou_Diabaté_-_Griot_classique_(2014).jpeg", title: "Griot Classique", album: "Griot Classique", year: 2014, artist: "Mamadou Diabaté", musicPath: "MUSICDIR/Mamadou_Diabaté_-_Griot_classique_(2014).mp3", track1: " ", track1Time: " ", track2: " ", track2Time: " ", track3: " ", track3Time: " ", track4: " ", track4Time: " ", track5: " ", track5Time: " ", track6: " ", track6Time: " ", track7: " ", track7Time: " ", track8: " ", track8Time: " ", track9: " ", track9Time: " ", track10: " ", track10Time: " ", track11: " ", track11Time: " ", track12: " ", track12Time: " ", track13: " ", track13Time: " ", track14: " ", track14Time: " ", track15: " ", track15Time: " ", track16: " ", track16Time: " ", track17: " ", track17Time: " ", track18: " ", track18Time: " ", track19: " ", track19Time: " ", track20: " ", track20Time: " ", track21: " ", track21Time: " ", track22: " ", track22Time: " ", track23: " ", track23Time: " ", track24: " ", track24Time: " ", track25: " ", track25Time: " ", }, { backgroundImage: "MUSICDIR/Mamadou_Diabaté_-_Tunga_(2000).jpeg", posterUrl: "MUSICDIR/Mamadou_Diabaté_-_Tunga_(2000).jpeg", title: "Tunga", album: "Tunga", year: 2000, artist: "Mamadou Diabaté", musicPath: "MUSICDIR/Mamadou_Diabaté_-_Tunga_(2000).mp3", }, ]; /** * add eventListnere on all elements that are passed */ const addEventOnElements = function (elements, eventType, callback) { for (let i = 0, len = elements.length; i < len; i++) { elements[i].addEventListener(eventType, callback); } } /** * PLAYLIST * * add all music in playlist, from 'musicData' */ const playlist = document.querySelector("[data-music-list]"); for (let i = 0, len = musicData.length; i < len; i++) { playlist.innerHTML += `
    • `; } /** * PLAYLIST MODAL SIDEBAR TOGGLE * * show 'playlist' modal sidebar when click on playlist button in top app bar * and hide when click on overlay or any playlist-item */ const playlistSideModal = document.querySelector("[data-playlist]"); const playlistTogglers = document.querySelectorAll("[data-playlist-toggler]"); const overlay = document.querySelector("[data-overlay]"); const togglePlaylist = function () { playlistSideModal.classList.toggle("active"); overlay.classList.toggle("active"); document.body.classList.toggle("modalActive"); } addEventOnElements(playlistTogglers, "click", togglePlaylist); /** * PLAYLIST ITEM * * remove active state from last time played music * and add active state in clicked music */ const playlistItems = document.querySelectorAll("[data-playlist-item]"); let currentMusic = 0; let lastPlayedMusic = 0; const changePlaylistItem = function () { playlistItems[lastPlayedMusic].classList.remove("playing"); playlistItems[currentMusic].classList.add("playing"); } addEventOnElements(playlistItems, "click", function () { lastPlayedMusic = currentMusic; currentMusic = Number(this.dataset.playlistItem); changePlaylistItem(); }); /** * PLAYER * * change all visual information on player, based on current music */ const playerBanner = document.querySelector("[data-player-banner]"); const playerTitle = document.querySelector("[data-title]"); /*const playerAlbum = document.querySelector("[data-album]");*/ const playerYear = document.querySelector("[data-year]"); const playerArtist = document.querySelector("[data-artist]"); const playerTrackList_1 = document.querySelector("[data-track-1]"); const playerTrackList_2 = document.querySelector("[data-track-2]"); const playerTrackList_3 = document.querySelector("[data-track-3]"); const playerTrackList_4 = document.querySelector("[data-track-4]"); const playerTrackList_5 = document.querySelector("[data-track-5]"); const playerTrackList_6 = document.querySelector("[data-track-6]"); const playerTrackList_7 = document.querySelector("[data-track-7]"); const playerTrackList_8 = document.querySelector("[data-track-8]"); const playerTrackList_9 = document.querySelector("[data-track-9]"); const playerTrackList_10 = document.querySelector("[data-track-10]"); const playerTrackList_11 = document.querySelector("[data-track-11]"); const playerTrackList_12 = document.querySelector("[data-track-12]"); const playerTrackList_13 = document.querySelector("[data-track-13]"); const playerTrackList_14 = document.querySelector("[data-track-14]"); const playerTrackList_15 = document.querySelector("[data-track-15]"); const playerTrackList_16 = document.querySelector("[data-track-16]"); const playerTrackList_17 = document.querySelector("[data-track-17]"); const playerTrackList_18 = document.querySelector("[data-track-18]"); const playerTrackList_19 = document.querySelector("[data-track-19]"); const playerTrackList_20 = document.querySelector("[data-track-20]"); const playerTrackList_21 = document.querySelector("[data-track-21]"); const playerTrackList_22 = document.querySelector("[data-track-22]"); const playerTrackList_23 = document.querySelector("[data-track-23]"); const playerTrackList_24 = document.querySelector("[data-track-24]"); const playerTrackList_25 = document.querySelector("[data-track-25]"); const audioSource = new Audio(musicData[currentMusic].musicPath); const changePlayerInfo = function () { playerBanner.src = musicData[currentMusic].posterUrl; playerBanner.setAttribute("alt", `${musicData[currentMusic].title} Album Poster`); playerTitle.textContent = musicData[currentMusic].title; /*playerAlbum.textContent = musicData[currentMusic].album;*/ playerYear.textContent = musicData[currentMusic].year; playerArtist.textContent = musicData[currentMusic].artist; /* idk js, how do I make this not wholesome yandre dev simulator big chungus sussy moment */ playerTrackList_1.innerHTML = `${musicData[currentMusic].track1Time}${musicData[currentMusic].track1}`; playerTrackList_2.innerHTML = `${musicData[currentMusic].track2Time}${musicData[currentMusic].track2}`; playerTrackList_3.innerHTML = `${musicData[currentMusic].track3Time}${musicData[currentMusic].track3}`; playerTrackList_4.innerHTML = `${musicData[currentMusic].track4Time}${musicData[currentMusic].track4}`; playerTrackList_5.innerHTML = `${musicData[currentMusic].track5Time}${musicData[currentMusic].track5}`; playerTrackList_6.innerHTML = `${musicData[currentMusic].track6Time}${musicData[currentMusic].track6}`; playerTrackList_7.innerHTML = `${musicData[currentMusic].track7Time}${musicData[currentMusic].track7}`; playerTrackList_8.innerHTML = `${musicData[currentMusic].track8Time}${musicData[currentMusic].track8}`; playerTrackList_9.innerHTML = `${musicData[currentMusic].track9Time}${musicData[currentMusic].track9}`; playerTrackList_10.innerHTML = `${musicData[currentMusic].track10Time}${musicData[currentMusic].track10}`; playerTrackList_11.innerHTML = `${musicData[currentMusic].track11Time}${musicData[currentMusic].track11}`; playerTrackList_12.innerHTML = `${musicData[currentMusic].track12Time}${musicData[currentMusic].track12}`; playerTrackList_13.innerHTML = `${musicData[currentMusic].track13Time}${musicData[currentMusic].track13}`; playerTrackList_14.innerHTML = `${musicData[currentMusic].track14Time}${musicData[currentMusic].track14}`; playerTrackList_15.innerHTML = `${musicData[currentMusic].track15Time}${musicData[currentMusic].track15}`; playerTrackList_16.innerHTML = `${musicData[currentMusic].track16Time}${musicData[currentMusic].track16}`; playerTrackList_17.innerHTML = `${musicData[currentMusic].track17Time}${musicData[currentMusic].track17}`; playerTrackList_18.innerHTML = `${musicData[currentMusic].track18Time}${musicData[currentMusic].track18}`; playerTrackList_19.innerHTML = `${musicData[currentMusic].track19Time}${musicData[currentMusic].track19}`; playerTrackList_20.innerHTML = `${musicData[currentMusic].track20Time}${musicData[currentMusic].track20}`; playerTrackList_21.innerHTML = `${musicData[currentMusic].track21Time}${musicData[currentMusic].track21}`; playerTrackList_22.innerHTML = `${musicData[currentMusic].track22Time}${musicData[currentMusic].track22}`; playerTrackList_23.innerHTML = `${musicData[currentMusic].track23Time}${musicData[currentMusic].track23}`; playerTrackList_24.innerHTML = `${musicData[currentMusic].track24Time}${musicData[currentMusic].track24}`; playerTrackList_25.innerHTML = `${musicData[currentMusic].track25Time}${musicData[currentMusic].track25}`; audioSource.src = musicData[currentMusic].musicPath; audioSource.addEventListener("loadeddata", updateDuration); playMusic(); } addEventOnElements(playlistItems, "click", changePlayerInfo); /** update player duration */ const playerDuration = document.querySelector("[data-duration]"); const playerSeekRange = document.querySelector("[data-seek]"); /** pass seconds and get timcode formate */ const getTimecode = function (duration) { const minutes = Math.floor(duration / 60); const seconds = Math.ceil(duration - (minutes * 60)); const timecode = `${minutes}:${seconds < 10 ? "0" : ""}${seconds}`; return timecode; } /* timecode to seconds. Look at me, I can write javascript too! Oh okay, fine... I just stole and butchered it. */ function setTimecode(timecode) { console.log( timecode ); var string = timecode; var time_array = string.split(':'); time_array = time_array.reverse(); console.log( time_array ); console.log( 'length', time_array.length ); var multiply = [1, 60, 3600]; var seconds = 0; var i = 0; for( i=0; i < time_array.length; i++) { console.log( time_array[i] + '*' + multiply[i] + '+' + seconds ) seconds = time_array[i] * multiply[i] + seconds; } console.log( seconds ); /* I know these two lines are so small and easy, but I am genuinely super happy I figured this out. I've never worked with js before so every small thing is huge for me. Yay! */ audioSource.currentTime = seconds; playerRunningTime.textContent = getTimecode(seconds); } const updateDuration = function () { playerSeekRange.max = Math.ceil(audioSource.duration); playerDuration.textContent = getTimecode(Number(playerSeekRange.max)); } audioSource.addEventListener("loadeddata", updateDuration); /** * PLAY MUSIC * * play and pause music when click on play button */ const playBtn = document.querySelector("[data-play-btn]"); let playInterval; const playMusic = function () { if (audioSource.paused) { audioSource.play(); playBtn.classList.add("active"); playInterval = setInterval(updateRunningTime, 500); } else { audioSource.pause(); playBtn.classList.remove("active"); clearInterval(playInterval); } } playBtn.addEventListener("click", playMusic); /** update running time while playing music */ const playerRunningTime = document.querySelector("[data-running-time"); const updateRunningTime = function () { playerSeekRange.value = audioSource.currentTime; playerRunningTime.textContent = getTimecode(audioSource.currentTime); updateRangeFill(); isMusicEnd(); } /** * RANGE FILL WIDTH * * change 'rangeFill' width, while changing range value */ const ranges = document.querySelectorAll("[data-range]"); const rangeFill = document.querySelector("[data-range-fill]"); const updateRangeFill = function () { let element = this || ranges[0]; const rangeValue = (element.value / element.max) * 100; element.nextElementSibling.style.width = `${rangeValue}%`; } addEventOnElements(ranges, "input", updateRangeFill); /** * SEEK MUSIC * * seek music while changing player seek range */ const seek = function () { audioSource.currentTime = playerSeekRange.value; playerRunningTime.textContent = getTimecode(playerSeekRange.value); } playerSeekRange.addEventListener("input", seek); /** * END MUSIC */ const isMusicEnd = function () { if (audioSource.ended) { playBtn.classList.remove("active"); audioSource.currentTime = 0; playerSeekRange.value = audioSource.currentTime; skipNext(); playerRunningTime.textContent = getTimecode(audioSource.currentTime); updateRangeFill(); } } /** * SKIP TO NEXT MUSIC */ const playerSkipNextBtn = document.querySelector("[data-skip-next]"); const skipNext = function () { lastPlayedMusic = currentMusic; if (isShuffled) { shuffleMusic(); } else { currentMusic >= musicData.length - 1 ? currentMusic = 0 : currentMusic++; } changePlayerInfo(); changePlaylistItem(); } playerSkipNextBtn.addEventListener("click", skipNext); /** * SKIP TO PREVIOUS MUSIC */ const playerSkipPrevBtn = document.querySelector("[data-skip-prev]"); const skipPrev = function () { lastPlayedMusic = currentMusic; if (isShuffled) { shuffleMusic(); } else { currentMusic <= 0 ? currentMusic = musicData.length - 1 : currentMusic--; } changePlayerInfo(); changePlaylistItem(); } playerSkipPrevBtn.addEventListener("click", skipPrev); /** * SHUFFLE MUSIC */ /** get random number for shuffle */ const getRandomMusic = () => Math.floor(Math.random() * musicData.length); const shuffleMusic = () => currentMusic = getRandomMusic(); const playerShuffleBtn = document.querySelector("[data-shuffle]"); let isShuffled = false; const shuffle = function () { playerShuffleBtn.classList.toggle("active"); isShuffled = isShuffled ? false : true; } playerShuffleBtn.addEventListener("click", shuffle); /** * REPEAT MUSIC */ const playerRepeatBtn = document.querySelector("[data-repeat]"); const repeat = function () { if (!audioSource.loop) { audioSource.loop = true; this.classList.add("active"); } else { audioSource.loop = false; this.classList.remove("active"); } } playerRepeatBtn.addEventListener("click", repeat); /** * MUSIC VOLUME * * increase or decrease music volume when change the volume range */ const playerVolumeRange = document.querySelector("[data-volume]"); const playerVolumeBtn = document.querySelector("[data-volume-btn]"); const changeVolume = function () { audioSource.volume = playerVolumeRange.value; audioSource.muted = false; if (audioSource.volume <= 0.1) { playerVolumeBtn.children[0].textContent = "volume_mute"; } else if (audioSource.volume <= 0.5) { playerVolumeBtn.children[0].textContent = "volume_down"; } else { playerVolumeBtn.children[0].textContent = "volume_up"; } } playerVolumeRange.addEventListener("input", changeVolume); /** * MUTE MUSIC */ const muteVolume = function () { if (!audioSource.muted) { audioSource.muted = true; playerVolumeBtn.children[0].textContent = "volume_off"; } else { changeVolume(); } } playerVolumeBtn.addEventListener("click", muteVolume);