lisagjh
commented
22 hours ago 17 en 18 september
- function: zorgen dat er een random nummer begint te spelen wanneer je op iemand klikt.
Nu de musicplayer op zich zelf werkt is de volgende stap om te zorgen dat er een random speelt als je op een persoon klikt.
Hiervoor moet er data gedeeld moeten kunnen worden tussen de main file (/src/route/+page.svelte) en het child component (src/lib/musicplayer).
+page.svelte
De variable musicPlayerRef zal later naar de MusicPlayer refereren.
bind:this={} is een referentie naar het musicplayer component, waardoor de code uit dat component ook gebruikt kan worden in de main file.
Door de playPersonTrack() functie kan er een random nummer worden gespeeld, met het gebruik van de playRandomSong() functie in de musicplayer component.
Dus elke keer als je op een persoon klikt, word de playPersonTrack() functie aangeroepen, die dus weer de playRandomSong() functie van het musicplayer component aanroept.
<script>
let musicPlayerRef;
function playPersonTrack() {
// Trigger the MusicPlayer to play a random song
musicPlayerRef.playRandomSong();
}
</script>
...
<MusicPlayer bind:this={musicPlayerRef} />
/lib/musicplayer
Door in het component een export {playRandomSong} toe te voegen, kan deze functie in de main file gebruikt worden.
Ook heb ik de functie uitgebreid om er voor te zorgen dat er niet twee keer achter elkaar hetzelfde nummer word gespeeld.
Dit werkt doordat het een index (getal) genereert, checkt of die hetzelfde is als het huidige/vorige nummer, en als dat het geval is genereert het een nieuwe, tot er een andere is.
function playRandomSong() {
// Pick a random song index that is different from the current one
let randomIndex = Math.floor(Math.random() * playlist.length);
// dont play the same song twice in a row
while (randomIndex === songPlayingIndex) {
randomIndex = Math.floor(Math.random() * playlist.length);
}
songPlayingIndex = randomIndex;
play();
}
export { playRandomSong };
Zorgen dat het functioneel is: