Document

# HTML5音乐播放器 **Repository Path**: cenguigui/html5-music-player ## Basic Information - **Project Name**: HTML5音乐播放器 - **Description**: HTML5音乐播放器 - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 14 - **Forks**: 4 - **Created**: 2023-08-25 - **Last Updated**: 2025-01-14 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # HTML5悬浮音乐播放器插件 #### 介绍 gui-MusicPlayer.js插件是一款由小枫开发的开源式的HTML5悬浮音乐播放器插件，由原生JS开发无任何依赖，引入两行代码就能给网页添加漂亮的音乐播放器！改播放器目前有6种不同颜色的主题样式可任意切换 + 3种获取音乐的方式！注意：该插件代码有用到ES6语法和css3新特性，如果你使用浏览器内核还是IE10以下，那请回避吧~ **演示站** https://y.cenguigui.cn/YYDS/musicPlayer/ #### 展示图 ![gui-MusicPlayer-pic](guigui-MusicPlayer-pic.jpg) #### 获取音乐方式 1. 获取网易云【热歌榜, 新歌榜, 飙升榜, 原创榜】默认为热歌榜（每周二0:20每个歌榜更新100首音乐，vip歌曲自动跳过）。 2. 通过网易云的歌单id获取该歌单所有音乐。（注意：不支持解析VIP音乐） 3. 自定义音乐，通过修改 playlistData.json 文件自定义歌曲，相对来说比较繁琐，如果你要自定义音乐推荐上面的方式。 #### 文本教程如果你用过笒鬼鬼音乐播放器 y.cenguigui.cn 再用这个插件那你不用看可直接上手。代码放到``的上面即可 ``` // html5声明 // 网页声明 zh-CN指的是中文 cn就是英文 // 头部标签 ==> 指的是头部标签开始 // 声明字符编码 Document // 网页标题 // 头部结尾标签 ==> 指的是头部标签结束 // 页面主体开始中间的是网页其他的内容代码

// 页面主体结束 // 结尾 ``` - 俺用的是以下的： ``` demo

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

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

``` **全局属性配置** 1. id="gui-MusicPlayer"属性：初始化音乐播放器【必填】示例代码：也可以把id换成class，但是只能存在一个 ```

``` 2. data-cdnName属性：自定义CDN域名 data-cdnName="http:// + cdn域名 + 路径"，后面不加/，和你添加js插件的路径一样否则网页样式全部失效！【选填】示例代码：比如你CDN的路径是：https://y.cenguigui.cn/js/gui-MusicPlayer/js/gui-MusicPlayer.min.js 那下面的data-filePath属性就要和上面的一样 ```

``` 3. data-filePath属性：如果你本地修改了插件的文件路径就必须使用这个属性，和你添加js插件的路径一样否则网页样式全部失效！【选填】示例代码：比如你插件的路径是：/zdy/music/gui-MusicPlayer/js/gui-MusicPlayer.min.js 那下面的data-filePath属性就要和上面的一样 ```

``` 4. data-fadeOutAutoplay属性：自动淡出音乐播放器，默认不淡出，后面不跟参数【选填】示例代码： ```

``` 5. data-themeColor属性：切换播放器主题颜色【gui-original（默认主题），gui-sky（天空），gui-orange（橙子），gui-darkGreen（墨绿），gui-wineRed（酒红），gui-girlPink（少女粉）】【选填】示例代码：如果你啥也不添加那就是默认主题颜色样式，下面是更换少女粉主题示例 ```

``` 6. data-random属性：打开页面随机返回一个歌曲，也可以用来定义从哪首歌开始播放随机播放示例： ```

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

``` #### 网易云接口版属性配置（不能解析VIP歌曲） data-musicApi属性：自定义播放API接口，接口已嵌入默认接口【选填】示例代码： ```

``` data-songChart属性：获取网易云歌榜【热歌榜（默认歌榜）, 新歌榜, 飙升榜, 原创榜，说唱榜，古典榜，韩语榜，日语榜，国风榜,中文DJ榜，网络热歌榜，蛋仔派对听歌榜】，每周二0:20每个歌榜更新100首音乐，vip歌曲自动跳过【选填】示例代码：如果你啥也不添加那就是默认的热歌榜的音乐，下面是更换新歌榜音乐 ```

``` data-songList属性：获取网易云歌单音乐，如果你发现歌曲播放不了那肯定是VIP歌曲，支持动态更新 data-songList="歌单ID"【选填】示例代码： ```

``` **本地音乐属性配置** data-localMusic属性：本地音乐，填写 playlistData.json 文件路径【本地音乐必填】示例代码：注意引入的是playlistData.json文件的路径 ```

```