记录一次折腾Aplayer播放器

博主： liuli
发布时间：2021 年 07 月 24 日
1810 次浏览
4 条评论
5862字数
分类：技术

前言

最经在使用新主题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 日

如果觉得我的文章对你有用，请随意赞赏

4 条评论

yyz
2022 年 10 月 15 日

在自己琢磨建博客帮到我了谢谢你

回复
kkkkk
2022 年 08 月 02 日

你好，我想问一下在页面中加入
是指那个页面？

回复
1. liuli
  2022 年 08 月 02 日
  
  @kkkkk
  
  你想在哪个页面上显示就在哪里加，具体的去看看aplayer和meting的文档吧。这两玩意我好久没用过了记得不是很清楚。
  
  回复
Anonymous
2021 年 08 月 03 日

感谢分享赞一个

回复

发表评论取消回复
使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

评论 *

私密评论

名称 *

🎲

邮箱 *

地址

itdog
能出一个3xui的中转解锁教程吗现在按这个来已经解锁不了奈非了
卢
还有一个问题，我填了"geosite:netflix","ge...
卢
怎么配置VPS1的SOCKS啊，不想用VMESS
肥康
太好了，解决了我一直以来想用https部署为知笔记的问题
德德
已解决。找到佬的原文了

西冲
浏览次数: 783
markdown常用语法
浏览次数: 673
Botui制作自我介绍机器人
浏览次数: 1683
html基础
浏览次数: 923
莫瑞吉奥·卡特兰：愿你在此
浏览次数: 708

记录一次折腾Aplayer播放器

liuli • 2021 年 07 月 24 日

<h2>前言</h2><p>最经在使用新主题Mirages，在使用的过程中发现该主题并没有全局音乐播放器。于是便在网上寻找插件。但是不少的插件使用起来都显得不尽人意。再寻找的过程中我想到了一款播放器——Aplayer。我第一次接触这个播放器是在wordpress上，精美小巧的外观以及附带歌词功能让我对这个播放器印象深刻。</p><h2>直接使用Aplayer（不建议）</h2><h3>一、引入播放器</h3><p>进入Github找到该项目的地址，git clone将项目下载下来。</p><p><button class=" btn m-b-xs btn-info btn-rounded " onclick="window.open('https://github.com/DIYgod/APlayer','_blank')">Aplayer</button></p><p>解压文件然后将 <code>dist</code>目录下的所有文件丢到你站点根目录下。</p><p>然后在页面head标签的尾部 (head 标签结束前)加入：</p><pre><code class="lang-html">&lt;link rel=&quot;stylesheet&quot; href=&quot;APlayer.min.css&quot;&gt;</code></pre><p>并在页面 body 标签结束前加入</p><pre><code class="lang-html">&lt;div id=&quot;aplayer&quot;&gt;&lt;/div&gt;
&lt;script src=&quot;APlayer.min.js&quot;&gt;&lt;/script&gt;
&lt;script&gt;
    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'        //主题颜色（优先）
        }]
    });
&lt;/script&gt;</code></pre><p>这时候访问页面aplayer播放器就显示在网站的下方了。</p><h3>二、资源问题</h3><h4>1.歌曲</h4><p>由于aplayer不支持原生解析网易云歌单，我最开始想到的办法是将网易云的音乐下载下来然后使用音乐解锁来将其转换成MP3并将文件存储到对象存储用cdn来加速。</p><p>由于上面的方法要消耗自己cdn的流量，于是pass掉了。在翻看别的项目时发现了一个接口可以通过歌曲id直接获取音乐播放地址。接口如下：</p><p><code>https://music.163.com/song/media/outer/url?id=这里改成歌曲id</code></p><p>那么音源的问题就解决了。</p><h4>2.专辑图片</h4><p>最开始的想法是在网易云的官网将歌曲图片下载下来，然后和歌词一样上传到对象存储。但是经过操作发现网易云没有为图片设置防盗链。那么我们这里直接使用外链即可。具体方法为进入网易云的歌单然后使用F12审查元素然后复制图片外链URL。</p><h4>3.歌词</h4><p>歌词这个玩意就比较麻烦了，使用桌面端的网易云我们不难发现歌词文件被放在：</p><p><code>C:\Users\用户名\AppData\Local\Netease\CloudMusic\webdata\lyric</code></p><p>这个目录下，且文件名与歌曲的id是相同的。我们只需要将文件后缀改成 <code>lrc</code>然后上传到服务器即可。</p><p>由于歌词文件只有几k即使不使用CDN，我想访问速度也不会太慢。</p><h3>三、使用</h3><p>在拿到这些音源、图片、歌词之后我们将这些文件的外链按照注释填写到刚刚代码的audio栏里面就好了。如果要配置多首歌曲要使用英文逗号将配置隔开。最后一首歌的括号后面不能加逗号。</p><p>可以参考一下下面的配置(不要直接复制，对象存储中的文件已被我删除)：</p><pre><code class="lang-html">&lt;div id=&quot;aplayer&quot;&gt;&lt;/div&gt;
&lt;script src=&quot;APlayer.min.js&quot;&gt;&lt;/script&gt;
&lt;script&gt;
    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'        //主题颜色（优先）
        }]
    });
