博客个人网站添加悬浮音乐播放器插件（开源）

xf-MusicPlayer.js插件是一款由小枫独立开发的开源式的HTML5悬浮音乐播放器插件，由原生JS开发无任何依赖，引入两行代码就能给网页添加漂亮的音乐播放器！改播放器目前有6种不同颜色的主题样式可任意切换 + 3种获取音乐的方式！

注意：该插件代码有用到ES6语法和css3新特性，目前不支持IE10以下内核浏览器访问！

有六种配色：

可以折叠还是比较好看的！

获取音乐方式

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

插件使用方法：

下载插件js脚本！把它引入你的网页！

• 设置播放器~全局属性配置

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

   <div id="xf-MusicPlayer" data-random="true"></div>

   自定义播放器歌曲数值（演示第3首）示例：

   <div id="xf-MusicPlayer" data-random="3"></div>

7. data-bottomHeight属性: 设置播放器距离底部的高度 (初始值是2em)示例代码：

   <div id="xf-MusicPlayer" data-bottomHeight="100px"></div>

8. data-memory属性: 设置音乐记忆播放示例代码：

   <div id="xf-MusicPlayer" data-memory="1"></div>

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

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

设置好意刷新一下，就可以体验喽！