博客园自定义主题中添加迷你音乐插件
说明:这里直接介绍最简单直接的一种设置方式,想深入了解,自己 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,baidutype(类型) require song,playlist,album,search,artistauto(支持类种 类) options 音乐链接,支持: netease,tencent,xiamifixed(固定模式) false启用固定模式,默认 falsemini(迷你模式) false启用迷你模式,默认 falseautoplay(自动播放) false音频自动播放,默认 falsetheme(主题颜色) #2980b9默认 #2980b9loop(循环) 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音乐插件的使用
都看到最后了,右下角来个赞鸭!-.- 欢迎评论留言~

给自定义的博客园主题添加一个迷你音乐播放器
浙公网安备 33010602011771号