簡(jiǎn)介
該項(xiàng)目由一名bilibili的前端 大佬 巨佬 Diygod 開源酵颁,目前最熱門的網(wǎng)站播放器之一,擁有在線歌源、歌詞滾動(dòng)蝌以、隨機(jī)播放等各種常用功能~
項(xiàng)目github地址 && 項(xiàng)目中文文檔
使用方式
前往上面的github地址,clone或者下載到本地何之,進(jìn)入目錄/dist找到 APlayer.min.css 和 APlayer.min.js 兩個(gè)文件跟畅,復(fù)制到你的項(xiàng)目中
然后引用:
<link rel="stylesheet" href="APlayer.min.css">
<div id="aplayer"></div>
<script src="APlayer.min.js"></script>
<script>
const ap = new APlayer({
container: document.getElementById('aplayer'),
fixed: true, //是否附著頁(yè)面底部,否為false
volume: 0.7, //初始音量(0~1)
lrcType: 3, //歌詞模式(1溶推、HTML模式 2徊件、js模式 3、lrc文件模式)
mutex: true, //互斥模式:阻止多個(gè)播放器同時(shí)播放蒜危,當(dāng)前播放器播放時(shí)暫停其他播放器
order: 'random', //音頻循環(huán)順序('list':順序, 'random':隨機(jī))
preload: 'none', //預(yù)加載('none':不預(yù)加載, 'metadata':元數(shù)據(jù), 'auto':自動(dòng))
listFolded: false, //列表默認(rèn)折疊虱痕,開啟為true
theme: '#ee8243', //主題顏色
audio: [{
name: 'name', //歌曲名稱
artist: 'artist', //歌曲作者
url: 'url.mp3', //歌曲源文件地址
cover: 'cover.jpg', //歌曲封面地址
theme: '#eeeeee' //主題顏色(優(yōu)先)
}]
});
</script>
如何獲取網(wǎng)易云歌曲
如何實(shí)現(xiàn)全局音樂播放器
實(shí)現(xiàn)博客全站不間斷播放,需要用到pjax
簡(jiǎn)易教程: