diff --git a/assets/css/style.css b/assets/css/style.css index 13b4cbe..55d68ab 100644 --- a/assets/css/style.css +++ b/assets/css/style.css @@ -211,7 +211,7 @@ body:hover::-webkit-scrollbar-thumb { background-color: var(--surface-variant); .img-cover { width: 100%; height: 100%; - object-fit: cover; + object-fit: scale-down; } .headline-sm { @@ -419,6 +419,7 @@ body:hover::-webkit-scrollbar-thumb { background-color: var(--surface-variant); .music-list { display: grid; + grid-template-columns: repeat(2, 1fr); gap: 20px; } diff --git a/assets/js/script.js b/assets/js/script.js index 476e906..715d951 100644 --- a/assets/js/script.js +++ b/assets/js/script.js @@ -8,50 +8,465 @@ const musicData = [ { - backgroundImage: "./assets/images/poster-1.jpg", - posterUrl: "./assets/images/poster-1.jpg", - title: "Happy Moments (Master)", - album: "No Spirit", - year: 2022, - artist: "No Spirit x Tonion", - musicPath: "./assets/music/music-1.mp3", + backgroundImage: "https://cdn.randommeaninglesscharacters.com/music-albums/Ahmad_Jamal_-_Jamalca_(1974).jpeg", + posterUrl: "https://cdn.randommeaninglesscharacters.com/music-albums/Ahmad_Jamal_-_Jamalca_(1974).jpeg", + title: "Jamalca", + album: "Jamalca", + year: 1974, + artist: "Ahmad Jamal", + musicPath: "https://cdn.randommeaninglesscharacters.com/music-albums/Ahmad_Jamal_-_Jamalca_(1974).mp3", }, { - backgroundImage: "./assets/images/poster-2.jpg", - posterUrl: "./assets/images/poster-2.jpg", - title: "We Are Going To Be Ok (Master)", - album: "No Spirit", - year: 2022, - artist: "No Spirit x Jhove", - musicPath: "./assets/music/music-2.mp3", + backgroundImage: "https://cdn.randommeaninglesscharacters.com/music-albums/Ahmad_Jamal_-_One_(1978).jpeg", + posterUrl: "https://cdn.randommeaninglesscharacters.com/music-albums/Ahmad_Jamal_-_One_(1978).jpeg", + title: "One", + album: "One", + year: 1978, + artist: "Ahmad Jamal", + musicPath: "https://cdn.randommeaninglesscharacters.com/music-albums/Ahmad_Jamal_-_One_(1978).mp3", }, { - backgroundImage: "./assets/images/poster-3.jpg", - posterUrl: "./assets/images/poster-3.jpg", - title: "Winter Meadow", - album: "No Spirit", - year: 2022, - artist: "No Spirit x juniorodeo", - musicPath: "./assets/music/music-3.mp3", + backgroundImage: "https://cdn.randommeaninglesscharacters.com/music-albums/Ahmad_Jamal_-_Poinciana_(1951).jpeg", + posterUrl: "https://cdn.randommeaninglesscharacters.com/music-albums/Ahmad_Jamal_-_Poinciana_(1951).jpeg", + title: "Poinciana", + album: "Poinciana", + year: 1951, + artist: "Ahmad Jamal", + musicPath: "https://cdn.randommeaninglesscharacters.com/music-albums/Ahmad_Jamal_-_Poinciana_(1951).mp3", }, { - backgroundImage: "./assets/images/poster-4.jpg", - posterUrl: "./assets/images/poster-4.jpg", - title: "From Where We Started", - album: "No Spirit", - year: 2022, - artist: "No Spirit", - musicPath: "./assets/music/music-4.mp3", + backgroundImage: "https://cdn.randommeaninglesscharacters.com/music-albums/Akira_Ishikawa_&_His_Count_Buffalos_-_Get_Up_!_(1975).jpeg", + posterUrl: "https://cdn.randommeaninglesscharacters.com/music-albums/Akira_Ishikawa_&_His_Count_Buffalos_-_Get_Up_!_(1975).jpeg", + title: "Get Up!", + album: "Get Up!", + year: 1975, + artist: "Akira Ishikawa & His Count Buffalos", + musicPath: "https://cdn.randommeaninglesscharacters.com/music-albums/Akira_Ishikawa_&_His_Count_Buffalos_-_Get_Up_!_(1975).mp3", }, { - backgroundImage: "./assets/images/poster-5.jpg", - posterUrl: "./assets/images/poster-5.jpg", - title: "Where I Found You", - album: "No Spirit", - year: 2022, - artist: "No Spirit", - musicPath: "./assets/music/music-5.mp3", + backgroundImage: "https://cdn.randommeaninglesscharacters.com/music-albums/Akira_Ishikawa_-_Bakishinba_Memories_of_Africa_(1970).jpeg", + posterUrl: "https://cdn.randommeaninglesscharacters.com/music-albums/Akira_Ishikawa_-_Bakishinba_Memories_of_Africa_(1970).jpeg", + title: "Bakishinba Memories of Africa", + album: "Bakishinba Memories of Africa", + year: 1970, + artist: "Akira Ishikawa", + musicPath: "https://cdn.randommeaninglesscharacters.com/music-albums/Akira_Ishikawa_-_Bakishinba_Memories_of_Africa_(1970).mp3", }, + { + backgroundImage: "https://cdn.randommeaninglesscharacters.com/music-albums/AllahLas_-_AllahLas_(2012).jpeg", + posterUrl: "https://cdn.randommeaninglesscharacters.com/music-albums/AllahLas_-_AllahLas_(2012).jpeg", + title: "AllahLas", + album: "AllahLas", + year: 2012, + artist: "AllahLas", + musicPath: "https://cdn.randommeaninglesscharacters.com/music-albums/AllahLas_-_AllahLas_(2012).mp3", + }, + { + backgroundImage: "https://cdn.randommeaninglesscharacters.com/music-albums/AllahLas_-_Worship_The_Sun_(2014).jpeg", + posterUrl: "https://cdn.randommeaninglesscharacters.com/music-albums/AllahLas_-_Worship_The_Sun_(2014).jpeg", + title: "Worship The Sun", + album: "Worship The Sun", + year: 2014, + artist: "AllahLas", + musicPath: "https://cdn.randommeaninglesscharacters.com/music-albums/AllahLas_-_Worship_The_Sun_(2014).mp3", + }, + { + backgroundImage: "https://cdn.randommeaninglesscharacters.com/music-albums/Anri_-_Timely_(1983).jpeg", + posterUrl: "https://cdn.randommeaninglesscharacters.com/music-albums/Anri_-_Timely_(1983).jpeg", + title: "Timely", + album: "Timely", + year: 1983, + artist: "Anri", + musicPath: "https://cdn.randommeaninglesscharacters.com/music-albums/Anri_-_Timely_(1983).mp3", + }, + { + backgroundImage: "https://cdn.randommeaninglesscharacters.com/music-albums/Automatic_Man_-_Visitors_(1977).jpeg", + posterUrl: "https://cdn.randommeaninglesscharacters.com/music-albums/Automatic_Man_-_Visitors_(1977).jpeg", + title: "Visitors", + album: "Visitors", + year: 1977, + artist: "Automatic Man", + musicPath: "https://cdn.randommeaninglesscharacters.com/music-albums/Automatic_Man_-_Visitors_(1977).mp3", + }, + { + backgroundImage: "https://cdn.randommeaninglesscharacters.com/music-albums/Camel_-_Mirage_(1974).jpeg", + posterUrl: "https://cdn.randommeaninglesscharacters.com/music-albums/Camel_-_Mirage_(1974).jpeg", + title: "Mirage", + album: "Mirage", + year: 1974, + artist: "Camel", + musicPath: "https://cdn.randommeaninglesscharacters.com/music-albums/Camel_-_Mirage_(1974).mp3", + }, + { + backgroundImage: "https://cdn.randommeaninglesscharacters.com/music-albums/Casey_And_The_Pressure_Group_-_Powerhouse_(1970).jpeg", + posterUrl: "https://cdn.randommeaninglesscharacters.com/music-albums/Casey_And_The_Pressure_Group_-_Powerhouse_(1970).jpeg", + title: "Powerhouse", + album: "Powerhouse", + year: 1970, + artist: "Casey And The Pressure Group", + musicPath: "https://cdn.randommeaninglesscharacters.com/music-albums/Casey_And_The_Pressure_Group_-_Powerhouse_(1970).mp3", + }, + { + backgroundImage: "https://cdn.randommeaninglesscharacters.com/music-albums/Casiopea_-_Crosspoint_(1981).jpeg", + posterUrl: "https://cdn.randommeaninglesscharacters.com/music-albums/Casiopea_-_Crosspoint_(1981).jpeg", + title: "Crosspoint", + album: "Crosspoint", + year: 1981, + artist: "Casiopea", + musicPath: "https://cdn.randommeaninglesscharacters.com/music-albums/Casiopea_-_Crosspoint_(1981).mp3", + }, + { + backgroundImage: "https://cdn.randommeaninglesscharacters.com/music-albums/Casiopea_-_Mint_Jams_(1982).jpeg", + posterUrl: "https://cdn.randommeaninglesscharacters.com/music-albums/Casiopea_-_Mint_Jams_(1982).jpeg", + title: "Mint Jams", + album: "Mint Jams", + year: 1982, + artist: "Casiopea", + musicPath: "https://cdn.randommeaninglesscharacters.com/music-albums/Casiopea_-_Mint_Jams_(1982).mp3", + }, + { + backgroundImage: "https://cdn.randommeaninglesscharacters.com/music-albums/Chu_Kosaka_-_Arigato_(1971).jpeg", + posterUrl: "https://cdn.randommeaninglesscharacters.com/music-albums/Chu_Kosaka_-_Arigato_(1971).jpeg", + title: "Arigato", + album: "Arigato", + year: 1971, + artist: "Chu Kosaka", + musicPath: "https://cdn.randommeaninglesscharacters.com/music-albums/Chu_Kosaka_-_Arigato_(1971).mp3", + }, + { + backgroundImage: "https://cdn.randommeaninglesscharacters.com/music-albums/Chu_Kosaka_-_Horo_(1975).jpeg", + posterUrl: "https://cdn.randommeaninglesscharacters.com/music-albums/Chu_Kosaka_-_Horo_(1975).jpeg", + title: "Horo", + album: "Horo", + year: 1975, + artist: "Chu Kosaka", + musicPath: "https://cdn.randommeaninglesscharacters.com/music-albums/Chu_Kosaka_-_Horo_(1975).mp3", + }, + { + backgroundImage: "https://cdn.randommeaninglesscharacters.com/music-albums/Chu_Kosaka_-_Morning_(1977).jpeg", + posterUrl: "https://cdn.randommeaninglesscharacters.com/music-albums/Chu_Kosaka_-_Morning_(1977).jpeg", + title: "Morning", + album: "Morning", + year: 1977, + artist: "Chu Kosaka", + musicPath: "https://cdn.randommeaninglesscharacters.com/music-albums/Chu_Kosaka_-_Morning_(1977).mp3", + }, + { + backgroundImage: "https://cdn.randommeaninglesscharacters.com/music-albums/Crypto_-_Crypto_(1975).jpeg", + posterUrl: "https://cdn.randommeaninglesscharacters.com/music-albums/Crypto_-_Crypto_(1975).jpeg", + title: "Crypto", + album: "Crypto", + year: 1975, + artist: "Crypto", + musicPath: "https://cdn.randommeaninglesscharacters.com/music-albums/Crypto_-_Crypto_(1975).mp3", + }, + { + backgroundImage: "https://cdn.randommeaninglesscharacters.com/music-albums/Cymande_-_Promised_Heights_(1974).jpeg", + posterUrl: "https://cdn.randommeaninglesscharacters.com/music-albums/Cymande_-_Promised_Heights_(1974).jpeg", + title: "Promised Heights", + album: "Promised Heights", + year: 1974, + artist: "Cymande", + musicPath: "https://cdn.randommeaninglesscharacters.com/music-albums/Cymande_-_Promised_Heights_(1974).mp3", + }, + { + backgroundImage: "https://cdn.randommeaninglesscharacters.com/music-albums/Daisuke_Tanabe_-_Before_I_Forget_(2010).jpeg", + posterUrl: "https://cdn.randommeaninglesscharacters.com/music-albums/Daisuke_Tanabe_-_Before_I_Forget_(2010).jpeg", + title: "Before I Forget", + album: "Before I Forget", + year: 2010, + artist: "Daisuke Tanabe", + musicPath: "https://cdn.randommeaninglesscharacters.com/music-albums/Daisuke_Tanabe_-_Before_I_Forget_(2010).mp3", + }, + { + backgroundImage: "https://cdn.randommeaninglesscharacters.com/music-albums/Daisuke_Tanabe_-_Cat_Steps_(2018).jpeg", + posterUrl: "https://cdn.randommeaninglesscharacters.com/music-albums/Daisuke_Tanabe_-_Cat_Steps_(2018).jpeg", + title: "Cat Steps", + album: "Cat Steps", + year: 2018, + artist: "Daisuke Tanabe", + musicPath: "https://cdn.randommeaninglesscharacters.com/music-albums/Daisuke_Tanabe_-_Cat_Steps_(2018).mp3", + }, + { + backgroundImage: "https://cdn.randommeaninglesscharacters.com/music-albums/Daisuke_Tanabe_-_Ten_(2020).jpeg", + posterUrl: "https://cdn.randommeaninglesscharacters.com/music-albums/Daisuke_Tanabe_-_Ten_(2020).jpeg", + title: "Ten", + album: "Ten", + year: 2020, + artist: "Daisuke Tanabe", + musicPath: "https://cdn.randommeaninglesscharacters.com/music-albums/Daisuke_Tanabe_-_Ten_(2020).mp3", + }, + { + backgroundImage: "https://cdn.randommeaninglesscharacters.com/music-albums/Dimension_-_Eighth_Dimension_(1996).jpeg", + posterUrl: "https://cdn.randommeaninglesscharacters.com/music-albums/Dimension_-_Eighth_Dimension_(1996).jpeg", + title: "Eighth Dimesnion", + album: "Eighth Dimesnion", + year: 1996, + artist: "Dimesnion", + musicPath: "https://cdn.randommeaninglesscharacters.com/music-albums/Dimension_-_Eighth_Dimension_(1996).mp3", + }, + { + backgroundImage: "https://cdn.randommeaninglesscharacters.com/music-albums/Dutch_Treat_-_Tranquility_(1977).jpeg", + posterUrl: "https://cdn.randommeaninglesscharacters.com/music-albums/Dutch_Treat_-_Tranquility_(1977).jpeg", + title: "Tranquility", + album: "Tranquility", + year: 1977, + artist: "Dutch Treat", + musicPath: "https://cdn.randommeaninglesscharacters.com/music-albums/Dutch_Treat_-_Tranquility_(1977).mp3", + }, + { + backgroundImage: "https://cdn.randommeaninglesscharacters.com/music-albums/Eloy_-_Colours.jpeg", + posterUrl: "https://cdn.randommeaninglesscharacters.com/music-albums/Eloy_-_Colours.jpeg", + title: "Colours", + album: "Colours", + year: 9999, + artist: "Eloy", + musicPath: "https://cdn.randommeaninglesscharacters.com/music-albums/Eloy_-_Colours.mp3", + }, + { + backgroundImage: "https://cdn.randommeaninglesscharacters.com/music-albums/Eloy_-_Ocean_(1977).jpeg", + posterUrl: "https://cdn.randommeaninglesscharacters.com/music-albums/Eloy_-_Ocean_(1977).jpeg", + title: "Ocean", + album: "Ocean", + year: 1977, + artist: "Eloy", + musicPath: "https://cdn.randommeaninglesscharacters.com/music-albums/Eloy_-_Ocean_(1977).mp3", + }, + { + backgroundImage: "https://cdn.randommeaninglesscharacters.com/music-albums/Eloy_-_Planets_(1981).jpeg", + posterUrl: "https://cdn.randommeaninglesscharacters.com/music-albums/Eloy_-_Planets_(1981).jpeg", + title: "Planets", + album: "Planets", + year: 1981, + artist: "Eloy", + musicPath: "https://cdn.randommeaninglesscharacters.com/music-albums/Eloy_-_Planets_(1981).mp3", + }, + { + backgroundImage: "https://cdn.randommeaninglesscharacters.com/music-albums/Eloy_-_Time_to_turn_(1982).jpeg", + posterUrl: "https://cdn.randommeaninglesscharacters.com/music-albums/Eloy_-_Time_to_turn_(1982).jpeg", + title: "Time to turn", + album: "Time to turn", + year: 1982, + artist: "Eloy", + musicPath: "https://cdn.randommeaninglesscharacters.com/music-albums/Eloy_-_Time_to_turn_(1982).mp3", + }, + { + backgroundImage: "https://cdn.randommeaninglesscharacters.com/music-albums/Eloy_-_Visionary.jpeg", + posterUrl: "https://cdn.randommeaninglesscharacters.com/music-albums/Eloy_-_Visionary.jpeg", + title: "Visionary", + album: "Visionary", + year: 9999, + artist: "Eloy", + musicPath: "https://cdn.randommeaninglesscharacters.com/music-albums/Eloy_-_Visionary.mp3", + }, + { + backgroundImage: "https://cdn.randommeaninglesscharacters.com/music-albums/Emphasis_-_Emphasis_(1975).jpeg", + posterUrl: "https://cdn.randommeaninglesscharacters.com/music-albums/Emphasis_-_Emphasis_(1975).jpeg", + title: "Emphasis", + album: "Emphasis", + year: 1975, + artist: "Emphasis", + musicPath: "https://cdn.randommeaninglesscharacters.com/music-albums/Emphasis_-_Emphasis_(1975).mp3", + }, + { + backgroundImage: "https://cdn.randommeaninglesscharacters.com/music-albums/Fela_Kuti_-_Gentleman_(1973).jpeg", + posterUrl: "https://cdn.randommeaninglesscharacters.com/music-albums/Fela_Kuti_-_Gentleman_(1973).jpeg", + title: "Gentleman", + album: "Gentleman", + year: 1973, + artist: "Fela Kuti", + musicPath: "https://cdn.randommeaninglesscharacters.com/music-albums/Fela_Kuti_-_Gentleman_(1973).mp3", + }, + { + backgroundImage: "https://cdn.randommeaninglesscharacters.com/music-albums/Fela_Kuti_-_He_Miss_Road_(1975).jpeg", + posterUrl: "https://cdn.randommeaninglesscharacters.com/music-albums/Fela_Kuti_-_He_Miss_Road_(1975).jpeg", + title: "He Miss Road", + album: "He Miss Road", + year: 1975, + artist: "Fela Kuti", + musicPath: "https://cdn.randommeaninglesscharacters.com/music-albums/Fela_Kuti_-_He_Miss_Road_(1975).mp3", + }, + { + backgroundImage: "https://cdn.randommeaninglesscharacters.com/music-albums/Friendship_&_Lee_Ritenour_-_Friendship_(1979).jpeg", + posterUrl: "https://cdn.randommeaninglesscharacters.com/music-albums/Friendship_&_Lee_Ritenour_-_Friendship_(1979).jpeg", + title: "Friendship", + album: "Friendship", + year: 1979, + artist: "Friendship & Lee Ritenour", + musicPath: "https://cdn.randommeaninglesscharacters.com/music-albums/Friendship_&_Lee_Ritenour_-_Friendship_(1979).mp3", + }, + { + backgroundImage: "https://cdn.randommeaninglesscharacters.com/music-albums/Gabor_Szabo_-_Dreams_(1968).jpeg", + posterUrl: "https://cdn.randommeaninglesscharacters.com/music-albums/Gabor_Szabo_-_Dreams_(1968).jpeg", + title: "Dreams", + album: "Dreams", + year: 1968, + artist: "Gabor Szabo", + musicPath: "https://cdn.randommeaninglesscharacters.com/music-albums/Gabor_Szabo_-_Dreams_(1968).mp3", + }, + { + backgroundImage: "https://cdn.randommeaninglesscharacters.com/music-albums/Hako_Yamasaki_-_Human_Nature_(1979).jpeg", + posterUrl: "https://cdn.randommeaninglesscharacters.com/music-albums/Hako_Yamasaki_-_Human_Nature_(1979).jpeg", + title: "Human Nature", + album: "Human Nature", + year: 1979, + artist: "Hako Yamasaki", + musicPath: "https://cdn.randommeaninglesscharacters.com/music-albums/Hako_Yamasaki_-_Human_Nature_(1979).mp3", + }, + { + backgroundImage: "https://cdn.randommeaninglesscharacters.com/music-albums/Hako_Yamasaki_-_Tobimasu_(1975).jpeg", + posterUrl: "https://cdn.randommeaninglesscharacters.com/music-albums/Hako_Yamasaki_-_Tobimasu_(1975).jpeg", + title: "Tobimasu", + album: "Tobimasu", + year: 1975, + artist: "Hako Yamasaki", + musicPath: "https://cdn.randommeaninglesscharacters.com/music-albums/Hako_Yamasaki_-_Tobimasu_(1975).mp3", + }, + { + backgroundImage: "https://cdn.randommeaninglesscharacters.com/music-albums/Hiromasa_Suzuki_&_Jiro_Inagaki_Big_Soul_Media_-_By_The_Red_Stream_(1973).jpeg", + posterUrl: "https://cdn.randommeaninglesscharacters.com/music-albums/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: "https://cdn.randommeaninglesscharacters.com/music-albums/Hiromasa_Suzuki_&_Jiro_Inagaki_Big_Soul_Media_-_By_The_Red_Stream_(1973).mp3", + }, + { + backgroundImage: "https://cdn.randommeaninglesscharacters.com/music-albums/Ian_Carr's_Nucleus_-_In_Flagranti_Delicto_(1977).jpeg", + posterUrl: "https://cdn.randommeaninglesscharacters.com/music-albums/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: "https://cdn.randommeaninglesscharacters.com/music-albums/Ian_Carr's_Nucleus_-_In_Flagranti_Delicto_(1977).mp3", + }, + { + backgroundImage: "https://cdn.randommeaninglesscharacters.com/music-albums/Ice_-_Each_Man_Makes_His_Destiny_(1974).jpeg", + posterUrl: "https://cdn.randommeaninglesscharacters.com/music-albums/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: "https://cdn.randommeaninglesscharacters.com/music-albums/Ice_-_Each_Man_Makes_His_Destiny_(1974).mp3", + }, + { + backgroundImage: "https://cdn.randommeaninglesscharacters.com/music-albums/Jiro_Inagaki_Big_Soul_Media_-_Funky_Stuff_(1975).jpeg", + posterUrl: "https://cdn.randommeaninglesscharacters.com/music-albums/Jiro_Inagaki_Big_Soul_Media_-_Funky_Stuff_(1975).jpeg", + title: "Funky Stuff", + album: "Funky Stuff", + year: 1975, + artist: "Jiro Inagaki Big Soul Media", + musicPath: "https://cdn.randommeaninglesscharacters.com/music-albums/Jiro_Inagaki_Big_Soul_Media_-_Funky_Stuff_(1975).mp3", + }, + { + backgroundImage: "https://cdn.randommeaninglesscharacters.com/music-albums/Jun_Fukamachi_-_The_Sea_Of_Dirac_(1977).jpeg", + posterUrl: "https://cdn.randommeaninglesscharacters.com/music-albums/Jun_Fukamachi_-_The_Sea_Of_Dirac_(1977).jpeg", + title: "The Sea Of Dirac", + album: "The Sea Of Dirac", + year: 1977, + artist: "Jun Fukamachi", + musicPath: "https://cdn.randommeaninglesscharacters.com/music-albums/Jun_Fukamachi_-_The_Sea_Of_Dirac_(1977).mp3", + }, + { + backgroundImage: "https://cdn.randommeaninglesscharacters.com/music-albums/Kazumi_Watanabe_&_Manhattan_Blaze_-_Village_In_Bubbles_(1978).jpeg", + posterUrl: "https://cdn.randommeaninglesscharacters.com/music-albums/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: "https://cdn.randommeaninglesscharacters.com/music-albums/Kazumi_Watanabe_&_Manhattan_Blaze_-_Village_In_Bubbles_(1978).mp3", + }, + { + backgroundImage: "https://cdn.randommeaninglesscharacters.com/music-albums/Kazumi_Watanabe_-_The_Spice_Of_Life_Too_(1988).jpeg", + posterUrl: "https://cdn.randommeaninglesscharacters.com/music-albums/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: "https://cdn.randommeaninglesscharacters.com/music-albums/Kazumi_Watanabe_-_The_Spice_Of_Life_Too_(1988).mp3", + }, + { + backgroundImage: "https://cdn.randommeaninglesscharacters.com/music-albums/Kazumi_Watanabe_Quartet_-_Milky_Shade_(1976).jpeg", + posterUrl: "https://cdn.randommeaninglesscharacters.com/music-albums/Kazumi_Watanabe_Quartet_-_Milky_Shade_(1976).jpeg", + title: "Milky Shade", + album: "Milky Shade", + year: 1976, + artist: "Kazumi Watanabe Quartet", + musicPath: "https://cdn.randommeaninglesscharacters.com/music-albums/Kazumi_Watanabe_Quartet_-_Milky_Shade_(1976).mp3", + }, + { + backgroundImage: "https://cdn.randommeaninglesscharacters.com/music-albums/Känguru_-_Känguru_(1981).jpeg", + posterUrl: "https://cdn.randommeaninglesscharacters.com/music-albums/Känguru_-_Känguru_(1981).jpeg", + title: "Känguru", + album: "Känguru", + year: 1981, + artist: "Känguru", + musicPath: "https://cdn.randommeaninglesscharacters.com/music-albums/Känguru_-_Känguru_(1981).mp3", + }, + { + backgroundImage: "https://cdn.randommeaninglesscharacters.com/music-albums/Kumi_Miyasato_-_I_Only_Have_Eyes_For_You_(1985).jpeg", + posterUrl: "https://cdn.randommeaninglesscharacters.com/music-albums/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: "https://cdn.randommeaninglesscharacters.com/music-albums/Kumi_Miyasato_-_I_Only_Have_Eyes_For_You_(1985).mp3", + }, + { + backgroundImage: "https://cdn.randommeaninglesscharacters.com/music-albums/Lamp_-_Gensou_(2008).jpeg", + posterUrl: "https://cdn.randommeaninglesscharacters.com/music-albums/Lamp_-_Gensou_(2008).jpeg", + title: "Gensou", + album: "Gensou", + year: 2008, + artist: "Lamp", + musicPath: "https://cdn.randommeaninglesscharacters.com/music-albums/Lamp_-_Gensou_(2008).mp3", + }, + { + backgroundImage: "https://cdn.randommeaninglesscharacters.com/music-albums/Lamp_-_Tokyo_Utopia_Tsushin_(2011).jpeg", + posterUrl: "https://cdn.randommeaninglesscharacters.com/music-albums/Lamp_-_Tokyo_Utopia_Tsushin_(2011).jpeg", + title: "Tokyo Utopia Tsushin", + album: "Tokyo Utopia Tsushin", + year: 2011, + artist: "Lamp", + musicPath: "https://cdn.randommeaninglesscharacters.com/music-albums/Lamp_-_Tokyo_Utopia_Tsushin_(2011).mp3", + }, + { + backgroundImage: "https://cdn.randommeaninglesscharacters.com/music-albums/Lamp_-_恋人へ_(2004).jpeg", + posterUrl: "https://cdn.randommeaninglesscharacters.com/music-albums/Lamp_-_恋人へ_(2004).jpeg", + title: "恋人へ", + album: "恋人へ", + year: 2004, + artist: "Lamp", + musicPath: "https://cdn.randommeaninglesscharacters.com/music-albums/Lamp_-_恋人へ_(2004).mp3", + }, + { + backgroundImage: "https://cdn.randommeaninglesscharacters.com/music-albums/Lift_-_Caverns_Of_Your_Brain_(1977).jpeg", + posterUrl: "https://cdn.randommeaninglesscharacters.com/music-albums/Lift_-_Caverns_Of_Your_Brain_(1977).jpeg", + title: "Caverns Of Your Brain", + album: "Caverns Of Your Brain", + year: 1977, + artist: "Lift", + musicPath: "https://cdn.randommeaninglesscharacters.com/music-albums/Lift_-_Caverns_Of_Your_Brain_(1977).mp3", + }, + { + backgroundImage: "https://cdn.randommeaninglesscharacters.com/music-albums/Mamadou_Diabaté_-_Griot_classique_(2014).jpeg", + posterUrl: "https://cdn.randommeaninglesscharacters.com/music-albums/Mamadou_Diabaté_-_Griot_classique_(2014).jpeg", + title: "Griot Classique", + album: "Griot Classique", + year: 2014, + artist: "Mamadou Diabaté", + musicPath: "https://cdn.randommeaninglesscharacters.com/music-albums/Mamadou_Diabaté_-_Griot_classique_(2014).mp3", + }, + { + backgroundImage: "https://cdn.randommeaninglesscharacters.com/music-albums/Mamadou_Diabaté_-_Tunga_(2000).jpeg", + posterUrl: "https://cdn.randommeaninglesscharacters.com/music-albums/Mamadou_Diabaté_-_Tunga_(2000).jpeg", + title: "Tunga", + album: "Tunga", + year: 2000, + artist: "Mamadou Diabaté", + musicPath: "https://cdn.randommeaninglesscharacters.com/music-albums/Mamadou_Diabaté_-_Tunga_(2000).mp3", + }, + ]; @@ -86,6 +501,7 @@ for (let i = 0, len = musicData.length; i < len; i++) {
equalizer
+ `; @@ -156,7 +572,6 @@ const audioSource = new Audio(musicData[currentMusic].musicPath); const changePlayerInfo = function () { playerBanner.src = musicData[currentMusic].posterUrl; playerBanner.setAttribute("alt", `${musicData[currentMusic].title} Album Poster`); - document.body.style.backgroundImage = `url(${musicData[currentMusic].backgroundImage})`; playerTitle.textContent = musicData[currentMusic].title; playerAlbum.textContent = musicData[currentMusic].album; playerYear.textContent = musicData[currentMusic].year; @@ -273,7 +688,8 @@ const isMusicEnd = function () { if (audioSource.ended) { playBtn.classList.remove("active"); audioSource.currentTime = 0; - playerSeekRange.value = audioSource.currentTime; + playerSeekRange.value = audioSource.currentTime; + skipNext(); playerRunningTime.textContent = getTimecode(audioSource.currentTime); updateRangeFill(); } diff --git a/index.html b/index.html index 56180ff..26a172c 100644 --- a/index.html +++ b/index.html @@ -49,7 +49,7 @@
@@ -75,21 +75,21 @@
- Happy Moments (Master) Album Poster
-

Happy Moments (Master)

+

Jamalca

- No Spirit + Jamalca - 2022 + 1974

-

No Spirit x Tonion

+

Ahmad Jamal

@@ -103,7 +103,7 @@
0:00 - 1:00 + 0:01