我的博客全站播放器的设置方法
本文发布于 152 天前,其中的信息可能已经有所发展或是发生改变。

近期有多位访客留言询问我的博客左下方的播放器是如何设置的。之前在【API已终止公共使用】网易云音乐API文章中写过示例,但由于API关闭,该文章在首页隐去,于是今天我写一篇文章大概介绍一下基本用法。

我的博客全站播放器的设置方法-随意之光博客

基础组件

APlayer

一个HTML5音乐播放器,是我的博客播放器的主体部分。

Meting

是一个音乐解析api框架,通过该框架可以自行开发属于自己的国内各大平台音乐解析api。

这并不要求我们自行创建api,我们可以使用包括Meting作者在内提供的公共api进行使用。

MetingJS

该组件是用于连接APlayer与Meting,可以快速创建相应音乐

一个简单的示例

本次设置播放器我们需要在博客中引入上述组件中的几个js、css及一些html代码。如果主题可以通过后台添加html,可以直接在后台设置。也可通过修改footer.php等主题文件设置。

具体引入方式可以根据自己主题选择。

<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>
<meting-js
fixed="true"
server="netease"
type="playlist"
id="5225821464"
order="random"
preload="none">
</meting-js>
<script src="https:[email protected]/dist/Meting.min.js"></script>

*jsdelivr国内访问异常,请自行更换为其他公共CDN服务,或下载后使用本地服务

这是本站设置的播放器基础代码。其中<meting-js>中参数设置是一个重点,下面我列一个表格说明一下

参数项参数值说明可选值
fixedtrueAPlayer开启吸底模式,即现在左下角这个样子。false,
true
servernetease即播放源平台,这里我选择的是网易云音乐。netease, tencent, kugou, xiami, baidu
typeplaylist音乐类型,这里我选择的是歌单。song, playlist, album, search, artist
id5225821464id,由于我选择是歌单,这里便是歌单id
orderrandom循环模式,这里选择的是随机循环'list', 'random'
preloadnone预加载,我选择的是不预加载'none', 'metadata', 'auto'

server,type取决于我们使用的api。

更多的设置项请前往APlayer[1]、MetingJS[2]文档学习。

切换页面不刷新功能请自行研究pjax等技术

以上便是本次基础设置的内容了,感谢各位的阅读。有什么问题可以在评论区留言,我会尽力进行回复。

注释与参考

  1. ^APlayer 参数(aplayer.js.org)
  2. ^MetingJS option(github.com)
《我的博客全站播放器的设置方法》(https://blog.suiyil.cn/3152.html)为随意之光发布于随意之光博客,其中原创内容均以知识共享署名-非商业性使用-以相同方式共享 4.0 国际许可协议(CC BY-NC-SA 4.0)进行许可,转载与引用请注明出处,详见版权协议与免责声明

评论

  1. Macintosh
    2月前
    2022-8-07 2:38:21

    很棒的工具

     IP属地(仅供参考):广东
  2. x
    Android
    4月前
    2022-5-19 15:55:44

    博主,加密文章的确定上面的“加个密码,到时再决定是否公开”提示文字怎么加

     IP属地(仅供参考):福建
    • 博主
      x
      Windows
      4月前
      2022-5-19 16:23:46

      主题的一个可选功能
      https://github.com/solstice23/argon-theme#20200503-v0955
      在编辑文章添加一个 password_hint


      查看图片


       IP属地(仅供参考):山东
      • x
        随意之光
        Android
        4月前
        2022-5-19 17:01:20

        那能不能实现某篇文章可以设置单独的一个提示内容嘞?

         IP属地(仅供参考):福建
        • 博主
          x
          Android
          4月前
          2022-5-19 17:03:52

          本来就是一个文章设置一个提示,建议还是操作一下看看

           IP属地(仅供参考): 未知
          • x
            随意之光
            Android
            4月前
            2022-5-19 17:12:56

             IP属地(仅供参考):福建
          • x
            随意之光
            Android
            4月前
            2022-5-19 17:21:35

            nb,学会了学会了,还以为这玩意设置一个其余的都一样,以为是统一的,原来是一篇一个,赞

             IP属地(仅供参考):福建
    • 博主
      x
      Windows
      4月前
      2022-5-19 16:38:16

      另外提醒一下,因为jsdelivr在国内访问异常,所以访问你的博客样式错误。建议换一个主题CDN

       IP属地(仅供参考):山东
  3. 随风
    Windows
    5月前
    2022-4-25 17:15:14

    大佬,为什么输入我的歌单id,播放器不显示了,是不是因为歌单里有会员才可以听的歌啊!

     IP属地(仅供参考):捷克
    • 博主
      随风
      Android
      5月前
      2022-4-25 17:37:33

      会员歌曲只是不能播放,播放器是能正常显示的。看看参数输对了吗,要是还是不行,留一个网站地址我看看

       IP属地(仅供参考):山东
      • 随风
        随意之光
        Windows
        5月前
        2022-4-25 18:29:52

        博主,我试了很多次发现不能加网易云自带的我喜欢的音乐这个歌单id,使用后不显示,别的歌单id都可以。另外我的博客域名正在申请,目前只有IP地址,我听说被别人知道ip地址后网站很容易被攻击,所以不敢公开自己的IP地址。

         IP属地(仅供参考):捷克
        • 博主
          随风
          Android
          5月前
          2022-4-25 18:50:49

          刚才测试一下,确实原作者的默认api对默认歌单不返回解析内容。具体原因我也不清楚,先使用其他歌单吧。

           IP属地(仅供参考):山东

发送评论 编辑评论


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