页面使用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自动请求歌曲信息

更多参数配置和使用方式可翻阅官方文档：中文文档