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

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

});

这是我用其他代码实现的代码，以使其工作。我知道不发布整个事情可能没什么用，但也许它会对某人有所帮助。

JS音频播放器，点击列表项播放

2 个答案: