# cPlayer
Warning: Loaded well in Internet Explorer 10+, FireFox, Chrome, Edge and so on...(Modern Browser like.)
Screenshot
Install && Build
npm installnpm run distMake a DEMO and serve with it
npm run demonpm run serveUsage
HTML
... ... Javascript
let cp = "element":document "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": {...} //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": {...} //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
cpTODOLIST
- Playlist Order Mode(Random/Asc/Desc(Order By ID))
- Context Menu(previous, next and translate)
DEMO
Plugins
Jad's cPlayer-Typecho-Plugin: Click here