阿里云
阿里云多端小程序中小企业获客首选
发表主题 回复主题
  • 745阅读
  • 0回复

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

级别: 论坛版主
发帖
371
云币
447

fO;#;p.  
cPlayer vp"b_x1-  
一个支持定义皮肤的 HTML5 音乐播放器 epcBr_}  
9L$bJO-3  
u@;6r"8q  
截图 &.> 2@  
0gI^GJN%Y!  
9K9{$jN~  
3C+!Y#F  
l"I G;qO.  
概述 O% 1X[  
cPlayer 是一个基于 HTML5 的音乐播放插件,无需 jQuery 库支持即可调用出一个支持自定义皮肤的音乐播放器。此插件采用 ECMAScript6 编写,经 Babel 编译 ECMAScript5 后发布。! )} I>"n  
&2~c,] 9C  
ewOd =%  
特性 q;W(;B  
支持自定义皮肤 !9B`  
提供 API 接口 r#% e$  
LRC 歌词显示 +@U}gk;#c  
演示 Gu3# y"a>  
有关 cPlayer 的演示,请参考 cPlayer 演示页。 {Qe 7/ln!  
hSg4A=y  
+"u6+[E  
获取 _{eH" ,(  
git clone https://github.com/caringor/cPlayer.git nB; yS<  
调用 t_VF=B^LuR  
HTML ]M:=\h,t>  
<div id="cm1"></div> 6X2~30pdE  
<!-- ... --> wM]j#  
<script type="text/javascript" src="cPlayer.min.js" id="cmScript"></script> ,?'":T1[  
JS ai3wSUYJi  
var cm1 = new cMusic({ 3NLC~CJ  
  'element': document.getElementById('cm1'), gcaXN6C  
  'autoplay': false, CDNh9`  
  'mode': 'default', p$qpC$F  
  'playlist': [ QR.]?t;1  
    { #o(c=  
      'title': '人生讃歌', & V*_\  
      'artist': '茶色坚果巧克力', 5kRP Sfh  
      'cover': 'http://p3.music.126.net/CRO_peQ7AN1e811BoKrQCw==/2327666116025235.jpg?param=500y500', gbC!>LV  
      'file': 'https://m1.jixun.moe/26082159/192000/4975020ff8fcb2ecb26233cecdd80e9cb46bfb4655d3f8b4ca14e8894b4c13ac', shn{]Y  
      'lrc': 'lrc/人生讃歌.lrc' wDL dmrB  
    } g9rsw7  
  ] 7QOQG:-  
}) ggy 7p44  
参数 ug|'}\LY  
//播放器容器 jkN-(v(T  
element: document.getElementById('cm1') /+11`B09  
iG.qMf.  
0Rme}&$  
//是否自动播放 wva| TZ  
autoplay: false Sh]g]xR  
NV[_XXTv7  
4!I;U>b b  
//皮肤 (自带 default、vertical 两套皮肤) Q9[$ 8  
skin: 'default' miq"3  
';CL;A;  
Q9\6Pn ]T  
//播放模式 f`[gRcZ-  
mode: 'default' _:0)uR LS  
_6"YWR  
SviGLv;oR  
//初始音量 !6d6b@Mv  
volume: 50 U,Duq^l~s  
}gfs  
DNh{J^S"}w  
//播放列表 RH"&B`  
playlist: [ z.xOT;t  
  { ? eU=xO  
    'title': '', // 歌曲标题 ,o_Ur.UJ  
    'artist': '', // 歌手名 <21@jdu3n,  
    'cover': '', // 封面文件地址 lwhVP$q}  
    'file': '', // 音乐文件地址 {|jrYU.k~  
    'lrc': '' // 歌词文件地址 s-z*Lq*  
  } E2 5:e EXa  
] CQ(;L{}  
API jDaWmy<ha  
element.play() 播放 Ep@NT+VnI  
element.toggle() 播放状态切换 dWCUZ,6}  
element.stop() 停止 B!#F!Wk"  
element.prev() 上一首 Ga%x(1U[&  
element.next() 下一首 p-6(>,+E[  
element.push() 插入播放列表 @`hnp:  
element.modeToggle() 播放模式切换 RgPY,\_9+  
element.seek() 跳到指定时间 (百分比) ;M95A  
element.volume() 设置音量 (百分比) ?;//%c8,.  
element.mute() 静音 1e0O-aT#Q  
element.currTrack 当前轨道 Ke_ & dgsq  
element.destroy() 销毁 0UHX Li47Y  
皮肤 bhI yq4N  
皮肤是 cPlayer 的一个特性,不同于其它播放插件,cPlayer 的皮肤引擎相对宽松,每个按钮都被当成是独立的部件。这意味着您不仅可以修改样式表,还能对播放器的 HTML 结构进行任意调整,甚至移除掉某写不需要的按钮。 ^J([w~&  
Tt0:rQ.  
vE9M2[TJA  
结构 jMT];%$[  
细心的您会发现,在 cPlayer JS 文件所处的 同级目录 下,有一个叫做 skins 的文件夹,里面的结构是这样的: Sb9In_* 0  
LEUD6 M+~t  
>-~2:d\M3  
skins `$X|VAS2  
default L 1fK  
vertical m^8KHa  
其中,default 和 vertical 这两个文件夹,我们称它做皮肤包,文件夹名与 skin 参数的值对应。cPlayer 会根据包内的 template.css、template.html 这两个文件进行渲染。亦就是说,一个正常的 cPlayer 主题包,需具备以上两个文件。 bwo{ Lw~  
""dX4^gtU  
ql Uw;{;p  
部件 WF6'mg^^?  
cPlayer 把每个按钮都当成是独立的部件,并根据部件标记来绑定与之对应的功能,部件标记格式为 {{ value }}。目前,cPlayer 提供以下部件,请根据需要把部件标记填到目标元素的 ID 标签内。 ;T|y^D  
A5lP%&tu(  
4zF|}aiQ  
{{ TrackTitle }} 歌曲名 QSn%~o05  
{{ TrackArtist }} 歌手名 yxECK&&P0#  
{{ TrackCover }} 专辑封面 rQncW~  
{{ TrackPlayedTime }} 已播放时间 +Oae3VFf;  
{{ TrackDurationTime }} 歌曲总长 a=55bEn  
{{ ToggleBtn }} 播放状态切换按钮 A/ eZ!"Y  
{{ StopBtn }} 停止按钮 [ imC21U  
{{ PrevBtn }} 上一曲按钮 5X7kZ!r  
{{ NextBtn }} 下一曲按钮 S;o U'KOY  
{{ ModeBtn }} 播放模式切换妞 Kb_R "b3v  
{{ MuteBtn }} 静音按钮 brQkVt_)EE  
{{ Lyrics }} 歌词区域 a{lDHk`Wf  
{{ Seek }} 进度条 S=Ihg  
{{ SeekPlayedPoint }} 进度条拖拽触点 mErXdb|L  
{{ SeekPlayed }} 播放进度 u@`)u#  
{{ SeekLoaded }} 缓冲进度 oCLs"L-r{  
{{ VolumeBar }} 音量控制条 a0"gt"q A  
{{ VolumeFill }} 音量百分比 ${$XJs4  
更新说明 67I6]3[ Z  
1.1 ~3 {C &c  
[增加] LRC 歌词支持 kT(}>=]g  
[增加] 新增获取当前歌曲信息的 API !b O8apn  
[优化] 自带皮肤细节调整 lu^ c^p;  
[优化] 现在可以通过 npm run build 指令进行编译了 wz*QB6QtU  
1.0 {cF7h)j  
初版发布 WgdL^PN(h  
@<]xbWhuw  
k_9tz}Z  
项目地址:https://github.com/Caringor/cPlayer Ejdw"P"  
[ 此帖被寒喵在2018-12-31 23:21重新编辑 ]
本人不是云栖社区工作人员。
无论您在使用中遇到什么问题,不要出言不逊!谢谢合作!
发表主题 回复主题
« 返回列表上一主题下一主题

限100 字节
如果您在写长篇帖子又不马上发表,建议存为草稿
 
验证问题: 19 - 5 = ?
上一个 下一个
      ×
      全新阿里云开发者社区, 去探索开发者的新世界吧!
      一站式的体验,更多的精彩!
      通过下面领域大门,一起探索新的技术世界吧~ (点击图标进入)