简介
该项目由一名bilibili的前端 大佬 巨佬 Diygod 开源,目前最热门的网站播放器之一,拥有在线歌源、歌词滚动、随机播放等各种常用功能~
项目github地址 && 项目中文文档
使用方式
前往上面的github地址,clone或者下载到本地,进入目录/dist找到 APlayer.min.css 和 APlayer.min.js 两个文件,复制到你的项目中
然后引用:
<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, //是否附着页面底部,否为false
volume: 0.7, //初始音量(0~1)
lrcType: 3, //歌词模式(1、HTML模式 2、js模式 3、lrc文件模式)
mutex: true, //互斥模式:阻止多个播放器同时播放,当前播放器播放时暂停其他播放器
order: 'random', //音频循环顺序('list':顺序, 'random':随机)
preload: 'none', //预加载('none':不预加载, 'metadata':元数据, 'auto':自动)
listFolded: false, //列表默认折叠,开启为true
theme: '#ee8243', //主题颜色
audio: [{
name: 'name', //歌曲名称
artist: 'artist', //歌曲作者
url: 'url.mp3', //歌曲源文件地址
cover: 'cover.jpg', //歌曲封面地址
theme: '#eeeeee' //主题颜色(优先)
}]
});
</script>
如何获取网易云歌曲
如何实现全局音乐播放器
实现博客全站不间断播放,需要用到pjax
简易教程: