Wow, 又一个 HTML5 音乐播放器


Maybe It’s the best code I wrote.

Warning: This can only be loaded in the browser with ES6

Install && Build

npm install npm run dist

Make a DEMO

npm 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"),     "mdicon":true, //If your page has been loaded with the Material Icons,you can turn it to false;if not,you can turn it to true or fill it with a URL string.     "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)         },         {             .......         },         .........     ] });


  • // Play
  • cp.pause() // Pause
  • cp.volume(number) // Set Volume
  • cp.isMuted() // Return if the music is muted
  • cp.isPaused() // Return if the music is paused
  • cp.last() // Set the previous music
  • // Set the next music
  • // Set the music you set
  • cp.hasLyric(id) // Return if the music you set has lyric
  • 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.
  • cp.hideLyric() // Hide the Lyric Body
  • cp.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 Lyric
  • cp.refreshLyric() // Refresh the lyric now from __LYRIC__ (unuseful)
  • cp.updateTime() // Set Music’s Current Time
  • cp.slideLyric(time) //Core Lyric Process


Click Here to See the Demo



PS:推荐一个微信公众号: askHarries 或者qq群:474807195,里面会分享一些资深架构师录制的视频录像:有Spring,MyBatis,Netty源码分析,高并发、高性能、分布式、微服务架构的原理,JVM性能优化这些成为架构师必备的知识体系。还能领取免费的学习资源,目前受益良多

转载请注明原文出处:Harries Blog™ » Wow, 又一个 HTML5 音乐播放器

赞 (0)
分享到:更多 ()

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址