cPlayer
Maybe It's the best code I wrote.
Warning: This can only be loaded well in the MODERN-BROWSER(eg. Edge14+,Firefox(Current Version,Chrome(Current Version)...))
Install && Build
npm install
npm run dist
Make a DEMO
npm run demo
Usage
HTML
<html>
<head>
...
<link rel="stylesheet" href=".../cplayer.min.css">
...
</head>
<body>
...
<div id="here"></div>
...
<script src=".../cplayer.min.js"></script>
</body>
</html>
Javascript
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)
},
{
.......
},
.........
]
});
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)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)
//NEW! Set Events
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))