时间：2023-04-30 04:57:02 | 来源：网站运营
时间：2023-04-30 04:57:02 来源：网站运营
<建站系列-四> Hexo博客添加音乐界面：本文章首发于笔者博客，欢迎关注~前言：以网易云音乐为例，其它同理。
给自己的博客添加音乐播放界面，一方面自己随时可以在线听，另一方面可以让访问博客的友友边读博文边欣赏，还有，重要的是，咱逼格要够，懂吧！音乐播放器往主页一放，咱就是说瞬间逼格拉满好吧
在线咨询
生成外链播放器，这可以调用云音乐提供的iframe插件编辑器，调整尺寸，复制底部HTML代码，如下图：playlist?id=后就是歌单id，复制，黏贴替换下面HTML代码中的id：<!--网易云音乐插件--><!-- require APlayer --><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer@1.10.1/dist/APlayer.min.css"><script src="https://cdn.jsdelivr.net/npm/aplayer@1.10.1/dist/APlayer.min.js"></script><!-- require MetingJS--><script src="https://cdn.jsdelivr.net/npm/meting@2.0.1/dist/Meting.min.js"></script> <!--网易云playlist外链地址--> <meting-js server="netease" type="playlist" id="110119120" mini="false" fixed="false" list-folded="true" autoplay="false" volume="0.4" theme="#FADFA3" order="list" loop="all" preload="auto" mutex="true"></meting-js>由于网易云禁用了一键式歌单外链，所以我们歌单界面用第三方插件Aplayer和Metingjs实现，Aplayer是一个功能强大的HTML5音乐播放器，而Metingjs基于Aplayer进行封装[1]，两者已集成到NexT插件pjax中。 Metingjs封装控制语句参数见下表，可按需调整：| 选项 | 默认 | 描述 |
|---|---|---|
| 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 | 默认#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 | 列出最大高度 |
| storage-name（储存名称） | metingjs | 存储播放器设置的localStorage键 |
source/themes/hexo-theme-next-8.11.0/layout/_macro/sidebar.njk文件，这是侧边栏图层源文件，把之前生成的HTML代码插入要想要显示的位置。注意：插入不同位置会显示在侧边栏不同位置，我们可以精确定位，位置对应关系如下图：source/themes/hexo-theme-next-8.11.0/layout/_layout.njk文件，复制以下语句到<head>标签后<!--pjax：防止跳转页面音乐暂停--> <script src="https://cdn.jsdelivr.net/npm/pjax@0.2.8/pjax.js"></script>最后，开启NexT主题pjax插件，修改主题配置文件，令pjax: true 后话：
经过简单的几个步骤，我们为博客添加了拉风的音乐播放界面，终于可以愉快地点看博客边听歌了，妙啊！
碎碎念：终于，<建站系列>的四篇博文全部更完，Markdown码了字接近6000字，加上配图，并且一步步重新搭建，花了我两天时间，属实不易。写这个系列一方面是记录建站过程，方便日后查阅；另一方面是想通过一套详细易读的教材让大家少走弯路，快速上手。对这套教程，我有信心说是较为全面且易读的，基本把重新建站的各个方面都覆盖到了，直接跟着一步步走就可以了，不用本站、CSDN、Google、官网到处翻来翻去。希望能给你带来帮助♥~
关键词：界面,音乐,系列
