前言

最经在使用新主题Mirages，在使用的过程中发现该主题并没有全局音乐播放器。于是便在网上寻找插件。但是不少的插件使用起来都显得不尽人意。再寻找的过程中我想到了一款播放器——Aplayer。我第一次接触这个播放器是在wordpress上，精美小巧的外观以及附带歌词功能让我对这个播放器印象深刻。

直接使用Aplayer（不建议）

一、引入播放器

进入Github找到该项目的地址，git clone将项目下载下来。

解压文件然后将 dist目录下的所有文件丢到你站点根目录下。

然后在页面head标签的尾部 (head 标签结束前)加入：

<link rel="stylesheet" href="APlayer.min.css">

并在页面 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>

这时候访问页面aplayer播放器就显示在网站的下方了。

二、资源问题

1.歌曲

由于aplayer不支持原生解析网易云歌单，我最开始想到的办法是将网易云的音乐下载下来然后使用音乐解锁来将其转换成MP3并将文件存储到对象存储用cdn来加速。

由于上面的方法要消耗自己cdn的流量，于是pass掉了。在翻看别的项目时发现了一个接口可以通过歌曲id直接获取音乐播放地址。接口如下：

https://music.163.com/song/media/outer/url?id=这里改成歌曲id

那么音源的问题就解决了。

2.专辑图片

最开始的想法是在网易云的官网将歌曲图片下载下来，然后和歌词一样上传到对象存储。但是经过操作发现网易云没有为图片设置防盗链。那么我们这里直接使用外链即可。具体方法为进入网易云的歌单然后使用F12审查元素然后复制图片外链URL。

3.歌词

歌词这个玩意就比较麻烦了，使用桌面端的网易云我们不难发现歌词文件被放在：

C:\Users\用户名\AppData\Local\Netease\CloudMusic\webdata\lyric

这个目录下，且文件名与歌曲的id是相同的。我们只需要将文件后缀改成 lrc然后上传到服务器即可。

由于歌词文件只有几k即使不使用CDN，我想访问速度也不会太慢。

三、使用

在拿到这些音源、图片、歌词之后我们将这些文件的外链按照注释填写到刚刚代码的audio栏里面就好了。如果要配置多首歌曲要使用英文逗号将配置隔开。最后一首歌的括号后面不能加逗号。

可以参考一下下面的配置(不要直接复制，对象存储中的文件已被我删除)：

<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: '群青',           //歌曲名称
            artist: 'yoasobi',       //歌曲作者
            url: 'https://music.163.com/song/media/outer/url?id=1472480890.mp3',         //歌曲源文件地址
            cover: 'https://p1.music.126.net/sF9I_mKMVNtsCD-ZXzfV_A==/109951165251958014.jpg?param=130y130',     //歌曲封面地址
            lrc:  'https://cdn.back2me.cn/lrc/%E7%BE%A4%E9%9D%92.lrc',        //歌曲的歌词文件
            theme: '#eeeeee'        //主题颜色（优先）
        },
{
            name: '怪物',           //歌曲名称
            artist: 'yoasobi',       //歌曲作者
            url: 'https://music.163.com/song/media/outer/url?id=1803908863',         //歌曲源文件地址
            cover: 'https://p1.music.126.net/M9FA7rm098sFErf-B7QWOw==/109951165536665031.jpg?param=130y130',     //歌曲封面地址
            lrc:  'https://cdn.back2me.cn/lrc/%E6%80%AA%E7%89%A9.lrc',        //歌曲的歌词文件
            theme: '#eeeeee'        //主题颜色（优先）
        },
{
            name: 'アンコール',           //歌曲名称
            artist: 'yoasobi',       //歌曲作者
            url: 'https://music.163.com/song/media/outer/url?id=1500151579',         //歌曲源文件地址
            cover: 'https://p1.music.126.net/r3HQ2Na5Z-CvnDGHmcl9-A==/109951165515346936.jpg?param=130y130',     //歌曲封面地址
            lrc:  'https://cdn.back2me.cn/lrc/%E3%82%A2%E3%83%B3%E3%82%B3%E3%83%BC%E3%83%AB.lrc',        //歌曲的歌词文件
            theme: '#eeeeee'        //主题颜色（优先）
        },
{
            name: 'あの夢をなぞって',           //歌曲名称
            artist: 'yoasobi',       //歌曲作者
            url: 'https://music.163.com/song/media/outer/url?id=1417236632',         //歌曲源文件地址
            cover: 'https://p2.music.126.net/lX06lnoMCH8x18XqC4j5yg==/109951164632728541.jpg?param=130y130',     //歌曲封面地址
            lrc:  'https://cdn.back2me.cn/lrc/%E3%81%82%E3%81%AE%E5%A4%A2%E3%82%92%E3%81%AA%E3%81%9E%E3%81%A3%E3%81%A6.lrc',        //歌曲的歌词文件
            theme: '#eeeeee'        //主题颜色（优先）
        },
{
            name: '夜に駆ける',           //歌曲名称
            artist: 'yoasobi',       //歌曲作者
            url: 'https://music.163.com/song/media/outer/url?id=1409311773',         //歌曲源文件地址
            cover: 'https://p2.music.126.net/3xWlqwYmfwRFebeiONUpGg==/109951164546210608.jpg?param=130y130',     //歌曲封面地址
            lrc:  'https://cdn.back2me.cn/lrc/1409311773.lrc',        //歌曲的歌词文件
            theme: '#eeeeee'        //主题颜色（优先）
        }]
    });
</script>

这样配置后就能正常播放音乐了。

不过不得不说这是一个很蠢的办法，如果我们使用meting就不需要配置那么多东西直接使用网易云歌单的id即可解析多首歌曲以及封面和歌词。

使用Aplayer＋meting解析网易云歌单（推荐）

在看完meting文档后我发现，配置方法也不难。而且用这种方法就不需要去烦音源歌词和封面的问题了。

一、引入播放器

与直接使用Aplayer一样我们需要将播放器引入项目，这里我们就不将文件放在服务器上了，直接link存储在jsderlivr cdn上的文件就好。

在页面head标签的尾部（head 标签结束前）引入Aplayer的css和js：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer@1.7.0/dist/APlayer.min.css">
<script src="https://cdn.jsdelivr.net/npm/aplayer@1.7.0/dist/APlayer.min.js"></script>

当然啦，像之前那样直接把Aplayer的css和js文件丢服务器上也行，自己取舍吧。

二、引入meting

然后在页面的footer中加入meting的js文件：

<script src="https://cdn.jsdelivr.net/npm/meting@1.1.0/dist/Meting.min.js"></script>

这样一来播放器就引入博客了。

三、使用

使用方法非常简单

在页面中加入：

<meting-js
        fixed="true"
    server="netease"
    type="playlist"
    id="60198">
</meting-js>

成果

最后修改：2022 年 01 月 19 日
© 允许规范转载
如果觉得我的文章对你有用，请随意赞赏