JS lecteur audio, cliquez sur l'élément de la liste pour jouer

Question

Je travaille sur un lecteur audio web en utilisant html/css et javascript.

Le lecteur utilise une liste pour stocker les chansons actuellement, et affiche la liste au bas du lecteur comme liste de lecture.

Je veux faire en sorte que lorsque je clique sur un élément de la liste, l'audio pour cet élément de la liste commence à jouer.

C'est le code que j'ai actuellement:

//Click Song Title 

$('#playlist li').click(function(){ 
audio.play(); 

$('#play').hide(); 
$('#pause').show(); 
$('#duration').fadeIn(400); 
showDuration(); 
}); 

Il fonctionne, sauf que peu importe quel élément liste que je clique dessus joue juste la chanson du premier élément de la liste. Cela ne fonctionne que si le lecteur est fraîchement chargé ou si la chanson est en pause.

Si vous voulez savoir ce qu'il se passe d'autre dans le code, faites-le moi savoir.

Voici ma définition originale de l'élément audio

//Create AUDIO OBJECT 
audio = new Audio('http://localhost/beats/wp-content/themes/AG_1/html_5_audio_player/media/' + song); 

Answer 1

Définir audio quand vous savez ce que l'audio va être ... comme lorsque vous cliquez sur une chanson.

//Click Song Title 

$('#playlist li').click(function(){ 

//Create AUDIO OBJECT 
audio = new Audio('http://localhost/beats/wp-content/themes/AG_1/html_5_audio_player/media/' + 
    this.val()); // Not sure what the actual value is here, but you need to update what the file that is playing is. 

audio.play(); 

$('#play').hide(); 
$('#pause').show(); 
$('#duration').fadeIn(400); 
showDuration(); 
}); 

Answer 2

//Click Song Title 



$('#playlist li').click(function(){ 

audio.pause(); 
if(typeof audio !== "undefined") audio.src='http://localhost/beats/wp-content/themes/AG_1/html_5_audio_player/media/' + 
    $(this).attr('song'); 

audio.play(); 

$('#play').hide(); 
$('#pause').show(); 
$('#duration').fadeIn(400); 
showDuration(); 
$('#playlist li').removeClass('active'); 
$(this).addClass("active"); 

}); 

C'est le code que je mis en œuvre avec le reste pour le faire fonctionner. Je sais que ne pas poster tout ça pourrait ne pas être très utile, mais peut-être que cela aidera quelqu'un.