2.6.1 • Published 8 years ago
cPlayer v2.6.1
cPlayer
Warning: Loaded well in Internet Explorer 10+, FireFox, Chrome, Edge and so on...(Modern Browser like.)
Screenshot
Install && Build
npm install
npm run distMake a DEMO and serve with it
npm run demo
npm run serveUsage
HTML
<html>
<body>
...
<div id="here"></div>
...
<script src=".../cplayer.min.js"></script>
</body>
</html>Javascript
let cp = new cPlayer({
"element":document.getElementById("here"),
"list":[
//Sync
{
"name":"xxx", //The Music's Name
"artist":"www",//The Music's Artist
"image":"http://xxxxx",//The Music's Cover
"url":"http://xxxxx",//The Music's URL
"loop":true,//If loop === true,the Music will be played again and again.
"lyric":`
[00:00.00]XXXXXXXX
.....
[00:99.99][11:99.99]XXXXX
`,//The Lyric(Extra)
"transLyric":`
[00:00.00]XXXXXXXX
.....
[00:99.99][11:99.99]XXXXX
`//The Translated of Lyric(Extra),Must work with `lyric`.
},
//Async
{
"name":"xxx",
"artist":"www",
"img":"http://xxxxx",
"url":{
"waiter":fetch("xxx").then(xxx),
"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.
},
"loop":true,
"lyric":{
"waiter":fetch("xxx").then(xxx),
"resolve":function(xxx){...} //Nearly as same as above,but it should return {lyric:string|null,transLyric:string|null}
}
},
.........
]
});APIs
cp.play()// Playcp.pause()// Pausecp.volume(number)// Set Volumecp.isMuted()// Return if the music is mutedcp.isPaused()// Return if the music is pausedcp.last()// Set the previous musiccp.next()// Set the next musiccp.to(now)// Set the music you setcp.hasLyric(id)// Return if the music you set has lyriccp.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.cp.hideLyric()// Hide the Lyric Bodycp.hasList()cp.showList()cp.hideList()// (The Same As Above)cp.add(options)// Add music(the options is like above)cp.lyric(a)//<async>Set Lyric or Get Lyriccp.refreshLyric()//<async>Refresh the lyric now from__LYRIC__(unuseful)cp.updateTime()// Set Music's Current Timecp.on(eventName,func)//Set Eventscp.translate()//<async>Make the translated(with transLyric)
Events
Now Here are some events.
| Event | param | Note |
|---|---|---|
| play | ||
| pause | ||
| volumechange | √ | Return the music's own event object |
| timeupdate | √ | The same as above |
| canplaythrough | ||
| ended | ||
| toggle | ||
| previous | ||
| next | ||
| changeList | ||
| changeLyric | ||
| slideList | √ | If showed,the param is true;If not,the param is false |
| slideLyric | √ | The same as above |
| clickListPower | ||
| clickLyricPower | ||
| clickVolumePower |
Usage
cp.on("slideLyric",([showed])=>{
if(showed===true){
//...
}else{
//...
}
}).on("timeupdate",([ev])=>{
//...
})TODOLIST
- Playlist Order Mode(Random/Asc/Desc(Order By ID))
- Context Menu(previous, next and translate)
DEMO
Plugins
Jad's cPlayer-Typecho-Plugin: Click here
2.6.1
8 years ago
2.4.8
9 years ago
2.4.7
9 years ago
2.4.6
9 years ago
2.4.5
9 years ago
2.4.4
9 years ago
2.4.3
9 years ago
2.4.2
9 years ago
2.4.1
9 years ago
2.4.0
9 years ago
2.3.12
10 years ago
2.3.11
10 years ago
2.3.8
10 years ago
2.3.7
10 years ago
2.3.6
10 years ago
2.3.5
10 years ago
2.3.0
10 years ago
2.0.2
10 years ago
2.0.1
10 years ago