已更名为:KZHomePage,QQ群:962303102

  • 音乐播放支持在线解析歌单(基于meting)
  • Layer弹出层支持
  • 音乐播放器可选卡片模式和吸底模式
  • 接入一言API服务




  1. 下载最新压缩包,解压后使用任意编辑器修改index.html
  2. 填写head内的相关配置信息
<style>
        body{
            /*背景图片URL 可使用随机图片API */
            background-image: url("https://bu.dusays.com/2022/06/04/629b0a2a89425.png"); 
        }
        .photo-bg {
            /* 卡片左侧图片 */
            background-image: url("https://bu.dusays.com/2022/06/04/629b0a2750921.jpg");
        }
    </style>
    <script>
        // 音乐设置
        let meting_music_api = "https://api.mizore.cn/meting/api.php";// meting api
        let music_server = "netease"; // 音乐服务:网易云 netease 参见 meting api支持的服务
        let music_type = "playlist"; // 歌曲类型:歌单playlist 单首歌曲 song  专辑 album
        let music_id = "20173709"; // 歌单ID或歌曲ID或者专辑ID 20173709 29732992
        let music_order = "random"; // 音频循环顺序, 顺序播放: 'list', 随机播放:'random'
        let music_mini = false; // mini模式 吸底模式开启后此选项实效 true / false
        let music_fixed = false; // 吸底模式
        let music_volume = 0.7; // 默认音量
        let music_autoplay = false; // 自动播放
        let music_loop = "all"; // 音频循环播放, 可选值: 'all', 'one', 'none' ,分别为全部循环,单曲循环,不循环
    </script>

# 2022-06-12 KZHomePage-v1.1.1
1. 全新的Layer皮肤
2. 修改弹窗动画

# 2022-06-12 KZHomePage-v1.1
1. 替换已经无法稳定服务的jsdelivr为本地和七牛静态CDN库
2. 调整细节样式
3. 支持背景图和卡片图的修改,现在无需修改css文件了

# 2022-03-29 v1.0
1. 新增歌单自定义设置
2. 支持两种播放器位置

依赖项目

https://github.com/metowolf/MetingJS

https://aplayer.js.org/

版权声明

原始模板来源:http://www.cssmoban.com/cssthemes/9357.shtml

最后修改:2022 年 07 月 30 日
如果觉得我的文章对你有用,请随意赞赏