I want to store 10 songs statically in JavaScript and add more songs dynamically via the web application.
At the same time, I would like to show 5 random songs in the list using the button. I like a search field. Can anyone give tips and hints?
Having 10 song on on client side is bad idea because each time you load webpage that 10 songs need to be loaded on users browser. It is possible user may not listen all of them but just listen 1 or 2.
Best approach is you have your best 10 songs list available, once user play some song you stream it right away.
You can find sample codes from git projects just search for "git : music player"
// Predefined Songs
const songs = [
'song 1',
'song 2',
'song 3',
'song 4',
'song 5',
'song 6',
'song 7',
'song 8',
'song 10',
];
// Parent Element of list of songs
const ul = document.querySelector('ul');
// Add Songs
songs.push('song');
// Display It
const displaySongs = () => {
const randomSongs = [];
for (let i = 0; i < 5; i++) {
let songIndex = Math.floor(Math.random() * songs.length);
if (!randomSongs.includes(songs[songIndex])) {
randomSongs.push(songs[songIndex]);
} else {
i--;
}
}
ul.innerHTML = randomSongs.map((song) => `<li>${song}</li>`).join('');
};
displaySongs();