JSオーディオプレーヤー、再生するリスト項目をクリックしてください

Question

私はhtml/cssとjavascriptを使用してWebオーディオプレーヤーで作業しています。

プレイヤーはリストを使用して現在の曲を保存し、プレーヤーの一番下にリストをプレイリストとして表示します。

リストアイテムをクリックすると、そのリストアイテムのオーディオが再生されるようにしたいと思います。

これは私が現在持っているコードです：

//Click Song Title 

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

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

それは私がそれをクリックし、リスト項目に関係なく、単に最初のリスト項目の歌を果たしていることを除いて、動作します。また、プレーヤーが新しくロードされたり、曲が一時停止している場合にのみ機能します。

コード内で何が起こっているかを知る必要がある場合は、私に知らせてください。ここで

あなたが曲をクリックしたときのように...あなたはオーディオがあることを行っているものを知っているときに、オーディオ要素の私の元の定義

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

Answer 1

がオーディオを定義しています。私はそれが仕事を得るために残りの実装コードです

//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"); 

}); 

。私は、すべてのものを投稿することはあまり役に立たないかもしれないが、多分それが誰かを助けることを知っている。