定制主题 - 内嵌Html内容（body）

添加左下角音乐播放器

<div class="bottom-player is-hidden-mobile">
    <mew-music listFolded="true" fixed="true" mini="true" prompt="音乐加载中..." listMaxHeight="200px" playlist="8624929948"></mew-music>
</div>

<style>
    .bottom-player {
        position: relative;
        width: 100%;
        height: 100%;
    }

    .bottom-player mew-music {
        margin: initial !important;
        position: fixed;
        bottom: 0;
    }

    .bottom-player .aplayer.aplayer-fixed .aplayer-body {
        background: #00000000 !important;
    }

    .bottom-player .aplayer-list {
        border: 1px solid #00000000 !important;
    }

    .bottom-player .aplayer-info {
        border-top: 1px solid #00000000 !important;
    }
</style>

mew-music歌曲配置属性说明

1. meetingUrl：填写完整meeting-api请求地址获取歌单；

2. song：填写网易云歌曲id；

3. playlist：填写网易云歌单id；

4. url：填写单曲链接；

5. music-list：填写自定义歌曲；

• meetingUrl设置详见https://github.com/metowolf/MetingJS/

• 以上属性只能选择其中之一进行配置，上述属性顺序即为识别优先级。

• 属性参考[APlayer参数介绍](https://aplayer.js.org/#/zh-Hans/?id=%E5%8F%82%E6%95%B0)

  • 其中属customAudioType未支持；

music-list 属性

• 值必须是json数组，即[]

• name：歌曲名，默认："音乐"

• url：歌曲链接，必填字段

• artist：歌手名，默认：""未知歌手"

• cover：封面，默认：内置封面

• lrc：歌词，默认：""

添加左下角音乐播放器(光盘样式，随机播放)

<div class="bottom-player is-hidden-mobile">
    <mew-music listFolded="true" mini="true" volume="0.3" prompt="加载中..." order="random" listMaxHeight="200px" playlist="8624929948"></mew-music>
</div>

<style>
    .bottom-player .aplayer.aplayer-narrow {
        border-radius: 50%;
        border: 1px solid var(--theme);
        left: 10px;
        bottom: 10px;
        animation: spin 20s linear infinite;
    }

    .bottom-player .aplayer-button {
        animation: reverse-spin 20s linear infinite;
    }

    .bottom-player .aplayer .aplayer-pic .aplayer-pause {
        width: 26px;
        height: 26px;
        border: 2px solid #fff;
        bottom: 50%;
        right: 50%;
        margin: 0 -15px -15px 0;
    }

    .bottom-player .aplayer .aplayer-pic .aplayer-pause svg {
        position: absolute;
        top: 3px;
        left: 3px;
        height: 20px;
        width: 20px;
    }

    .bottom-player mew-music {
        margin: initial !important;
        position: fixed;
        bottom: 0;
    }

    /* 定义旋转动画 */
    @keyframes spin {
        from { transform: rotate(0deg); }
        to { transform: rotate(360deg); }
    }

    /* 定义逆向旋转动画 */
    @keyframes reverse-spin {
        from { transform: rotate(0deg); }
        to { transform: rotate(-360deg); }
    }
</style>

添加 xf-MusicPlayer 播放器

项目仓库地址

https://gitee.com/xfwlclub/xf-MusicPlayer

播放器代码生成：https://musicplayer.xfyun.club/

内嵌Html内容（body）中注入生成的代码

除了生成的代码外，额外注入下列代码，修正歌曲列表中图片挤压的问题

<style>
    .xf-songListSongPictures .xf-songIcon {
        top: 0px !important;
        width: 50px !important;
        height: 50px !important;
    }

    .xf-songListSongPictures .xf-playlistImg {
        width: 50px !important;
        height: 50px !important;
    }
</style>