- 简介
这几天一直在写博客的前端页面,看着单一且不能自定义播放背景音乐,总觉得少了点什么。百度了一下,找到了一款仿网易云音乐外链播放器UI的HTML5音乐播放器插件 APlayer,该项目由一名bili bili 的前端大牛DIYgod开源,Aplayer拥有在线歌源、歌词滚动等常用功能。
- 项目地址
GIthub地址 Aplayer中文文档
- 使用方法
前往上面的github地址,下载到本地,进入目录/dist找到 APlayer.min.css 和 APlayer.min.js 两个文件,复制到你的项目中。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Aplayer is a beautiful HTML5 music player</title>
<link rel="stylesheet" href="APlayer.min.css">
</head>
<body>
<div id="aplayer"></div>
<script src="APlayer.min.js"></script>
<script>
const ap = new APlayer({
container: document.getElementById('aplayer'),
fixed: true, //是否附着页面底部,否为false
autoplay: true, //是否自动播放,否为false,移动端不能生效
volume: 0.6, //初始音量(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', //歌曲封面地址
lrc: 'lrc.lrc', //歌曲的歌词文件
theme: '#eeeeee' //主题颜色(优先)
}]
});
</script>
</body>
</html>
- 效果图