博客园自定义主题中添加迷你音乐插件
说明:这里直接介绍最简单直接的一种设置方式,想深入了解,自己 DIY 的,可滑到本文底部,附有其他大佬的方案。
-
首先,进入你的博客园后台设置,在开通了 JS 权限(可自定义博客园主题)前提下,找到页脚 HTML 代码选项,将下列示例音乐插件代码复制到页脚 HTML 代码代码框中。
<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> <div> <meting-js server="netease" type="song" id="1831467356" fixed="true" autoplay="false" loop="all" order="list" preload="auto" list-folded="ture" list-max-height="500px" lrc-type="1"> </meting-js> </div>
-
关键字列表说明如下:
选项 默认 描述 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
启用固定模式,默认 false
mini(迷你模式) false
启用迷你模式,默认 false
autoplay(自动播放) false
音频自动播放,默认 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键 其实主要需要改的就是 id(编号)、server(平台)、type(类型)即可!
- id(编号):需要播放的歌曲/列表/专辑的外链 id(填的是一串数字,如 1831467356)
- server(平台):播放的歌曲/列表/专辑是哪个平台(填的是平台名)
- type(类型):填播放的音乐类型,如
song
(单首歌曲),playlist
(歌单),album
(专辑)等
注意:以上信息需准确一致,不可填的是列表歌单 id,类型却填的 song,此类!
-
保存设置,然后刷新博客即可看到迷你音乐插件设置完成。
如果想更详细了解音乐插件的使用,可参考此文:Aplayer搭配Metingjs音乐插件的使用
都看到最后了,右下角来个赞鸭!-.- 欢迎评论留言~