Hi @julianborghuis , als ik mij niet vergis is dat deze speler, toch?
Ik zie dat daar inderdaad het <audio>
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
:
<audio style="display: none" width="1" height="1" id="music-player" autoplay></audio>
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").pause();
}
In de loop functie, $(".loop").click(function () {
, zou je de volgende code kunnen toevoegen om het loopen van het geluid te toggelen:
document.getElementById("music-player").loop = !document.getElementById("music-player").loop;
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 <audio>
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
:
document.getElementById("music-player").currentTime = 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) {
time += 0.1;
if (time >= maxtime) {
if (loop) {
time = 0;
}else if (song < songs.length - 1) {
song++;
start();
} else {
song = 0;
play = false;
$(".playpause").removeClass('play');
start();
}
}
init();
}
}
Zoals je ziet, het zijn minimale aanpassingen die de speler laten werken 🙂
Nogmaals, een uitgewerkte versie staat op JSFiddle.