Warning: Loaded well in Internet Explorer 10+, FireFox, Chrome, Edge and so on...(Modern Browser like.)
npm install
npm run distnpm run demo<html>
<head>
...
<link rel="stylesheet" href=".../cplayer.min.css">
...
</head>
<body>
...
<div id="here"></div>
...
<script src=".../cplayer.min.js"></script>
</body>
</html>let cp = new cPlayer({
"element":document.getElementById("here"),
"list":[
{
"name":"NINELIE", //The Music's Name
"artist":"Aimer/EGOist",//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`.
},
{
.......
},
.........
]
});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)refreshList()// Refresh the List from__LIST__(unuseful)cp.add(options)// Add music(the options is like above)cp.lyric(a)// Set Lyric or Get Lyriccp.refreshLyric()// Refresh the lyric now from__LYRIC__(unuseful)cp.updateTime()// Set Music's Current Timecp.slideLyric(time)//Core Lyric Processcp.on(eventName,func)//Set Eventscp.translate()//NEW! Make the translated(with transLyric)
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 |
cp.on("slideLyric",([showed])=>{
if(showed===true){
//...
}else{
//...
}
}).on("timeupdate",([ev])=>{
//...
})- Playlist Order Mode(Random/Asc/Desc(Order By ID))
- Context Menu(previous, next and translate)