Hexo添加音乐播放器-天涯论坛 - Powered by Discuz! Archiver

qzmjef 发表于 2024-11-7 08:11:31

Hexo添加音乐播放器

1、前言
为博客添加音乐播放器功能，网上有非常多种方式，亦有非常多插件能够用，例如aplayer、dplayer等等。安排方式既能够运用hexo插件，亦能够经过提取dist文件的方式。
自己为自己的播放选取的aplayer播放器，一起始是运用hexo插件的方式，然则安排的时候始终报标签解析的错误，查了好久亦没查到原由，无奈，放弃运用插件的方式，改为运用提取aplayer的dist文件的方式。
2、下载aplayer
拜访aplayer源码：[GitHub Aplayer](https://github.com/MoePlayer/APlayer) ，将文件下载到本地，解压后将dist文件夹复制到 /themes/next/source 文件夹下。
3、创建样式
3.1、新建music.js
在/themes/next/source/dist文件夹中新建music.js文件，将下面代码添加进去：const ap = new APlayer({
container: document.getElementById(aplayer),
autoplay: false,
loop: all,
volume: 0.7,
listFolded: true,
listMaxHeight: 60,
audio: [
{
name: name1,
artist: artist1,
url: url1.mp3,
cover: cover1.jpg,
},
{
name: name2,
artist: artist2,
url: url2.mp3,
cover: cover2.jpg,
}
]
});
3.2、参数修改
上面代码为你在hexo上生成aplayer播放器的样式，参数修改参考 [官方中文文档](https://aplayer.js.org/#/zh-Hans/?id=%E5%8F%82%E6%95%B0) 。
3.3、修改aplayer样式
3.3.1、普通模式：const ap = new APlayer({
container: document.getElementById(aplayer),
audio: [{
name: name,
artist: artist,
url: url.mp3,
cover: cover.jpg
}]
});效果如下：
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/pgc-image/86fceeb4695c484ab05d1af0091f488d~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1730020854&x-signature=JuKS1%2FspeWBgXoV2YEq1f9DA2%2Bk%3D" style="width: 50%; margin-bottom: 20px;"></div>
3.3.2、播放列表模式：const ap = new APlayer({
container: document.getElementById(player),
listFolded: false,//列表默认折叠
listMaxHeight: 90,//列表最大高度
lrcType: 3, //此为歌词格式，无歌词能够直接删掉这一行
audio: [
{
name: name1,
artist: artist1,
url: url1.mp3,
cover: cover1.jpg,
lrc: lrc1.lrc,
theme: #ebd0c2
},
{
name: name2,
artist: artist2,
url: url2.mp3,
cover: cover2.jpg,
lrc: lrc2.lrc,
theme: #46718b
}
]
});
效果如下：
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/pgc-image/71c7997daba74e22b26a17068f73d6fb~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1730020854&x-signature=ETzbMJlefVRJMFKILaR9Xwv%2FK1o%3D" style="width: 50%; margin-bottom: 20px;"></div>
3.3.3、吸底模式：const ap = new APlayer({
container: document.getElementById(player),
fixed: true,
audio: [{
name: name,
artist: artist,
url: url.mp3,
cover: cover.jpg,
}]
});效果如下：
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/pgc-image/26ca7abdfdef4170b7df40cd000ed391~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1730020854&x-signature=VhcFCYmFqwIT2Tker6JCCeEgf8I%3D" style="width: 50%; margin-bottom: 20px;"></div>
3.3.4、迷你底模式：const ap = new APlayer({
container: document.getElementById(player),
mini: true,
audio: [{
name: name,
artist: artist,
url: url.mp3,
cover: cover.jpg,
}]
});3.4、附上我的参数：const ap = newAPlayer({container: document.getElementById(aplayer), //播放器容器元素
listFolded: false, //列表默认折叠
listMaxHeight: 90, //列表最大高度
//lrcType: 3, //此为歌词格式，无歌词能够直接删掉这一行
mini:false, //迷你模式
autoplay: true, //自动播放
theme: #FADFA3, //主题色
loop: all, //音频循环播放, 可选值: all所有循环, one单曲循环, none不循环
order: list, //音频循环次序, 可选值: list列表循环, random随机循环
preload: auto, //预加载，可选值: none, metadata, auto
volume: 0.7, //默认音量，请重视播放器会记忆用户设置，用户手动设置音量后默认音量即失效
mutex: false, //互斥，阻止多个播放器同期播放，当前播放器播放时暂停其他播放器
audio: [ //音频信息
{
name: 大鱼, //音频名叫作
artist: 周深、郭沁, //音频艺术家
url: "http://lc-tguve1gk.cn-n1.lcfile.com/47b5548df9c80bba84f4/%E5%91%A8%E6%B7%B1%E3%80%81%E9%83%AD%E6%B2%81%20-%20%E5%A4%A7%E9%B1%BC%20%282017%E4%B8%AD%E5%9B%BD%E6%96%B0%E6%AD%8C%E5%A3%B0%E7%AC%AC%E4%BA%8C%E5%AD%A3%E7%AC%AC%E5%8D%81%E6%9C%9F%E7%8E%B0%E5%9C%BA%E4%BC%B4%E5%A5%8F%29.mp3, //音频链接
cover: http://lc-tguve1gk.cn-n1.lcfile.com/a9fff99abbddc8757d4b/%E5%A4%A7%E9%B1%BC.jpg, //音频封面
//lrc: lrc1.lrc, //歌词
theme: #ebd0c2 //切换到此音频时的主题色，比上面的 theme 优先级高
},
{
name: Something just like this,
artist: Alex Goot _ Madilyn Bailey,
url: http://lc-tguve1gk.cn-n1.lcfile.com/f3bee3260fa207648d34/Alex%20Goot%20_%20Madilyn%20Bailey%20-%20Something%20Just%20Like%20This.mp3,
cover: http://lc-tguve1gk.cn-n1.lcfile.com/d21b8e3392433807b1e2/Something%20just%20like%20this.jpg,
//lrc: lrc2.lrc,
theme: #46718b
}
]
});4、安排 
aplayer的样式设置好之后就能够把aplayer放在自己想要安置的位置上，安置代码如下：<link rel="stylesheet" href="/dist/APlayer.min.css">
<div id="aplayer"></div>
<script type="text/javascript" src="/dist/APlayer.min.js"></script>
<script type="text/javascript" src="/dist/music.js"></script>
将安置代码放在区别的/themes/next/layout/xxx.swig文件内会有区别的效果。
每一个人运用的主题不同样，要按照自己的主题去调试。例如我用的是next-mist主题，且爱好安置在侧边栏。那样在/themes/next/layout/_marco文件夹下找到sidebar.swig文件。
倘若要安置在侧边栏的友链下面,那样在sidebar.swig中找到if theme.links，将安置代码添加到endif之后。如下图：
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/pgc-image/798ec16a61a84a08bae7695993a388a6~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1730020854&x-signature=bdwNCPHykSNGEEaRo3F0hyWbDPg%3D" style="width: 50%; margin-bottom: 20px;"></div>
如要安置到RSS下就在sidebar.swig中搜索if theme.rss，亦是添加到endif之后。
我是选取放在了友链下方，如下图：
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/pgc-image/fb3d730949014ff8adc23abc67f0a72b~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1730020854&x-signature=FKlGa7i%2BjC0ZBXjRjDCBZFWakHo%3D" style="width: 50%; margin-bottom: 20px;"></div>
最后效果如下图：
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/pgc-image/3995bef80d3a4cda8bf77fa5936e0a5a~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1730020854&x-signature=lHMoeoiE1VVSjl3bIPwZVgx5aW0%3D" style="width: 50%; margin-bottom: 20px;"></div>
5、制作音乐/照片外链
正如之前为博客添加评论及统计功能的时候，咱们运用了LeanCloud，制作音乐/照片的外链一样亦能够运用它。
注册、登陆的过程在之前的文案里已然描绘过了，这儿再也不详述，咱们直接步入正题。
到你创建的应用里面去，点击存储，如下图。点击_File，点击上传，找到你下载好的音乐文件和音乐照片上传上去就行了。
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/pgc-image/37280cdca30f4b5ea0009fbf21b48152~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1730020854&x-signature=aSODY%2FBDyxRDbuYfDQT54MI2Jqs%3D" style="width: 50%; margin-bottom: 20px;"></div>
上传之后刷新页面，将列表向后拉，就能够看到对应的音乐和照片的url连接了。
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/pgc-image/1b277eb248104a51aa87c49c0629b8bd~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1730020854&x-signature=E1%2FF2dbPDg79wtZUHmmbrAAH8iw%3D" style="width: 50%; margin-bottom: 20px;"></div>

页: [1]

天涯论坛's Archiver

Hexo添加音乐播放器