这里分享我最近写出来的一个小东西,基于jq的音乐播放器,可以嵌套到网站
效果截图:
JQ实现音乐插件并自动播放 具体首页代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title></title>
<link rel="stylesheet" href="css/player.css">
</head>
<body>
<div id="QPlayer">
<div id="pContent">
<div id="player">
<span class="cover"></span>
<div class="ctrl">
<div class="musicTag marquee">
<strong>Title</strong>
<span> - </span>
<span class="artist">Artist</span>
</div>
<div class="progress">
<div class="timer left">0:00</div>
<div class="contr">
<div class="rewind icon"></div>
<div class="playback icon" id="play-btn"></div>
<div class="fastforward icon"></div>
</div>
<div class="right">
<div class="liebiao icon"></div>
</div>
</div>
</div>
</div>
<div class="ssBtn">
<div class="adf"></div>
</div>
</div>
<ol id="playlist"></ol>
</div>
<script src="js/jquery.min.js"></script>
<script src="js/jquery.marquee.min.js"></script>
<script>
var playlist = [
{title:"万象霜天",artist:"三无MarBlue",mp3:"music/万象霜天.mp3",cover:"music/万象霜天.png",}
];
var isRotate = true;
var autoplay = true;
</script>
<script src="js/player.js"></script>
<script>
function bgChange(){
var lis= $('.lib');
for(var i=0; i<lis.length; i+=2)
lis[i].style.background = 'rgba(246, 246, 246, 0.5)';
}
window.onload = bgChange;
setTimeout(()=>{
$("#play-btn").click()
},2000)
setTimeout(()=>{
$("#play-btn").click()
},4000)
</script>
</body>
</html>
整体下载:点击下载
下载后本地打开即可
如果对您有所帮助,欢迎您点个关注,我会定时更新技术文档,大家一起讨论学习,一起进步。
JQ实现音乐插件并自动播放