博客园自定义主题中添加迷你音乐插件

说明:这里直接介绍最简单直接的一种设置方式,想深入了解,自己 DIY 的,可滑到本文底部,附有其他大佬的方案。

  1. 首先,进入你的博客园后台设置,在开通了 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>
    
  2. 关键字列表说明如下:

    选项 默认 描述
    id(编号) require 歌曲ID /播放列表ID /专辑ID /搜索关键字
    server(平台) require 音乐平台:neteasetencentkugouxiamibaidu
    type(类型) require songplaylistalbumsearchartist
    auto(支持类种 类) options 音乐链接,支持:neteasetencentxiami
    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,此类!

  3. 保存设置,然后刷新博客即可看到迷你音乐插件设置完成。

如果想更详细了解音乐插件的使用,可参考此文:Aplayer搭配Metingjs音乐插件的使用

posted @ 2022-11-02 21:12  luis林  阅读(129)  评论(1编辑  收藏  举报