乐趣区

关于前端:如何在博客中添加Aplayer音乐播放器

jiezi

前言

是否有一首音乐，前奏一响起，让你灵魂不自主的颤栗。音乐就像老胶卷，每个旋律，每句歌词，都承载着每个人的往事回顾和情愫感触。

我珍藏了好多的音乐，奈何好多音乐受版权限度，须要购买 VIP 能力听，还有一些音乐始终是下架状态，办会员也听不了，所以只能本人搞个音乐播放器了。

在博客上的音乐播放器大多是那种 Mini 音乐播放器，尽管很便捷，但我始终感觉不够正式，音乐列表看起来也不够直观，所以我心愿做到独自一个页面上。

本文解说如何在博客中增加音乐播放器，播放本人的音乐，欢送大家来我的音乐主页 echeverra，随时随地，想听就听。

Mini 播放器成果：

单页面音乐成果：

教程

1. 音乐插件

比照了几款音乐插件，我最终选定了 Aplayer.js，因其界面好看，功能强大。音乐播放器的音乐信息，歌词，进度条，音量，程序模式，循环模式都反对。能够应用三方音乐外链，也能够应用本人的音乐链接。

  • 官网：https://aplayer.js.org/
  • Github：https://github.com/MoePlayer/APlayer/

当然，因为一些限度，关上以上链接为概率性事件 …

如果 RP 有余，您能够增加我的微信公众号 echeverra，回复 ”Aplayer” 获取插件。

2. 音乐资源

音乐资源能够从各大音乐平台下载，如果受会员或者下架限度，能够通过以下我罕用的几个形式查找音乐。

  • 小白盘：https://www.xiaobaipan.com/
  • 魔方城堡：http://www.mfcb.net/wsyy/
  • 23APE：http://www.23ape.net/
  • HIFINI：https://www.hifini.com/

因为我会将下载的音乐上传到本人的服务器（WordPress 后盾媒体），音乐文件太大时我的服务器属实吃不消（渣渣服务器），只好转换成较小的 MP3 格局，举荐应用 WORTHSEE：https://audio.worthsee.com/。

3. 实现代码

将 Aplayer 插件 APlayer.min.js 和APlayer.min.css上传到服务器，如果博客应用 WordPress 可上传到服务器 wp-content 目录下，通过链接 https://IP/wp-content/Aplayer…，就能够拜访到。

当然你也能够间接应用 jsdeliver CDN 形式，更快更不便，但不稳固，偶然抽风 …

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

Aplayer 主要参数阐明：

参数 默认值 形容
container document.querySelector(‘.aplayer’) 播放器容器元素
fixed false 开启吸底模式
mini false 开启迷你模式
autoplay false 音频自动播放，个别浏览器默认会阻止音频自动播放
theme ‘#b7daff’ 主题色
loop ‘all’ 音频循环播放，值：’all’、’one’、’none’
order ‘list’ 音频循环程序，值：’list’，’random’
preload ‘auto’ 音频预加载，值: ‘none’, ‘metadata’, ‘auto’
volume 0.7 默认音量，播放器会记住用户设置，用户本人设置音量后默认音量将生效
showlrc true 歌词是否显示
audio – 音频，一个音频为对象格局，多个音频为数组格局
audio.name – 音频名称
audio.artist – 音频艺术家
audio.url – 音频链接
audio.cover – 音频封面
audio.lrc – 音频歌词
mutex true 避免同时播放多个播放器，当该播放器开始播放时暂停其余播放器
listFolded false 列表是否先折叠
listMaxHeight – 音频列表最大高度

3.1Mini 播放器

Mini 播放器会默认收起音乐列表，固定在界面左下角。

如果博客应用的是WordPress，在应用的主题设置中找到脚本一项，将代码写在脚本中即可执行。

你也能够将代码间接粘贴到 IDE（记得设置编码格局<meta charset="utf-8">），在浏览器中关上也会可执行，代码实现如下：

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

<div id='aplayer'></div>

