一个支持自定义皮肤的 HTML5 音乐播放器
cPlayer 是一个基于 HTML5 的音乐播放插件，无需 jQuery 库支持即可调用出一个支持自定义皮肤的音乐播放器。此插件采用 ECMAScript6 编写，经 Babel 编译 ECMAScript5 后发布。!
- 支持自定义皮肤
- 提供 API 接口
- LRC 歌词显示
有关 cPlayer 的演示，请参考 cPlayer 演示页。
git clone https://github.com/caringor/cPlayer.git <div id="cm1"></div> <!-- ... --> <script type="text/javascript" src="cPlayer.min.js" id="cmScript"></script> var cm1 = new cMusic({ 'element': document.getElementById('cm1'), 'autoplay': false, 'mode': 'default', 'playlist': [ { 'title': '人生讃歌', 'artist': '茶色坚果巧克力', 'cover': 'http://p3.music.126.net/CRO_peQ7AN1e811BoKrQCw==/2327666116025235.jpg?param=500y500', 'file': 'https://m1.jixun.moe/26082159/192000/4975020ff8fcb2ecb26233cecdd80e9cb46bfb4655d3f8b4ca14e8894b4c13ac', 'lrc': 'lrc/人生讃歌.lrc' } ] }) //播放器容器 element: document.getElementById('cm1') //是否自动播放 autoplay: false //皮肤 (自带 default、vertical 两套皮肤) skin: 'default' //播放模式 mode: 'default' //初始音量 volume: 50 //播放列表 playlist: [ { 'title': '', // 歌曲标题 'artist': '', // 歌手名 'cover': '', // 封面文件地址 'file': '', // 音乐文件地址 'lrc': '' // 歌词文件地址 } ]
element.play()播放element.toggle()播放状态切换element.stop()停止element.prev()上一首element.next()下一首element.push()插入播放列表element.modeToggle()播放模式切换element.seek()跳到指定时间 (百分比)element.volume()设置音量 (百分比)element.mute()静音element.currTrack当前轨道element.destroy()销毁
皮肤是 cPlayer 的一个特性，不同于其它播放插件，cPlayer 的皮肤引擎相对宽松，每个按钮都被当成是独立的部件。这意味着您不仅可以修改样式表，还能对播放器的 HTML 结构进行任意调整，甚至移除掉某写不需要的按钮。
细心的您会发现，在 cPlayer JS 文件所处的 同级目录 下，有一个叫做 skins 的文件夹，里面的结构是这样的：
- skins
- default
- vertical
其中，default 和 vertical 这两个文件夹，我们称它做皮肤包，文件夹名与 skin 参数的值对应。cPlayer 会根据包内的 template.css、template.html 这两个文件进行渲染。亦就是说，一个正常的 cPlayer 主题包，需具备以上两个文件。
cPlayer 把每个按钮都当成是独立的部件，并根据部件标记来绑定与之对应的功能，部件标记格式为 {{ value }}。目前，cPlayer 提供以下部件，请根据需要把部件标记填到目标元素的 ID 标签内。
{{ TrackTitle }}歌曲名{{ TrackArtist }}歌手名{{ TrackCover }}专辑封面{{ TrackPlayedTime }}已播放时间{{ TrackDurationTime }}歌曲总长{{ ToggleBtn }}播放状态切换按钮{{ StopBtn }}停止按钮{{ PrevBtn }}上一曲按钮{{ NextBtn }}下一曲按钮{{ ModeBtn }}播放模式切换妞{{ MuteBtn }}静音按钮{{ Lyrics }}歌词区域{{ Seek }}进度条
{{ SeekPlayedPoint }}进度条拖拽触点
{{ SeekPlayed }}播放进度
{{ SeekLoaded }}缓冲进度{{ VolumeBar }}音量控制条
{{ VolumeFill }}音量百分比
- [增加] LRC 歌词支持
- [增加] 新增获取当前歌曲信息的 API
- [优化] 自带皮肤细节调整
- [优化] 现在可以通过 npm run build 指令进行编译了
- 初版发布
cPlayer 采用 MIT 许可证进行发布，有关 cPlayer 的使用问题欢迎提交 Issue 或使用以下方式与我联系。
- Telegram: @lkwing
- QQ: 474599981
用户交流群: 635767413