- 简介
这几天一直在写博客的前端页面，看着单一且不能自定义播放背景音乐，总觉得少了点什么。百度了一下，找到了一款仿网易云音乐外链播放器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>
- 效果图
7905
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
