Javascript 请问如何创建JQuery播放列表？_Javascript_Playlist

Javascript 请问如何创建JQuery播放列表？

javascript

Javascript 请问如何创建JQuery播放列表？,javascript,playlist,Javascript,Playlist,我正在制作一个音乐流媒体网站，使用我得到的一个主题。一切都很好，除了网站设计为只使用用户播放的歌曲创建播放列表，这是通过用户每次单击播放按钮时触发javascript事件来完成的。我想要的是，一旦用户到达页面，歌曲列表就会自动加载到播放列表中。你可以在这个链接上看到一个示例。我想要的是，在单击播放按钮之前，将该页面上的歌曲加载到播放列表中，以便用户可以不间断地收听图表页面上的所有歌曲。拜托，这对我来说意味着整个世界。。。谢谢，伙计们下面是列出歌曲的PHP脚本 window.Plyrist={

我正在制作一个音乐流媒体网站，使用我得到的一个主题。一切都很好，除了网站设计为只使用用户播放的歌曲创建播放列表，这是通过用户每次单击播放按钮时触发javascript事件来完成的。我想要的是，一旦用户到达页面，歌曲列表就会自动加载到播放列表中。你可以在这个链接上看到一个示例。我想要的是，在单击播放按钮之前，将该页面上的歌曲加载到播放列表中，以便用户可以不间断地收听图表页面上的所有歌曲。拜托，这对我来说意味着整个世界。。。谢谢，伙计们

下面是列出歌曲的PHP脚本

window.Plyrist={}；
Plyrists=[]；
（函数（$，未定义）{
“严格使用”；
Plyrist=功能（el、项目、选项）{
var self=这个；
此参数为0；
这个。重复=错误；
this.shuffle=false；
this.items=items | |[]；
this.oitems=$.merge（[]，项）；
this.el=$.extend（{}，this.\u el，el）；
this.options=$.extend（true，{}，this.\u options，options）；
$.each（this.el，函数（键，值）{
如果（键！='playlist'&&key！='controls'）{
self.el[key]=self.el.playlist+''+self.el[key]；
}
});
这是。_createControls（）；
这是。_createItems（）；
this.player=新Plyr（this.el.player，this.options）；
Plyrists.push（这个玩家）；
this.player.on（'ready'，event=>{
self._initEvents（）；
self._initState（）；
});
this.player.on（'play'，event=>{
Plyrists.forEach（函数（播放器）{
如果（玩家！==self.player）{
player.pause（）；
}
});
});
this.player.on（'loadedmetadata'，事件=>{
var duration=$（this.el.playlist+'.plyr_uuutime--duration'）；
this.player.duration==“无穷”？duration.hide（）：duration.show（）；
});
this.player.on（'end'，function（））{
如果（自我重复）{
self.\u玩（self.active）；
}否则{
如果（self.items.length>1）{
self.next（）；
}否则{
self.player.restart（）；
}
}
});
这个；
}
Plyrist.prototype={
_el:{
播放列表：“#播放列表”，
播放器：“音频”，
项目：“.plyr列表”，
项目：'.plyr项目'，
itemHtml:“×；”，
项目名称：'.plyr项目名称'，
项目作者：'.plyr项目作者'，
项目海报：“.plyr项目海报”，
itemClose:“.plyr项目关闭”，
海报：‘.plyr_uu海报’，
标题：'.plyr_uutitle'，
作者：'.plyr_uuauthor'，
上一页：“[data plyr=“prev”]”，
下一步：“[data plyr=“next”]”，
like:“[data plyr=“like”]”，
洗牌：“[data plyr=“shuffle”]”，
重复：“[data plyr=“repeat”]”，
列表：“[data plyr=“list”]”，
控制：{
prev:“prev”，
播放：“暂停播放”，
下一个：'下一个'，
海报：''，
标题：“”，
作者：''，
进度：“%buffered00:00”，
当前时间：“00:00”，
持续时间：“00:00”，
静音：“取消静音”，
卷：“”，
比如：“讨厌”，
洗牌：“洗牌”，
重复：“重复”，
列表：“播放列表”
}
},
_选项：{
主题：0，
iconUrl:“../libs/plyrist/src/plyrist.svg”，
自动播放：对，
HideControl:错误，
全屏：{
已启用：false
}
},
_init:function（）{
var self=这个；
if（self.options.autoplay）{
self.\u玩（self.active）；
}否则{
self.select（self.active）；
}
},
_initState:function（）{
//修复使用音频播放器播放视频时的css
$（'.plyr--video'，this.el.playlist+'.plyrist_audio'）.addClass（'plyr--audio'）；
this.shuffle？$（this.el.shuffle）.addClass（'is--shuffle'）：$（this.el.shuffle）.removeClass（'is--shuffle'）；
this.repeat？$（this.el.repeat）.addClass（'is--repeat'）：$（this.el.repeat）.removeClass（'is--repeat'）；
},
_initEvents:function（）{
var self=这个；
$（this.el.prev）.off（）.on（'click'，function（））{
self.prev（）；
});
$（this.el.next）.off（）.on（'click'，function（））{
self.next（）；
});
$（this.el.like）.off（）.on（'click'，function（））{
$（this.attr（'aria-pressed'，$（this.attr（'aria-pressed'）=='true'？'false'：'true'）；
});
$（this.el.shuffle）.off（）.on（'click'，function（））{
self.shuffle=！self.shuffle；
self._initState（）；
});
$（this.el.repeat）.off（）.on（'click'，function（））{
self.repeat=！self.repeat；
self._initState（）；
});
$（this.el.list）.off（）.on（'click'，function（））{
$（self.el.playlist）.toggleClass（'open'）；
});
},
_createControls:function（）{
如果（this.options.controls）返回；
开关（this.options.theme）{
案例0：
this.options.controls=this.\u buildControls([
此.el.controls.prev，
这个。el。控制。播放，
这个。el。控制。下一个，
这张海报，
'',
'',
'',
此.el.controls.title，
这个.el.controls.author，
'',
此.el.controls.currentTime，
这个。el。控制。持续时间，
'',
这个控制着进度，
'',
此.el.controls.mute，
这个。el。控制。音量，
这个，控制，像，
这个。el。控制。重复，
这个。el。控制。洗牌，
此.el.controls.list
]);
打破
案例1：
this.options.controls=this.\u buildControls([
这张海报，
'',
此.el.controls.title，
这个.el.controls.author，
'',
这个。el。控制。播放，
此.el.controls.prev，
这个。el。控制。下一个，
'',
这个
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <audio id="player" controls onended="playNextSong()">
        <source src="song-1.wav" type="audio/wav">
    </audio>
    <script>
        var count = 0;
        function playNextSong() {
            var songs = ["song-2.mp3","song-3.mp3"];
            document.getElementById("player").setAttribute('src', songs[count]);
            count++;
            document.getElementById("player").play();
        }
    </script>
</body>
</html>