JQ實現音樂外掛並自動播放
阿新 • • 發佈：2021-10-09
這裡分享我最近寫出來的一個小東西，基於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>