<script>
    var ap = new APlayer
    ({element: document.getElementById('aplayer'),
        showlrc: false,
        fixed: true,
        mini: true,
        audio: {
            title: '半岛铁盒',
            author: '周杰伦',
            url: 'https://echeverra.cn/wp-content/uploads/2022/05/ 周杰伦 - 半岛铁盒.mp3',
            pic: 'https://echeverra.cn/wp-content/uploads/2022/05/ 周杰伦 - 半岛铁盒 -mp3-image.png'
        }
    });
    ap.init();
</script>

多首音乐时，audio值为数组模式，代码如下：

<script>
    var ap = new APlayer
    ({element: document.getElementById('aplayer'),
        showlrc: false,
        fixed: true,
        mini: true,
        audio: [
            {
                title: '半岛铁盒',
                author: '周杰伦',
                url: 'https://echeverra.cn/wp-content/uploads/2022/05/ 周杰伦 - 半岛铁盒.mp3',
                pic: 'https://echeverra.cn/wp-content/uploads/2022/05/ 周杰伦 - 半岛铁盒 -mp3-image.png'
            },
            {
                title: '给我一首歌的工夫',
                author: '周杰伦',
                url: 'https://echeverra.cn/wp-content/uploads/2021/06/ 周杰伦 - 给我一首歌的工夫.mp3',
                pic: 'https://echeverra.cn/wp-content/uploads/2021/06/ 周杰伦 - 给我一首歌的工夫 -mp3-image.png'
            }
        ]
    });
    ap.init();
</script>

3.2 单页面音乐

单页面音乐能够用更大的界面展现音乐列表等信息，实现也很简略，间接将代码块写在文章内容中，fixed和 mini 改为默认值false，代码如下：

<link rel="stylesheet" href="https://echeverra.cn/wp-content/APlayer.min.css">
<script src="https://echeverra.cn/wp-content/APlayer.min.js"></script>

<div id='demo'></div>

<script>
    var demo = new APlayer
    ({element: document.getElementById('demo'),
        showlrc: false,
        fixed: false,
        mini: false,
        audio: [
            {
                title: '半岛铁盒',
                author: '周杰伦',
                url: 'https://echeverra.cn/wp-content/uploads/2022/05/ 周杰伦 - 半岛铁盒.mp3',
                pic: 'https://echeverra.cn/wp-content/uploads/2022/05/ 周杰伦 - 半岛铁盒 -mp3-image.png'
            },
            {
                title: '给我一首歌的工夫',
                author: '周杰伦',
                url: 'https://echeverra.cn/wp-content/uploads/2021/06/ 周杰伦 - 给我一首歌的工夫.mp3',
                pic: 'https://echeverra.cn/wp-content/uploads/2021/06/ 周杰伦 - 给我一首歌的工夫 -mp3-image.png'
            }
        ]
    });
    demo.init();
</script>

在编辑器右侧可实时显示播放器成果。最终页面成果如下：

如果你想创立多个音乐播放器，就须要创立多个音乐播放器元素 <div id="apalyer"></div>，id 设为不同值，而后实例化 new 多个 Aplayer 播放器，再配置每个播放器的音乐列表 audio。参数mutex 默认值true，即便多个播放器也不会抵触。

<div id='demo1'></div>
<div id='demo2'></div>
<script>
    var demo1 = new APlayer
    ({element: document.getElementById('demo1'),
        showlrc: false,
        audio: {
                title: '半岛铁盒',
                author: '周杰伦',
                url: 'https://echeverra.cn/wp-content/uploads/2022/05/ 周杰伦 - 半岛铁盒.mp3',
                pic: 'https://echeverra.cn/wp-content/uploads/2022/05/ 周杰伦 - 半岛铁盒 -mp3-image.png'
            }
    });
    var demo2 = new APlayer
    ({element: document.getElementById('demo2'),
        showlrc: false,
        audio: {
                title: '给我一首歌的工夫',
                author: '周杰伦',
                url: 'https://echeverra.cn/wp-content/uploads/2021/06/ 周杰伦 - 给我一首歌的工夫.mp3',
                pic: 'https://echeverra.cn/wp-content/uploads/2021/06/ 周杰伦 - 给我一首歌的工夫 -mp3-image.png'
            }
    });
    demo1.init();
    demo2.init();
