mirror of
https://github.com/rvtr/music.git
synced 2025-10-31 13:51:18 -04:00
Add my own music collection + fix player stopping after song
This commit is contained in:
rmc
GitHub
parent
1e1ffb4d6f
commit
fce8f21162
@ -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;
|
||||
}
|
||||
|
||||
|
||||
@ -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++) {
|
||||
<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>
|
||||
`;
|
||||
@ -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();
|
||||
}
|
||||
|
||||
14
index.html
14
index.html
@ -49,7 +49,7 @@
|
||||
<div class="logo wrapper">
|
||||
<span class="material-symbols-rounded">graphic_eq</span>
|
||||
|
||||
<h1 class="title-lg">Music Player</h1>
|
||||
<h1 class="title-lg">Lillian's Playlist</h1>
|
||||
</div>
|
||||
|
||||
<div class="top-bar-actions">
|
||||
@ -75,21 +75,21 @@
|
||||
<div class="container">
|
||||
|
||||
<figure class="music-banner">
|
||||
<img src="./assets/images/poster-1.jpg" width="800" height="800" alt="Happy Moments (Master) Album Poster"
|
||||
<img src="https://cdn.randommeaninglesscharacters.com/music-albums/Ahmad_Jamal_-_Jamalca_(1974).jpeg" width="800" height="800" alt="Jamalca Album Poster"
|
||||
class="img-cover" data-player-banner>
|
||||
</figure>
|
||||
|
||||
<div class="music-content">
|
||||
|
||||
<h2 class="headline-sm" data-title>Happy Moments (Master)</h2>
|
||||
<h2 class="headline-sm" data-title>Jamalca</h2>
|
||||
|
||||
<p class="label-lg label-wrapper wrapper">
|
||||
<span data-album>No Spirit</span>
|
||||
<span data-album>Jamalca</span>
|
||||
|
||||
<span data-year>2022</span>
|
||||
<span data-year>1974</span>
|
||||
</p>
|
||||
|
||||
<p class="label-md artist" data-artist>No Spirit x Tonion</p>
|
||||
<p class="label-md artist" data-artist>Ahmad Jamal</p>
|
||||
|
||||
<div class="seek-control">
|
||||
|
||||
@ -103,7 +103,7 @@
|
||||
<div class="duration-label wrapper">
|
||||
<span class="label-md" data-running-time>0:00</span>
|
||||
|
||||
<span class="label-md" data-duration>1:00</span>
|
||||
<span class="label-md" data-duration>0:01</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user