WordPress如何设置全站音乐播放器

前言

设置如下图右下角的全站播放器,在网站载入的时候加载一次,除非手动刷新,否则不会重新加载,这意味着实现在站内的网页跳转中播放器的播放不会中断。

下载组件

APlayer

一个HTML5音乐播放器

Meting

音乐 API 框架,有能力的可以动手开发,没有能力的(比如我)直接用作者的公共API就行了,不需要看这条,直接看MetingJS部分

MetingJS

用来连接上面两部分的(APlayer、Meting)

引用组件

我一般不用cdn,因为经常会失效导致加载不出来,所以我选择自给自足

  1. 下载APlayer的dist目录下 APlayer.min.cssAPlayer.min.js
  2. MetingJS的MD里有提供了CDN:https://cdn.jsdelivr.net/npm/meting@2.0.1/dist/Meting.min.js,也下载下来

上传组件

上传下载的三个文件,上传位置随意,主要是获取上传后的分享连接,我是上传到了媒体库

html模板

大概代码模板,下面的meting-js里的参数可以自定义,模板仅列出部分

模板内需要自定义的参数有4个,三个是组件链接,一个是你的网易云音乐id(通过分享音乐列表链接获得),如果你用的是其它音乐平台,请自行按照参数表修改server值

<link rel="stylesheet" href="你的APlayer.min.css链接">
<script src="你的APlayer.min.js链接"></script>
<meting-js
fixed="true"
server="netease"
type="playlist"
id="你的音乐列表id"
order="random"
preload="none">
</meting-js>
<script src="你的Meting.min.js链接"></script>

引入模板

对于模板的引入我用主题自带的功能,这个功能刚好实现只加载一次,很实用

如果你的主题没有自带这类的功能,可以通过修改页脚文件footer.php 等主题文件进行设置,不过要实现加载网页不刷新音乐可能会有 亿 点点复杂,所以,加油吧,你可以的!

附 meting-js参数表

optiondefaultdescription
idrequiresong id / playlist id / album id / search keyword
serverrequiremusic platform: netease, tencent, kugou, xiami, baidu
typerequiresong, playlist, album, search, artist
autooptionsmusic link, support: netease, tencent, xiami
fixedfalseenable fixed mode
minifalseenable mini mode
autoplayfalseaudio autoplay
theme#2980b9main color
loopallplayer loop play, values: 'all', 'one', 'none'
orderlistplayer play order, values: 'list', 'random'
preloadautovalues: 'none', 'metadata', 'auto'
volume0.7default volume, notice that player will remember user setting, default volume will not work after user set volume themselves
mutextrueprevent to play multiple player at the same time, pause other players when this player start play
lrc-type0lyric type
list-foldedfalseindicate whether list should folded at first
list-max-height340pxlist max height
storage-namemetingjslocalStorage key that store player setting

作 者:道无涯
来 源:道无涯博客
链 接: https://www.daowuya.love/wordpress如何设置全站音乐播放器/
版 权 声 明:本博客所有文章除特别声明外,均采用CC BY-NC-SA 4.0许可协议。文章版权归作者所有,未经允许请勿转载!


暂无评论

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