# zplayer

**Repository Path**: source/zplayer

## Basic Information

- **Project Name**: zplayer
- **Description**: 史上最精简的音乐播放器，200多行js实现所有功能！拖拽无顿感。
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: http://music.nbclass.com
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 88
- **Created**: 2018-07-08
- **Last Updated**: 2020-12-18

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# zplayer

#### 项目介绍
史上最精简的音乐播放器！300多行js！你想要的功能zplayer都有！请加Q群130512958交流技术。zplayer还支持初始化多个播放器。如果使用有建议或者其他问题，可以加群交流。

#### 使用说明
1. down下来本项目后，在页面内引入 css/zplayer.min.css和js/zplayer.min.js
2. 使用方法以及参数说明<br/>（autoplay，showlrc，fixed，listFolded，listMaxHeight五个参数可以不传，则走默认值,具体见以下代码示例）。

```
		<div id="player"></div>
		<script>
		    var zp = new zplayer({
		        element: document.getElementById("player"),
		        autoPlay: false,/*是否开启自动播放,默认false*/
		        lrcStart: true,/*是否开启歌词功能 ，默认false（为true时musics集合中需要传入lrc字段。）*/
		        showLrc: true,/*开启歌词功能后是否立即展示歌词内容 ，默认false*/
		        fixed: true, /*是否固定在底部，默认false*/
		        listFolded: true, /*列表默认折叠，默认false*/
		        listMaxHeight: 300, /*列表最大高度，默认240*/
		        musics: [{
		            title: "可能否",
		            author: "木小雅",
		            url: "http://music.163.com/song/media/outer/url?id=569214126.mp3",
		            pic: "http://p1.music.126.net/SJYnDay7wgewU3O7tPfmOQ==/109951163322541581.jpg?param=300x300",
		            lrc:"[00:00] 作曲 : 木小雅\n[00:01] 作词 : 木小雅\n[00:17]春天的风 能否吹来夏天的雨\n[00:25]秋天的月 能否照亮冬天的雪\n[00:34]夜空的星 能否落向晨曦的海\n[00:42]山间的泉 能否遇上南飞的雁\n[00:49]能否早一点 看透命运的伏线\n[00:53]能否不轻易就深陷\n[00:57]能否慢一点 挥霍有限的时间\n[01:01]能否许我一个永远\n[01:07]可能我撞了南墙才会回头吧\n[01:11]可能我见了黄河才会死心吧\n[01:15]可能我偏要一条路走到黑吧\n[01:20]可能我还没遇见 那个他吧\n[01:26]\n[01:44]断掉的弦 能否扯破自缚的茧\n[01:52]熄灭的火 能否烧光残留的念\n[02:00]梦中的云 能否化作熟悉的脸\n[02:08]前世的劫 能否换来今生的缘\n[02:16]能否早一点 相信年少的誓言\n[02:20]能否不轻易说再见\n[02:24]能否慢一点 感受岁月的缱绻\n[02:28]能否许我一次成全\n[02:34]可能我撞了南墙才会回头吧\n[02:38]可能我见了黄河才会死心吧\n[02:42]可能我偏要一条路走到黑吧\n[02:46]可能我还没遇见 那个他吧\n[02:53]\n[02:54]可能我撞了南墙才会回头吧\n[02:58]可能我见了黄河才会死心吧\n[03:02]可能我偏要一条路走到黑吧\n[03:06]可能我还没遇见 那个他吧\n[03:14]可能我还没忘掉 哪个他吧\n[03:20]\n[03:22]制作人：王佳依\n[03:24]监制：姚政\n[03:25]编曲：闫津\n[03:26]吉他：吴金迪\n[03:28]录音师：陈程\n[03:31]缩混：陈程\n"
		        },{
		            title: "讲真的",
		            author: "曾惜",
		            url: "http://music.163.com/song/media/outer/url?id=30987293.mp3",
		            pic: "http://p1.music.126.net/cd9tDyVMq7zzYFbkr0gZcw==/2885118513459477.jpg?param=300x300",
		            lrc:"[by:却连一句我爱你都不能说出口]\n[ti:讲真的]\n[ar:曾惜]\n[al:不要你为难]\n[by:冰城离殇]\n[00:00] 作曲 : 何诗蒙\n[00:01] 作词 : 黄然\n[00:18]今夜特别漫长\n[00:21]有个号码一直被存放\n[00:25]源自某种倔强\n[00:30]不舍删去又不敢想\n[00:33]明明对你念念不忘\n[00:37]思前想后愈发紧张\n[00:41]无法深藏\n[00:43]爱没爱过想听你讲\n[00:48]讲真的\n[00:51]会不会是我 被鬼迷心窍了\n[00:54]敷衍了太多 我怎么不难过\n[00:58]要你亲口说 别只剩沉默\n[01:03]或许你早就回答了我\n[01:06]讲真的\n[01:08]想得不可得 是最难割舍的\n[01:11]各自好好过 也好过一直拖\n[01:15]自作多情了 好吧我认了\n[01:19]至少能换来释怀洒脱\n[01:23]没丢失掉自我\n[01:42]今夜特别漫长\n[01:44]有个号码一直被存放\n[01:49]源自某种倔强\n[01:53]不舍删去又不敢想\n[01:57]明明对你念念不忘\n[02:01]思前想后愈发紧张\n[02:05]无法深藏\n[02:08]爱没爱过想听你讲\n[02:13]讲真的\n[02:15]会不会是我 被鬼迷心窍了\n[02:19]敷衍了太多 我怎么不难过\n[02:23]要你亲口说 别只剩沉默\n[02:27]或许你早就回答了我\n[02:30]讲真的\n[02:32]想得不可得 是最难割舍的\n[02:35]各自好好过 也好过一直拖\n[02:40]自作多情了 好吧我认了\n[02:44]至少能换来释怀洒脱\n[02:47]没丢失掉自我\n[03:04]讲真的\n[03:05]会不会是我 被鬼迷心窍了\n[03:09]敷衍了太多 我怎么不难过\n[03:14]要你亲口说 别只剩沉默\n[03:18]或许你早就回答了我\n[03:21]讲真的\n[03:22]想得不可得 是最难割舍的\n[03:26]各自好好过 也好过一直拖\n[03:30]自作多情了 好吧我认了\n[03:35]至少能换来释怀洒脱\n[03:38]没丢失掉自我\n"
		        }]
		    });
		    zp.init();
		</script>
```

#### 预览图
1. 默认效果<br/>
![默认效果](https://gitee.com/supperzh/zplayer/raw/master/img/default.png?v=1.0)

2.歌词+不固定效果<br/>
![歌词不固定效果](https://gitee.com/supperzh/zplayer/raw/master/img/lrc.png?v=1.0)

3. 固定底部（折叠）效果<br/>
![固定效果](https://gitee.com/supperzh/zplayer/raw/master/img/fixed.png?v=1.0)


		        


#### 参与贡献

1. Fork 本项目
2. 新建 Feat_xxx 分支
3. 提交代码
4. 新建 Pull Request