页面使用APlayer播放器
没错,我又换播放器了,继续安利,APlayer
播放器;哇,这么漂亮的HTML5音乐播放器(官方介绍),这个播放器相对于之前用的zplayer
封装更多,有更多的参数及API,也就是有更多的功能和更漂亮的界面了。
GitHub: https://github.com/MoePlayer/APlayer
中文文档:https://aplayer.js.org/#/zh-Hans/
使用示例:
到cdnjs
选择合适版本的js、css,地址:https://cdnjs.com/libraries/aplayer:
也可以在GitHub
下载源码后,把dist
文件夹拷进项目,根据路径引入本地js、css;
在需要使用APlayer
的页面引入js、css:
<link href="https://cdnjs.cloudflare.com/ajax/libs/aplayer/1.10.1/APlayer.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/aplayer/1.10.1/APlayer.min.js"></script>
准备容器、初始化:
//Aplayer容器
<div id="player"></div>
//初始化
<script>
const ap = new APlayer({
container: document.getElementById('player'), //播放器容器
fixed: true, //开启吸底模式
// mini: false, //开启迷你模式,和吸底冲突
theme: '#b7daff', //主题色
volume: 0.6, //默认音量
lrcType: 1, //歌词类型
loop: 'all', //音频循环播放, 可选值: 'all', 'one', 'none'
order: 'random', //音频循环顺序, 可选值: 'list', 'random'
preload: 'auto', //预加载,可选值: 'none', 'metadata', 'auto'
audio: [{ //音频信息, 应该是一个对象或对象数组
artist: '水星记', //歌名
name: '郭顶', //歌手
url: 'https://music.163.com/song/media/outer/url?id=441491828.mp3', //音乐链接
cover: 'https://p1.music.126.net/wSMfGvFzOAYRU_yVIfquAA==/2946691248081599.jpg?param=300x300', //封面
//歌词
lrc: '[00:00.000] 作曲 : 郭顶\n[00:00.338] 作词 : 郭顶\n[00:01.14]编曲:郭顶\n[00:01.31]监制:郭顶\n[00:01.76]\n[00:19.33]着迷于你眼睛 银河有迹可循\n[00:26.37]穿过时间的缝隙 它依然真实地\n[00:33.10]\n[00:33.84]吸引我轨迹\n[00:36.08]\n[00:40.78]这瞬眼的光景 最亲密的距离\n[00:46.74]\n[00:47.85]沿着你皮肤纹理 走过曲折手臂\n[00:54.48]\n[00:55.34]做个梦给你 做个梦给你\n[01:01.91]\n[01:03.73]等到看你银色满际\n[01:06.51]\n[01:07.45]等到分不清季节更替\n[01:11.43]\n[01:13.27]才敢说沉溺\n[01:15.71]\n[01:20.52]还要多远才能进入你的心\n[01:26.43]\n[01:27.49]还要多久才能和你接近\n[01:33.31]\n[01:34.71]咫尺远近却无法靠近的那个人\n[01:42.35]也等着和你相遇\n[01:47.48]\n[01:49.02]环游的行星 怎么可以\n[01:55.31]\n[01:56.31]拥有你\n[01:58.15]\n[02:14.20]这瞬眼的光景 最亲密的距离\n[02:20.32]\n[02:21.06]沿着你皮肤纹理 走过曲折手臂\n[02:28.25]做个梦给你 做个梦给你\n[02:34.84]\n[02:36.85]等到看你银色满际\n[02:39.73]\n[02:40.50]等到分不清季节更替\n[02:44.16]\n[02:46.24]才敢说沉溺\n[02:53.21]\n[02:53.90]还要多远才能进入你的心\n[02:59.34]\n[03:00.60]还要多久才能和你接近\n[03:06.68]\n[03:07.78]咫尺远近却无法靠近的那个人\n[03:15.47]也等着和你相遇\n[03:20.64]\n[03:22.22]环游的行星 怎么可以\n[03:28.44]\n[03:29.55]拥有你\n[03:31.93]\n[04:05.31]还要多远才能进入你的心\n[04:11.42]\n[04:12.23]还要多久才能和你接近\n[04:18.08]\n[04:19.34]咫尺远近却无法靠近的那个人\n[04:27.03]要怎么探寻 要多么幸运\n[04:34.04]才敢让你发觉你并不孤寂\n[04:40.14]\n[04:40.92]当我还可以再跟你飞行\n[04:46.64]\n[04:48.01]环游是无趣 至少可以\n[04:54.08]\n[04:55.68]陪着你\n'
}]
});
效果图:
这里需要用到的歌词外链和歌词等数据可以参考我之前写的 获取网易云音乐外链 来进行获取,也可以搭配Metingjs
音乐插件直接自动获取,具体方式可看文章 Metingjs实现Aplayer自动请求歌曲信息
更多参数配置和使用方式可翻阅官方文档:中文文档
正文到此结束