HTML5悬浮音乐播放器插件（开源）-925源码网-游戏源码网

图片展示

获取音乐方式

获取网易云【热歌榜, 新歌榜, 飙升榜, 原创榜】默认为热歌榜（每周二0:20每个歌榜更新100首音乐，vip歌曲自动跳过）。
通过网易云的歌单id获取该歌单所有音乐。（注意：不支持解析VIP音乐）
自定义音乐，通过修改 playlistData.json 文件自定义歌曲，相对来说比较繁琐，如果你要自定义音乐推荐上面的方式。

文本教程

代码放到</body>的上面即可

<!DOCTYPE html> // html5声明
<html lang="en"> // 网页声明 zh-CN指的是中文 cn就是英文
    <head> // 头部标签 ==> 指的是头部标签开始
        <meta charset="UTF-8"> // 声明字符编码
        <title>Document</title> // 网页标题
    </head> // 头部结尾标签 ==> 指的是头部标签结束
    
    <body> // 页面主体开始
    
            中间的是网页其他的内容代码
    
            <!-- 这里就是显示网页内容的地方，也就是放播放器代码的地方！ -->
            <div id="xf-MusicPlayer" data-cdnName="https://player.xfyun.club/js"></div>
            <script src="https://player.xfyun.club/js/xf-MusicPlayer/js/xf-MusicPlayer.min.js"></script>
    </body> // 页面主体结束
</html> // 结尾

方法一：直接引入插件CDN，复制下面的代码就能直接使用（注意data-cdnName的属性不能删除）

<!-- 配置播放器 -->
<div id="xf-MusicPlayer" data-cdnName="https://player.xfyun.club/js"></div>

<!-- 引入外部CDN插件 -->
<script src="https://player.xfyun.club/js/xf-MusicPlayer/js/xf-MusicPlayer.min.js"></script>

方法二：插件下载到本地运行（注意引入正确的插件路径）

<!-- 配置播放器 -->
<div id="xf-MusicPlayer"></div>

<!-- 引入插件 -->
<script src="/xf-MusicPlayer/js/xf-MusicPlayer.min.js"></script>

全局属性配置

id=”xf-MusicPlayer”属性：初始化音乐播放器【必填】
示例代码：
也可以把id换成class，但是只能存在一个
<div id=”xf-MusicPlayer”></div>
data-cdnName属性：自定义CDN域名 data-cdnName=”http:// + cdn域名 + 路径”，后面不加/，和你添加js插件的路径一样否则网页样式全部失效！【选填】
示例代码：
比如你CDN的路径是：https://925ym.com/js/xf-MusicPlayer/js/xf-MusicPlayer.min.js
那下面的data-filePath属性就要和上面的一样
<div id=”xf-MusicPlayer” data-cdnName=”https://925ym.com/js”></div>
data-filePath属性：如果你本地修改了插件的文件路径就必须使用这个属性，和你添加js插件的路径一样否则网页样式全部失效！【选填】
示例代码：
比如你插件的路径是：/zdy/music/xf-MusicPlayer/js/xf-MusicPlayer.min.js
那下面的data-filePath属性就要和上面的一样
<div id=”xf-MusicPlayer” data-filePath=”/zdy/music/”></div>
data-fadeOutAutoplay属性：自动淡出音乐播放器，默认不淡出，后面不跟参数【选填】
示例代码：
<div id=”xf-MusicPlayer” data-fadeOutAutoplay></div>
data-themeColor属性：切换播放器主题颜色【xf-original（默认主题），xf-sky（天空），xf-orange（橙子），xf-darkGreen（墨绿），xf-wineRed（酒红），xf-girlPink（少女粉）】【选填】
示例代码：
如果你啥也不添加那就是默认主题颜色样式，下面是更换少女粉主题示例
<div id=”xf-MusicPlayer” data-themeColor=”xf-girlPink”></div>
data-random属性：打开页面随机返回一个歌曲，也可以用来定义从哪首歌开始播放随机播放示例：<div id=”xf-MusicPlayer” data-random=”true”></div>自定义播放器歌曲数值（演示第3首）示例：<div id=”xf-MusicPlayer” data-random=”3″></div>
data-bottomHeight属性: 设置播放器距离底部的高度 (初始值是2em)示例代码：<div id=”xf-MusicPlayer” data-bottomHeight=”100px”></div>
data-memory属性: 设置音乐记忆播放示例代码：<div id=”xf-MusicPlayer” data-memory=”1″></div>

网易云接口版属性配置（不能解析VIP歌曲）

data-musicApi属性：自定义播放API接口，接口已嵌入默认接口【选填】
示例代码：
<div id=”xf-MusicPlayer” data-musicApi=”api.xfyun.club”></div>
data-songChart属性：获取网易云歌榜【热歌榜（默认歌榜）, 新歌榜, 飙升榜, 原创榜】，每周二0:20每个歌榜更新100首音乐，vip歌曲自动跳过【选填】
示例代码：
如果你啥也不添加那就是默认的热歌榜的音乐，下面是更换新歌榜音乐
<div id=”xf-MusicPlayer” data-songChart=”新歌榜”></div>
data-songList属性：获取网易云歌单音乐，如果你发现歌曲播放不了那肯定是VIP歌曲，支持动态更新 data-songList=”歌单ID”【选填】
示例代码：
<div id=”xf-MusicPlayer” data-songList=”2192163086″></div>

本地音乐属性配置

data-localMusic属性：本地音乐，填写 playlistData.json 文件路径【本地音乐必填】
示例代码：
注意引入的是playlistData.json文件的路径
<div id=”xf-MusicPlayer” data-localMusic=”playlistData.json”></div>

常见问题

1. 免费下载或者VIP会员专享资源能否直接商用？

本站资源均通过网络收集整理，仅供个人研究学习使用。其版权归该软件和程序代码的合法拥有者所有，用户应自行核实资源版权及合法性，禁止用于商业用途、非法活动或任何违反国家法律法规的情形。

2. 程序、代码漏洞兼容性问题或功能缺陷等免责声明

由于本站资源均通过网络收集整理而来,并非本站原创，故不能完全保证其功能性或代码兼容性。用户需自行验证资源是否符合需求。因以下情形导致的损失，本站不承担任何责任：程序、源码等计算机软件类资源可能包含开发者遗留的代码漏洞（BUG）、兼容性问题或功能缺陷。本站不对此类技术瑕疵提供免费修复服务，用户需自行承担调试、修改或放弃使用的风险。

文章版权声明 1、本网站名称：925源码网
2、本站永久网址：https://www.925ym.com/
3、本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长QQ2282424302进行删除处理。
4、本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
5、本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报
6、本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。

THE END