Playlist con HTML e JS

Question

Sto costruendo un player audio personalizzato con JavaScript e sto avendo un po 'di problemi a capire la parte della playlist. Sono in grado di riprodurre una singola canzone sul lettore e ho tutto costruito in HTML per saltare al brano precedente o successivo e un elenco di collegamenti creati per scegliere una canzone specifica. Ho trovato un paio di demo sciatti, ma quando applico il codice per conto mio, il giocatore si rompe. Alla fine quello che voglio è un lettore compatibile con un dispositivo mobile (se questo fa la differenza) che leggerà la playlist salvata in un array. Il lettore consentirà all'utente di riprodurre, mettere in pausa e saltare alla canzone successiva o precedente. L'utente dovrebbe inoltre avere la possibilità di scegliere la canzone dalla lista e il giocatore la caricherà e giocherà.

Non voglio usare jPlayer. Questo è rigorosamente personalizzato da zero. Cosa devo fare dopo? Ecco il mio codice.

Fondamentalmente ciò che non ho sono funzioni per gli elementi della playlist chiave: brano successivo e precedente nell'array e scelta di un brano specifico dall'elenco di titoli visualizzati.

codice aggiornato (W/molte fallite COMMENTATE)

JS:

var playIt = function() { 
var musicPlayer= new Audio(); 
musicPlayer.src = "mulan.mp3"; 
musicPlayer.autoplay= false; 

var currentSong = 0; 
//array for song list 
var playlist = new Array(); 
playlist[0] = {src:'mulan.mp3', name:'mulan'}; 
playlist[1] = ('foxAndHound.mp3'); 
playlist[2] = ('aladdin.mp3'); 

/*var playlist = [ 
{name:"mulan", url:"mulan.mp3"}, 
{name:"friend", url:"foxAndHound.mp3"}, 
{name:"aladdin", url:"aladdin.mp3"}]; 
*/ 
//plays the first song 
var play = document.getElementById('play'); 
play.addEventListener('click', function() { 
    musicPlayer.play(); 
    alert("song playing: " + currentSong[name]); 
}, false); 

//pause the current song 
var pause = document.getElementById('pause'); 
pause.addEventListener('click', function() { 
    musicPlayer.pause(); 
}, false); 

//change the volume 
var volume = document.getElementById('volume'); 
volume.addEventListener('change', function() { 
    musicPlayer.volume= parseFloat(this.value/10); 
}, false); 

var mute = document.getElementById('mute'); 
if(musicPlayer.volume > 0){ 
     mute.addEventListener('click', function(){ 
     musicPlayer.volume= 0; 
     alert('muted'); 
    }); 
} 

//gets song time 
musicPlayer.addEventListener("timeupdate", function() { 
    var duration = document.getElementById('duration'); 
    var s = parseInt(musicPlayer.currentTime % 60); 
    var m = parseInt((musicPlayer.currentTime/60) % 60); 
    if(s < 10){ 
     s = '0' + s; 
    } 
    duration.innerHTML = m + ':' + s; 
}, false); 

//play the next song on the list when button clicked 
var next = document.getElementById('next'); 
/*next.addEventListener('click', nextSong()); 
musicPlayer.play(); 
alert("song changed");*/ 
//next.addEventListener('click', musicPlayer.nextSong()); 
next.addEventListener('click', function(){ 
    if(currentSong < playlist.length){ 
     playlist.length - 1; 
     musicPlayer.currentSong++; 
     musicPlayer.setAttribute('src', currentSong.url); 
     musicPlayer.play(); 
     alert('song changed'); 
    }else if(currentSong = playlist.length){ 
     currentSong = 0; 
    } 
}, false); 


var previous = document.getElementById('prev'); 
previous.addEventListener('click', musicPlayer.prevSong(), false); 

function nextSongPlay(){ 
    musicPlayer.src = playlist[currentSong]; 
    musicPlayer.load(); 
    musicPlayer.play(); 
    currentSong++; 
    alert('new song'); 
} 

/*function nextSong(){ 
    if(currentSong < playlist.length){ 
     currentSong++; 
     musicPlayer.setAttrubute(playlist[currentSong]); 
     musicPlayer.load(); 
     alert('song changed'); 
    }else{ 
     currentSong=0; 
     alert('default song'); 
    } 
    musicPlayer.play(); 
} 
*/ 
/* 
    function nextSong(){ 
    if(currentSong < playlist.length){ 
     currentSong++; 
     musicPlayer.setAttrubute(playlist[currentSong]); 

    }else{ 
     currentSong=0; 
    } 
    musicPlayer.load(); 
    musicPlayer.play(); 
} 
*/ 

/* function nextSong(){ 
    if(currentSong < playlist.length){ 
     currentSong++; 
     musicPlayer.setAttrubute('src', currentSong,url); 

    }else{ 
     currentSong=0; 
    } 
    musicPlayer.load(); 
    musicPlayer.play(); 
} 
*/ 

/*function prevSong(){ 
    if(currentSong <= playlist.length){ 
     currentSong--; 
     musicPlayer.setAttribute('src', playlist[currentSong]); 
     musicPlayer.load(); 
    }else{ 
     currentSong=0; 
    } 
    musicPlayer.play(); 
}  */ 

}

HTML:

<a href="#"><img src="images/play.png" id="play" alt=""/></a> 
<a href="#"><img src="images/pause.png" id="pause" alt=""/></a> 
<a href="#"><img src="images/prev.png" id="prev" alt=""/></a> 
<span id="duration"></span> 
<a href="#"><img src="images/ff.png" id="next" alt=""/></a> 
<div id="volumeBox"> 
    Volume: <a href="#"><img src="images/mute.png" id="mute" alt=""/></a><input id="volume" type="range" min="0" max="10" value="5" /> 
</div> 
</div> 
</section> 
<section id="list"> 
<ul> 
     <li><a href="#">Song 1</a></li> 
     <li><a href="#">Song 2</a></li> 
     <li><a href="#">Song 3</a></li> 
    </ul> 
</section> 
</body> 

Answer 1

Non sarebbe la vostra prossima funzione essere qualcosa come il a seguire? Il prev dovrebbe essere simile.

function next() { 
    if(currentSong<playList.length) 
     currentSong++; 
    else 
     currentSong=0; 
    musicplayer.play(); 
} 

Per quanto riguarda la scelta di un brano specifico dalla lista dei titoli visualizzati, si potrebbe fare questo determinando l'indice dell'elemento Li che è stato cliccato. Il metodo di indice jQuery (mostrato) lo gestisce bene, ma puoi farlo anche nel vecchio JS. Per far funzionare tutto questo, avrai ovviamente bisogno di un metodo per selezionare numericamente l'indice della playlist.

$('ul li a').live('click', function() { 
    var indexToPlay = $(this).parent('li').index(); 
    musicplayer.selectIndex(indexToPlay); 
    musicplayer.play(); 
}); 

È questo che avevi in ​​mente?

Modifica per rispondere di commentare ...

tuo scatto del tasto potrebbe essere fatto in modo simile a come si compiuto il tasto play.

var next = document.getElementById('next'); 
next.addEventListener('click', musicplayer.next(), false);