mirror of
https://github.com/rvtr/music.git
synced 2025-10-31 13:51:18 -04:00
826 lines
31 KiB
JavaScript
826 lines
31 KiB
JavaScript
'use strict';
|
|
|
|
|
|
|
|
/**
|
|
* all music information
|
|
*/
|
|
|
|
const musicData = [
|
|
{
|
|
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: "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: "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: "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: "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",
|
|
},
|
|
|
|
];
|
|
|
|
|
|
|
|
/**
|
|
* 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 += `
|
|
<li>
|
|
<button class="music-item ${i === 0 ? "playing" : ""}" data-playlist-toggler data-playlist-item="${i}">
|
|
<img src="${musicData[i].posterUrl}" width="800" height="800" alt="${musicData[i].title} Album Poster"
|
|
class="img-cover">
|
|
|
|
<div class="item-icon">
|
|
<span class="material-symbols-rounded">equalizer</span>
|
|
</div>
|
|
<!-- <span style="color:white;font-size:10pt;">${musicData[i].title}</span> -->
|
|
</button>
|
|
</li>
|
|
`;
|
|
}
|
|
|
|
|
|
|
|
/**
|
|
* 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 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;
|
|
|
|
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;
|
|
}
|
|
|
|
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); |