Hexo + Next 主题实现全局播放背景音乐

欢迎访问我的博客,点击蓝色字体即可进入!

第一种方式:使用网易云音乐插件

特点:

  • 简单快捷
  • 有版权保护的音乐无法播放(易造成歌单失效)

我们可以将此插件添加到博客界面,或者博客文章之中(直接粘贴网易云插件代码即可)。

如何获取网易云歌单外链音乐插件及注意事项

在此我们举例将音乐插件添加到侧边栏。

打开我们主题文件:themes\next\layout\_macro\sidebar.swig找到sidebar-inner,将网易云插件代码代码粘贴到此

标签后即可。

演示:

<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 cleanhexo ghexo s,即可看到效果。

效果图:

Hexo + Next 主题实现全局播放背景音乐_第1张图片

第二种方式:使用Aplayer + MetingJS插件

特点:

  • 可以播放大部分音乐
  • 还可以添加其他音乐平台的歌单,如:QQ音乐...

在此我们举例将音乐插件添加到侧边栏。

点击绿色框线处就会打开播放列表

Hexo + Next 主题实现全局播放背景音乐_第2张图片

有两种实现方式

打开我们主题文件:themes\next\layout\_macro\sidebar.swig找到sidebar-inner,复制下面代码粘贴到此

标签后即可。

简单方式

经测试:此方式,有时会失效,留作研究。【不推荐】 【要求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>

属性

选项 默认值 功能描述
id 必须值 歌曲 id / 播放列表 id / 相册 id / 搜索关键字
server 必须值 音乐平台: netease, tencent, kugou, xiami, baidu
type 必须值 song, playlist, album, search, `artist
auto options music link, support: 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 该选项开启时,如果同页面有其他 aplayer 播放,该播放器会暂停
lrc-type 0 lyric type
list-folded false 歌词格式类型
list-max-height 340px 播放列表的最大长度
storage-name metingjs LocalStorage 中存储播放器设定的键名

其他属性请参照: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

第三种方式:使用Aplayer添加本地音乐

此方式有些麻烦和复杂,界面相关属性都需要自己设置和修改,不做具体阐述,参考以下链接

  • feilong4659196:使用Aplayer + LeanCloud方式
  • Y`s BLOG:使用Aplayer + 纯代码方式(Aplay官方文档也有描述)

使用 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 cleanhexo ghexo s,跳转页面时即可看到效果。


参考文章 【鸣谢】

  • Aplay官方文档(中文版)
  • Pjax
  • MetingJS
  • Sourc0d
  • hushhw
  • feilong4659196
  • Y`s BLOG

如本文中有错误,欢迎在评论中进行指正。转载请注明出处,谢谢支持。


你可能感兴趣的:(Hexo博客)