Skip to content

Commit bdd86a2

Browse files
CopayCopay
committed
feat: Async url and lyric
chore: new demo
1 parent f9b593d commit bdd86a2

31 files changed

+6015
-5633
lines changed

‎.gitignore‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,3 @@
1-
/node_modules
2-
yarn*
1+
/node_modules
2+
yarn*
3+
/.vscode

‎LICENSE‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
The MIT License (MIT)
22

3-
Copyright (c) 2016 Corps
3+
Copyright (c) 2016-2018 Corps
44

55
Permission is hereby granted, free of charge, to any person obtaining a copy
66
of this software and associated documentation files (the "Software"), to deal

‎README.md‎

Lines changed: 155 additions & 148 deletions
Original file line numberDiff line numberDiff line change
@@ -1,148 +1,155 @@
1-
# cPlayer
2-
3-
__Warning: Loaded well in Internet Explorer 10+, FireFox, Chrome, Edge and so on...(Modern Browser like.)__
4-
5-
---
6-
7-
## Screenshot
8-
9-
![Screenshot](http://i1.piimg.com/4851/594e267631e122c9.png)
10-
---
11-
12-
## Install && Build
13-
14-
```bash
15-
npm install
16-
npm run dist
17-
```
18-
19-
### Make a DEMO
20-
21-
```bash
22-
npm run demo
23-
```
24-
25-
## Usage
26-
27-
### HTML
28-
29-
```html
30-
<html>
31-
<head>
32-
...
33-
<link rel="stylesheet" href=".../cplayer.min.css">
34-
...
35-
</head>
36-
<body>
37-
...
38-
<div id="here"></div>
39-
...
40-
<script src=".../cplayer.min.js"></script>
41-
</body>
42-
</html>
43-
```
44-
45-
### Javascript
46-
47-
```javascript
48-
let cp = new cPlayer({
49-
"element":document.getElementById("here"),
50-
"list":[
51-
{
52-
"name":"NINELIE", //The Music's Name
53-
"artist":"Aimer/EGOist",//The Music's Artist
54-
"image":"http://xxxxx",//The Music's Cover
55-
"url":"http://xxxxx",//The Music's URL
56-
"loop":true,//If loop === true,the Music will be played again and again.
57-
"lyric":`
58-
[00:00.00]XXXXXXXX
59-
.....
60-
[00:99.99][11:99.99]XXXXX
61-
`,//The Lyric(Extra)
62-
"transLyric":`
63-
[00:00.00]XXXXXXXX
64-
.....
65-
[00:99.99][11:99.99]XXXXX
66-
`//The Translated of Lyric(Extra),Must work with `lyric`.
67-
},
68-
{
69-
.......
70-
},
71-
.........
72-
]
73-
});
74-
```
75-
76-
## APIs
77-
78-
* `cp.play()` // Play
79-
* `cp.pause()` // Pause
80-
* `cp.volume(number)` // Set Volume
81-
* `cp.isMuted()` // Return if the music is muted
82-
* `cp.isPaused()` // Return if the music is paused
83-
* `cp.last()` // Set the previous music
84-
* `cp.next()` // Set the next music
85-
* `cp.to(now)` // Set the music you set
86-
* `cp.hasLyric(id)` // Return if the music you set has lyric
87-
* `cp.showLyric()` // Show the Lyric Body,if the music at that time hasn't lyric,DO NOTHING;if the Lyric Body is already shown,HIDE IT.
88-
* `cp.hideLyric()` // Hide the Lyric Body
89-
* `cp.hasList()`
90-
* `cp.showList()`
91-
* `cp.hideList()` // (The Same As Above)
92-
* `refreshList()` // Refresh the List from `__LIST__`(unuseful)
93-
* `cp.add(options)` // Add music(the options is like above)
94-
* `cp.lyric(a)` // Set Lyric or Get Lyric
95-
* `cp.refreshLyric()` // Refresh the lyric now from `__LYRIC__`(unuseful)
96-
* `cp.updateTime()` // Set Music's Current Time
97-
* `cp.slideLyric(time)` //Core Lyric Process
98-
* `cp.on(eventName,func)` //Set Events
99-
* `cp.translate()` //__NEW!__ Make the translated(with transLyric)
100-
101-
## Events
102-
103-
Now Here are some events.
104-
105-
| Event | param | Note |
106-
|----------------|:-----:|--------------------------------------------------------------|
107-
|play | | |
108-
|pause | | |
109-
|volumechange | √ | Return the music's own event object |
110-
|timeupdate | √ | The same as above |
111-
|canplaythrough | | |
112-
|ended | | |
113-
|toggle | | |
114-
|previous | | |
115-
|next | | |
116-
|changeList | | |
117-
|changeLyric | | |
118-
|slideList | √ | If showed,the param is `true`;If not,the param is `false` |
119-
|slideLyric | √ | The same as above |
120-
|clickListPower | | |
121-
|clickLyricPower | | |
122-
|clickVolumePower| | |
123-
124-
### Usage
125-
126-
```javascript
127-
cp.on("slideLyric",([showed])=>{
128-
if(showed===true){
129-
//...
130-
}else{
131-
//...
132-
}
133-
}).on("timeupdate",([ev])=>{
134-
//...
135-
})
136-
```
137-
138-
## TODOLIST
139-
* [ ] Playlist Order Mode(Random/Asc/Desc(Order By ID))
140-
* [x] Context Menu(previous, next and translate)
141-
142-
## DEMO
143-
144-
[Click Here to See the Demo](http://cplayer.js.org)
145-
146-
## Plugins
147-
148-
Jad's cPlayer-Typecho-Plugin: [Click here](https://github.com/journey-ad/cPlayer-Typecho-Plugin)
1+
# cPlayer
2+
3+
__Warning: Loaded well in Internet Explorer 10+, FireFox, Chrome, Edge and so on...(Modern Browser like.)__
4+
5+
---
6+
7+
## Screenshot
8+
9+
![Screenshot](https://i.imgur.com/yZAGZwx.png)
10+
---
11+
12+
## Install && Build
13+
14+
```bash
15+
npm install
16+
npm run dist
17+
```
18+
19+
### Make a DEMO and serve with it
20+
21+
```bash
22+
npm run demo
23+
npm run serve
24+
```
25+
26+
## Usage
27+
28+
### HTML
29+
30+
```html
31+
<html>
32+
<body>
33+
...
34+
<div id="here"></div>
35+
...
36+
<script src=".../cplayer.min.js"></script>
37+
</body>
38+
</html>
39+
```
40+
41+
### Javascript
42+
43+
```javascript
44+
let cp = new cPlayer({
45+
"element":document.getElementById("here"),
46+
"list":[
47+
//Sync
48+
{
49+
"name":"xxx", //The Music's Name
50+
"artist":"www",//The Music's Artist
51+
"image":"http://xxxxx",//The Music's Cover
52+
"url":"http://xxxxx",//The Music's URL
53+
"loop":true,//If loop === true,the Music will be played again and again.
54+
"lyric":`
55+
[00:00.00]XXXXXXXX
56+
.....
57+
[00:99.99][11:99.99]XXXXX
58+
`,//The Lyric(Extra)
59+
"transLyric":`
60+
[00:00.00]XXXXXXXX
61+
.....
62+
[00:99.99][11:99.99]XXXXX
63+
`//The Translated of Lyric(Extra),Must work with `lyric`.
64+
},
65+
//Async
66+
{
67+
"name":"xxx",
68+
"artist":"www",
69+
"img":"http://xxxxx",
70+
"url":{
71+
"waiter":fetch("xxx").then(xxx),
72+
"resolve":function(xxx){...} //param is what you have got from waiter(),which means that the xxx includes not a Promise but sth else.And it should return a string.
73+
},
74+
"loop":true,
75+
"lyric":{
76+
"waiter":fetch("xxx").then(xxx),
77+
"resolve":function(xxx){...} //Nearly as same as above,but it should return {lyric:string|null,transLyric:string|null}
78+
}
79+
},
80+
.........
81+
]
82+
});
83+
```
84+
85+
## APIs
86+
87+
* `cp.play()` // Play
88+
* `cp.pause()` // Pause
89+
* `cp.volume(number)` // Set Volume
90+
* `cp.isMuted()` // Return if the music is muted
91+
* `cp.isPaused()` // Return if the music is paused
92+
* `cp.last()` // Set the previous music
93+
* `cp.next()` // Set the next music
94+
* `cp.to(now)` // Set the music you set
95+
* `cp.hasLyric(id)` // Return if the music you set has lyric
96+
* `cp.showLyric()` // Show the Lyric Body,if the music at that time hasn't lyric,DO NOTHING;if the Lyric Body is already shown,HIDE IT.
97+
* `cp.hideLyric()` // Hide the Lyric Body
98+
* `cp.hasList()`
99+
* `cp.showList()`
100+
* `cp.hideList()` // (The Same As Above)
101+
* `cp.add(options)` // Add music(the options is like above)
102+
* `cp.lyric(a)` //`<async>` Set Lyric or Get Lyric
103+
* `cp.refreshLyric()` //`<async>` Refresh the lyric now from `__LYRIC__`(unuseful)
104+
* `cp.updateTime()` // Set Music's Current Time
105+
* `cp.on(eventName,func)` //Set Events
106+
* `cp.translate()` //`<async>` Make the translated(with transLyric)
107+
108+
## Events
109+
110+
Now Here are some events.
111+
112+
| Event | param | Note |
113+
|----------------|:-----:|--------------------------------------------------------------|
114+
|play | | |
115+
|pause | | |
116+
|volumechange | √ | Return the music's own event object |
117+
|timeupdate | √ | The same as above |
118+
|canplaythrough | | |
119+
|ended | | |
120+
|toggle | | |
121+
|previous | | |
122+
|next | | |
123+
|changeList | | |
124+
|changeLyric | | |
125+
|slideList | √ | If showed,the param is `true`;If not,the param is `false` |
126+
|slideLyric | √ | The same as above |
127+
|clickListPower | | |
128+
|clickLyricPower | | |
129+
|clickVolumePower| | |
130+
131+
### Usage
132+
133+
```javascript
134+
cp.on("slideLyric",([showed])=>{
135+
if(showed===true){
136+
//...
137+
}else{
138+
//...
139+
}
140+
}).on("timeupdate",([ev])=>{
141+
//...
142+
})
143+
```
144+
145+
## TODOLIST
146+
* [ ] Playlist Order Mode(Random/Asc/Desc(Order By ID))
147+
* [x] Context Menu(previous, next and translate)
148+
149+
## DEMO
150+
151+
[Click Here to See the Demo](http://cplayer.js.org)
152+
153+
## Plugins
154+
155+
Jad's cPlayer-Typecho-Plugin: [Click here](https://github.com/journey-ad/cPlayer-Typecho-Plugin)

‎demo/cplayer.js‎

Lines changed: 855 additions & 752 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎demo/cplayer.js.map‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)