en pt nl nl en fr de nl nl en nl nl nl nl nl en nl en nl en nl nl nl nl nl en nl nl en nl nl fr nl
Ik wil het liefst dat elke song een ander nummer kan krijgen. Is niet verplicht maar het liefst wel
Hi @julianborghuis , als ik mij niet vergis is dat deze speler, toch?
Ik zie dat daar inderdaad het   element niet geïmplementeerd is. Je zou deze kunnen toevoegen. In de songs variabele zou je een extra parameter kunnen toevoegen, daar vul je dan de URL van het mp3 bestand in.
De uitgewerkte code staat op JSFiddle en kun je gebruiken. Let wel op: buffering is niet geïmplementeerd en laadfouten in bestanden worden niet behandeld. Deze zou je zelf kunnen toevoegen 🙂
Indien je de uitdaging zelf aan wilt gaan volg dan de volgende stappen:
Voeg het volgende audio element toe aan de webpagina met het id music-player:
Dan zou je in de $(".playpause").click(function () { functie de volgende code kunnen toevoegen om de muziek te starten:
if(play) { document.getElementById("music-player").play(); document.getElementById("music-player").autoplay = true; }else{ document.getElementById("music-player").pauze(); }
In de loop functie, $(".loop").click(function () {, zou je de volgende code kunnen toevoegen om het loopen van het geluid te toggelen:
In de songs array moet je een 8e parameter toevoegen (in javascript zou dat kolom 7 zijn). Plaats hierin de URLs naar de mp3 bestanden. Nu moet je de function start() { nog aanpassen dat die het bestand in de   zet.
Voeg de volgende code toe:
document.getElementById("music-player").src = songs[song][7]; // De array index in javascript begint vanaf 0, de 8e parameter die we moeten gebruiken is dus index 7.
Als het goed is begint de mp3 speler nu muziek te spelen zodra je op de 'play' knop drukt. Ook bij het wisselen veranderd het nummer automatisch.
Om de progressbalk/tijdbalk werkend te maken kun je de currentTime functie gebruiken van het audio element. Ga naar de functie $(".progressbar").click(function () { en voeg de volgende code toe onder time:
Als je nu op de tijdbalk klikt, dan gaat die naar het tijdstip toe waar je geklikt hebt.
Om het loopen beter te laten werken kun moet je de timeincrement() functie aanpassen naar:
function timeincrement() { if (play && time  = maxtime) { if (loop) { time = 0; }else if (song < songs.length - 1) { song++; start(); } else { song = 0; play = false; $(".playpause").removeClass('play'); start(); } } init(); } }