欢迎访问我的博客,点击蓝色字体即可进入!
第一种方式:使用网易云音乐插件
特点:
- 简单快捷
- 有版权保护的音乐无法播放(易造成歌单失效)
我们可以将此插件添加到博客界面,或者博客文章之中(直接粘贴网易云插件代码即可)。
在此我们举例将音乐插件添加到侧边栏。
打开我们主题文件:themes\next\layout\_macro\sidebar.swig
找到sidebar-inner
,将网易云插件代码代码粘贴到此<div>
标签后即可。
演示:
<aside class="sidebar">
<div class="sidebar-inner"> //从下面开始复制,粘贴到这里
<!--网易云插件-->
<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86
src="//music.163.com/outchain/player?type=2&id=463352828&auto=0&height=66"></iframe>
在博客文件夹打开GitBash
执行hexo clean
、hexo g
、hexo s
,即可看到效果。
效果图:
第二种方式:使用Aplayer + MetingJS插件
特点:
- 可以播放大部分音乐。
- 还可以添加其他音乐平台的歌单,如:
QQ音乐...
在此我们举例将音乐插件添加到侧边栏。
点击绿色框线处就会打开播放列表
有两种实现方式
打开我们主题文件:themes\next\layout\_macro\sidebar.swig
找到sidebar-inner
,复制下面代码粘贴到此<div>
标签后即可。
简单方式
经测试:此方式,有时会失效,留作研究。【不推荐】【要求MetingJS
版本:@2.0.1】
<aside class="sidebar">
<div class="sidebar-inner"> //从下面开始复制,粘贴到这里
<!-- require APlayer -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/APlayer.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/APlayer.min.js"></script>
<!-- require MetingJS-->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/Meting.min.js"></script>
<!--网易云-->
<meting-js
server="netease"
id="4916164702"
type="playlist"
mini="false"
fixed="false"
list-folded="true"
autoplay="false"
volume="0.4"
theme="#FADFA3"
order="random"
loop="all"
preload="auto"
mutex="true">
</meting-js>
属性
- sever:绑定服务器,填写网易云
- type:类型,播放列表
- mini:启用吸底模式
- fixed:启用固定模式
- list-folded:播放别表是否折叠
- autoplay:启用自动播放
- volume:音量
- theme:主题颜色
- order:播放顺序
random
:随机list
:顺序- loop:循环
all
、one
、none
- preload:预加载
- mutex:避免多个插件同时播放
- id:网易云歌单id,打开我们的歌单,网址最后一串数字就是。
例如:https://music.163.com/#/my/m/music/playlist?id=4916164702
- 其他属性请参照文末链接:`MetingJS
添加QQ音乐歌单
将meting-js
换成下面即可。 auto
后为歌单网址。
<meting-js
auto="https://y.qq.com/n/yqq/playlist/1790504159.html#stat=y_new.playlist.pic_click">
</meting-js>
复杂方式
在data-
后添加属性及属性值即可实现相同功能
【要求
MetingJS
版本:@1.2】
<aside class="sidebar">
<div class="sidebar-inner"> //从下面开始复制,粘贴到这里
<!-- require APlayer -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/APlayer.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/APlayer.min.js"></script>
<!-- require MetingJS-->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/Meting.min.js"></script>
<!--网易云-->
<div class="aplayer"
data-id="4916164702"
data-server="netease"
data-type="playlist"
data-fixed="false"
data-autoplay="false"
data-list-folded="true"
data-mutex="true"
data-order="random"
data-loop="all"
data-volume="0.4"
data-theme="#FADFA3"
date-preload="auto" >
</div>
其他属性请参照文末链接:
APlayer
使用 Pajx
实现背景音乐全局播放
即实现页面跳转刷新后音乐不间断播放
经测试,在博客文章中的网易云插件无法实现全局播放。(留作研究)
-
打开
themes\next\layout
文件夹找到_layout.swig
-
在
<\head>
标签前添加下面代码,并保存。
<head> //粘贴到这里
<!--pjax:防止跳转页面音乐暂停-->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/pjax.js"></script>
</head>
- 在主题的配置文件中找到
pajx
,将它设置为true
,并保存。
# Easily enable fast Ajax navigation on your website.
# Dependencies: https://github.com/theme-next/theme-next-pjax
pjax: true
在博客文件夹打开GitBash
执行hexo clean
、hexo g
、hexo s
,跳转页面时即可看到效果。
参考文章(鸣谢)
- Aplay操作手册(中文版):https://aplayer.js.org/#/zh-Hans/
- Pjax:https://github.com/theme-next/theme-next-pjax
- MetingJS:https://github.com/metowolf/MetingJS
- Sourc0d:https://blog.csdn.net/yjwan521/article/details/80899992