</script>

须要留神 <script> 标签中的代码不能有空行，否则会报解析为 <p> 标签，造成 js 代码无奈正确执行。

通常 fixed 和mini需同时置为 true 或false，否则会有显示异样的问题。

单页面音乐相比 Mini 音乐播放器能够展现更多的音乐信息，更加正式，但同样存在弊病，当博客切换界面后，背景音乐仍在后盾持续播放，只能回到音乐页面暂停，Mini 音乐播放器就不会有这种问题，它始终固定在页面左下角，不会随着页面切换退出或从新加载。

4.Meting 三方音乐

当然咱们也能够应用第三方音乐，须要引入另外一款 js 插件 Meting.js，它是基于 Aplayer 封装好的插件，开箱即用。

CDN 链接：

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

Meting 主要参数阐明：

参数 默认值 形容
id require 歌曲 ID/ 播放列表 ID/ 专辑 ID/ 搜寻关键字
server require 音乐平台: netease, tencent, kugou, xiami, baidu
type require 类型：song, playlist, album, search, artist
auto options 音乐链接，反对，反对: netease, tencent, xiami
fixed false 开启吸底模式
mini false 开启迷你模式
autoplay false 自动播放，个别浏览器默认会阻止音频自动播放
theme #2980b9 主题色
loop all 音频循环播放，值：’all’、’one’、’none’
order list 音频循环程序，值：’list’，’random’
preload auto 音频预加载，值: ‘none’, ‘metadata’, ‘auto’
volume 0.7 默认音量，播放器会记住用户设置，用户本人设置音量后默认音量将生效
mutex true 避免同时播放多个播放器，当该播放器开始播放时暂停其余播放器
lrc-type 0 歌词类型
list-folded false 列表是否先折叠
list-max-height 340px 音频列表最大高度

能够看出 Meting 参数和 Aplayer 根本是雷同的。

4.1 单曲引入

咱们应用网易云举例，单曲 Blow Me a Kiss，链接：https://music.163.com/#/song?…

代码如下：

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

<meting-js server="netease" type="song" id="2526628"></meting-js>

server="netease"指定音乐平台为网易云，type="song"指单曲类型，id="2526628"为音乐的 id，同链接上的 id 统一。

4.2 歌单引入

咱们应用网易云音乐里我创立的一个歌单，链接：https://music.163.com/#/playl…

代码如下：

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

<meting-js server="netease" type="playlist" id="7360465359"></meting-js>

同样的 server="netease" 指定音乐平台为网易云，type="playlist"指歌单类型，id="7360465359"为歌单的 id，同链接上的 id 统一。

4.3Mini 播放器

咱们用 Meting 实现一个随机播放的 Mini 播放器，代码如下：

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

<meting-js 
    server="netease" 
    type="playlist" 
    id="7360465359"
    fixed="true" 
    mini="true"
    order="random"
    loop="all"
    preload="auto"
    list-folded="false">
</meting-js>

除了之前设置的 server、type、id 参数外，还设置 Mini 播放器的必要参数fixed="true", mini="true"，随机播放order="random"。

4.4 博客园音乐引入

博客园是为数不多的可定制的博客平台，咱们先在博客后盾 -> 设置 -> 申请 JS 权限，大略一个小时工夫，胜利后在博客后盾 -> 设置 -> 页脚 HTML 代码中粘贴下面 4.3 的案例，就能够生成 Mini 音乐播放器啦，是不是很简略~

博客园 首页 播放器成果：

好啦，以上就是应用 Aplayer 在博客中增加音乐播放器的教程啦，是不是既弱小又好用，十分 Nice~ 心愿对大家有所帮忙~

你学“废”了么？

参考文章：

  • Aplayer 官网文档
  • Aplayer 搭配 Metingjs 音乐插件的应用
  • MetingJS 是如何配合 Aplayer 加载歌单的

（完）

文章首发于我的博客 https://echeverra.cn/aplayer/，原创文章，转载请注明出处。

欢送关注我的微信公众号 echeverra，一起学习提高！不定时会有资源和福利相送哦！

退出移动版