&lt;/script&gt;</code></pre><p>这样配置后就能正常播放音乐了。</p><p>不过不得不说这是一个很蠢的办法，如果我们使用meting就不需要配置那么多东西直接使用网易云歌单的id即可解析多首歌曲以及封面和歌词。</p><h2>使用Aplayer＋meting解析网易云歌单（推荐）</h2><p>在看完meting文档后我发现，配置方法也不难。而且用这种方法就不需要去烦音源歌词和封面的问题了。</p><h3>一、引入播放器</h3><p>与直接使用Aplayer一样我们需要将播放器引入项目，这里我们就不将文件放在服务器上了，直接link存储在jsderlivr cdn上的文件就好。</p><p>在页面head标签的尾部（head 标签结束前）引入Aplayer的css和js：</p><pre><code class="lang-html">&lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdn.jsdelivr.net/npm/aplayer@1.7.0/dist/APlayer.min.css&quot;&gt;
&lt;script src=&quot;https://cdn.jsdelivr.net/npm/aplayer@1.7.0/dist/APlayer.min.js&quot;&gt;&lt;/script&gt;</code></pre><p>当然啦，像之前那样直接把Aplayer的css和js文件丢服务器上也行，自己取舍吧。</p><h3>二、引入meting</h3><p>然后在页面的footer中加入meting的js文件：</p><pre><code class="lang-html">&lt;script src=&quot;https://cdn.jsdelivr.net/npm/meting@1.1.0/dist/Meting.min.js&quot;&gt;&lt;/script&gt;</code></pre><p>这样一来播放器就引入博客了。</p><h3>三、使用</h3><p>使用方法非常简单</p><p>在页面中加入：</p><pre><code class="lang-html">&lt;meting-js
        fixed=&quot;true&quot;
    server=&quot;netease&quot;
    type=&quot;playlist&quot;
    id=&quot;60198&quot;&gt;
&lt;/meting-js&gt;</code></pre><h2>成果</h2><p><img src="https://cdn.back2me.cn/2021/07/25/6adf29c1dae58.png" alt="" title="" style=""></p>

记录一次折腾Aplayer播放器

前言

直接使用Aplayer（不建议）

一、引入播放器

二、资源问题

1.歌曲

2.专辑图片

3.歌词

三、使用

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

一、引入播放器

二、引入meting

三、使用

成果

4 条评论

发表评论取消回复
使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

有一台云服务器都能干些什么？

申请E5开发者订阅搭建网盘

Clash for windows切换内核

安卓手机体验优化——Magisk获取root权限

搭建RSSHub和跨域服务

西冲

markdown常用语法

Botui制作自我介绍机器人

html基础

莫瑞吉奥·卡特兰：愿你在此

记录一次折腾Aplayer播放器

前言

直接使用Aplayer（不建议）

一、引入播放器

二、资源问题

1.歌曲

2.专辑图片

3.歌词

三、使用

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

一、引入播放器

二、引入meting

三、使用

成果

4 条评论

发表评论 取消回复 使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

记录一次折腾Aplayer播放器

发表评论取消回复
使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款