阿里云
阿里云大学认证0元起
发表主题 回复主题
  • 168阅读
  • 0回复

[网站运营]支持自定义皮肤的 HTML5 音乐播放器

级别: 论坛版主
发帖
370
云币
634

Vx0MG{vG1  
cPlayer Fj '\v#h  
一个支持定义皮肤的 HTML5 音乐播放器 h;&&@5@lM  
"-G.V#zI  
+# m   
截图 1Al=v  
y}s 0J K  
rCV$N&rK  
?14X8Mb8W_  
1',+&2)oj  
概述 r%O rH-T  
cPlayer 是一个基于 HTML5 的音乐播放插件,无需 jQuery 库支持即可调用出一个支持自定义皮肤的音乐播放器。此插件采用 ECMAScript6 编写,经 Babel 编译 ECMAScript5 后发布。! "Wzij&WkQ  
P#M<CG9  
O% j,:t'"  
特性 9 &?tQ"@x  
支持自定义皮肤 B{=,VwaP_  
提供 API 接口 wpPxEp/  
LRC 歌词显示 B$iMU?B3  
演示 6PVlZ  
有关 cPlayer 的演示,请参考 cPlayer 演示页。 B)LXxdkOn  
sZ\i(eIU  
~XN]?5GQf  
获取 mo97GW  
git clone https://github.com/caringor/cPlayer.git lUm}nsp=X  
调用 ]7Xs=>"Iw  
HTML c{r6a=C  
<div id="cm1"></div> `K ~>!d_  
<!-- ... --> eFeCS{LV+  
<script type="text/javascript" src="cPlayer.min.js" id="cmScript"></script> ** "s~  
JS )Q N=>J  
var cm1 = new cMusic({ v: !7n  
  'element': document.getElementById('cm1'), p5D3J[?N  
  'autoplay': false, $(!D/bvJ  
  'mode': 'default', x<j($iv  
  'playlist': [ %QlBFl0a  
    { }tg:DG  
      'title': '人生讃歌', L>K39z~,  
      'artist': '茶色坚果巧克力', uc{Qhw!;:  
      'cover': 'http://p3.music.126.net/CRO_peQ7AN1e811BoKrQCw==/2327666116025235.jpg?param=500y500', 1Rb<(%   
      'file': 'https://m1.jixun.moe/26082159/192000/4975020ff8fcb2ecb26233cecdd80e9cb46bfb4655d3f8b4ca14e8894b4c13ac', ocuNrkZ  
      'lrc': 'lrc/人生讃歌.lrc' 1+y6W1m^R  
    } ]f+D& qZ B  
  ] Hr64M0V3B  
}) 67hPQ/S1  
参数 q=L* 99S  
//播放器容器 vo^9qSX f  
element: document.getElementById('cm1') Z!BQtICs  
/A`zy  
#+5mpDh  
//是否自动播放 z]4g`K+  
autoplay: false 6d?2{_},  
3qd-,qC  
cbHn\m)J,  
//皮肤 (自带 default、vertical 两套皮肤) s9Q)6=mE  
skin: 'default' T"0)%k8lJ  
<38@b ]+  
(YWc%f4  
//播放模式 r:\5/0(  
mode: 'default' nfPl#]ef*  
lPSDY&`P  
.}u(&  
//初始音量 lDM~Z3(/b  
volume: 50 Bv|9{:1%X}  
?9ho|  
It:QXLi;  
//播放列表 &_x/Dzu!z  
playlist: [ .Yv.-A=ZIg  
  { ;w&yGm  
    'title': '', // 歌曲标题 /8-VC"  
    'artist': '', // 歌手名 ^cXL4*_=  
    'cover': '', // 封面文件地址 9^h%}>  
    'file': '', // 音乐文件地址 qc4 "0Ap'  
    'lrc': '' // 歌词文件地址 QZq9$;>dW  
  } ;77o%J'l  
] ] ,aAzjZ  
API uT t:/gm  
element.play() 播放 %Yn)t3d  
element.toggle() 播放状态切换 ?cxK~Y\  
element.stop() 停止 QKkr~?sTO  
element.prev() 上一首 V.[#$ip6:  
element.next() 下一首 U@AfRUF&  
element.push() 插入播放列表 \@t5S  
element.modeToggle() 播放模式切换 5K-)X9z?  
element.seek() 跳到指定时间 (百分比) NKh {iSLm  
element.volume() 设置音量 (百分比) ~F6gF7]z  
element.mute() 静音 /6*.%M>r  
element.currTrack 当前轨道 )GKgK;=~  
element.destroy() 销毁 D}U<7=\3H  
皮肤 T/6=A$4 #  
皮肤是 cPlayer 的一个特性,不同于其它播放插件,cPlayer 的皮肤引擎相对宽松,每个按钮都被当成是独立的部件。这意味着您不仅可以修改样式表,还能对播放器的 HTML 结构进行任意调整,甚至移除掉某写不需要的按钮。 oVsazYJ|?  
>RnMzH/9  
;i?!qB>baX  
结构 w[G_w:$a  
细心的您会发现,在 cPlayer JS 文件所处的 同级目录 下,有一个叫做 skins 的文件夹,里面的结构是这样的: .O.R  
'vIkA=  
<%7 V`,*g/  
skins sZDJ+  
default W>nb9Isp  
vertical 5z>\'a1U  
其中,default 和 vertical 这两个文件夹,我们称它做皮肤包,文件夹名与 skin 参数的值对应。cPlayer 会根据包内的 template.css、template.html 这两个文件进行渲染。亦就是说,一个正常的 cPlayer 主题包,需具备以上两个文件。 a$O]'}]`  
EC&,0i4n:  
W-QPO  
部件 [![ (h %  
cPlayer 把每个按钮都当成是独立的部件,并根据部件标记来绑定与之对应的功能,部件标记格式为 {{ value }}。目前,cPlayer 提供以下部件,请根据需要把部件标记填到目标元素的 ID 标签内。 iCKwd9?)  
(\>'yW{f  
34:EpZO@  
{{ TrackTitle }} 歌曲名 VrxH6Y  
{{ TrackArtist }} 歌手名 PtOnj)Q  
{{ TrackCover }} 专辑封面 c10).zZ  
{{ TrackPlayedTime }} 已播放时间 ~`H<sJ?9  
{{ TrackDurationTime }} 歌曲总长 r/2:O92E  
{{ ToggleBtn }} 播放状态切换按钮 8E[`H  
{{ StopBtn }} 停止按钮 fC|u  
{{ PrevBtn }} 上一曲按钮 - S-1<xR  
{{ NextBtn }} 下一曲按钮 N Z`hy>LF^  
{{ ModeBtn }} 播放模式切换妞 FM[To  
{{ MuteBtn }} 静音按钮 EPRs%(w`  
{{ Lyrics }} 歌词区域 j56 An6g  
{{ Seek }} 进度条 %T\x~)  
{{ SeekPlayedPoint }} 进度条拖拽触点 H/Q)zDP  
{{ SeekPlayed }} 播放进度 2N 4>  
{{ SeekLoaded }} 缓冲进度 f tDV3If  
{{ VolumeBar }} 音量控制条 KK$A 4`YoR  
{{ VolumeFill }} 音量百分比 7bS[\5  
更新说明 QGy=JHb  
1.1 *, K \A  
[增加] LRC 歌词支持 )7J>:9h  
[增加] 新增获取当前歌曲信息的 API W<o0Z OO  
[优化] 自带皮肤细节调整 ]E^f8s0#V  
[优化] 现在可以通过 npm run build 指令进行编译了 gw T,D.'Ut  
1.0 ~#\#!H7  
初版发布 NhX.yLb$   
2z3A"HrlA  
8$Yf#;m[  
项目地址:https://github.com/Caringor/cPlayer F9w&!yW:  
[ 此帖被寒喵在2018-12-31 23:21重新编辑 ]
本人不是云栖社区工作人员。
无论您在使用中遇到什么问题,不要出言不逊!谢谢合作!
发表主题 回复主题
« 返回列表上一主题下一主题

限100 字节
如果您在写长篇帖子又不马上发表,建议存为草稿
 
验证问题: 95 - 80 = ?
上一个 下一个