diff options
Diffstat (limited to 'src/js/aplaylist.js')
-rw-r--r-- | src/js/aplaylist.js | 53 |
1 files changed, 53 insertions, 0 deletions
diff --git a/src/js/aplaylist.js b/src/js/aplaylist.js new file mode 100644 index 0000000..1d88b62 --- /dev/null +++ b/src/js/aplaylist.js @@ -0,0 +1,53 @@ +init(); + +function init(){ + var video = document.getElementById('video'); + var playlist = document.getElementById('playlist'); + var tracks = playlist.getElementsByTagName('a'); + video.volume = 0.50; + + //Cuenta los tracks + for(var track in tracks) { + var link = tracks[track]; + if(typeof link === "function" || typeof link === "number") continue; + link.addEventListener('click', function(e) { + e.preventDefault(); + var song = this.getAttribute('href'); + run(song, video, this); + }); + } + //Agregamos evento para reproducir el siguiente items + video.addEventListener('ended',function(e) { + for(var track in tracks) { + var link = tracks[track]; + var nextTrack = parseInt(track) + 1; + if(typeof link === "function" || typeof link === "number") continue; + if(!this.src) this.src = tracks[0]; + if(track == (tracks.length - 1)) nextTrack = 0; + console.log(nextTrack); + if(link.getAttribute('href') === this.src) { + var nextLink = tracks[nextTrack]; + run(nextLink.getAttribute('href'), video, nextLink); + break; + } + } + }); +} + +function run(song, video, link){ + var parent = link.parentElement; + //Quita el active de todos los elementos de la lista + var items = parent.parentElement.getElementsByTagName('li'); + for(var item in items) { + if(items[item].classList) + items[item].classList.remove("is-active-play"); + } + + //Agrega active a este elemento + parent.classList.add("is-active-play"); + + //Inicia la reproducción + video.src = song; + video.load(); + video.play(); +} |