效果如下

准备条件

音乐代码

<!-- 音乐播放器所用的文件 -->
<!-- 引入 APlayer 样式表 -->
<link rel="stylesheet" href="https://npm.elemecdn.com/aplayer@1.10.1/dist/APlayer.min.css">
<!-- 引入 APlayer JavaScript -->
<script src="https://npm.elemecdn.com/aplayer@1.10.1/dist/APlayer.min.js"></script>

<!-- 引入 MetingJS，用于加载网易云音乐歌单 -->
<script src="https://npm.elemecdn.com/meting@2.0.1/dist/Meting.min.js"></script>

<!-- 自定义播放器容器，设置为可见 -->
<div id="customize" style="position: fixed; bottom: 0; left: 0; width: 100%; z-index: 9999;">
    <meting-js
        fixed="true"         
        autoplay="false"     
        theme="#409EFF"    
        list-folded="true"   
        auto="https://music.163.com/#/playlist?id=596492605"></meting-js>
</div>

操作步骤

  1. 代码说明 
    fixed="true"：播放器固定位置，不随页面滚动。
autoplay="false"：加载时不自动播放。
theme="#409EFF"：播放器主题颜色为蓝色。
list-folded="true"：歌单默认折叠，用户需要点击展开。
    auto这里配置自己想听的网易云音乐歌单即可

    auto=“https://music.163.com/#/discover/toplist?id=991319590”
  2. 将代码加入网页中即可
    • 方法1
      将代码加入 <head>和<body> 中
      在 <head> 中引入必要的 CSS 和 JS 文件，然后在 <body> 中放置播放器容器。由于播放器容器通常需要放置在页面内容中，建议在 <body> 内使用 div 来显示播放器，而不是直接在 <head> 中。

      如果以上不行或者有别的问题可以采用方法2或者3
    • 方法二
      将代码只加入 <head> 中
    • 方法三
      将代码只加入 <body> 中

网站示例

以我的博客网站为例：https://blog.1day.vip/
head中加入代码

首页显示效果如下

`