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

JS audio player, click list item to play

本文关键字：播放 列表 音频 播放器 JS      更新时间：2023-09-26

我正在使用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);

当你知道音频是什么时定义音频…就像你点击一首歌一样。

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

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

这就是我与其他代码一起实现的代码，以使其发挥作用。我知道不发布整件事可能没有多大用处，但也许这会对某人有所帮助。

相关文章：