javascript - JS音频播放器，单击列表项播放

Question

我正在使用html / css和javascript开发网络音频播放器。

播放器使用列表来存储当前的歌曲，并在播放器底部将列表显示为播放列表。

我要这样做，以便当我单击列表项时，该列表项的音频开始播放。

这是我目前拥有的代码:

//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();
});