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

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

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

k*E\B@W>  
cPlayer cU@SIJ)  
一个支持定义皮肤的 HTML5 音乐播放器 [t7]{d*  
hMUs" <.  
') gi%  
截图 TRQF^P3o  
 , ^;)<[  
;04Ldb1{|3  
3'qJ/*]9  
AW_(T\P:u  
概述 NufLzg{  
cPlayer 是一个基于 HTML5 的音乐播放插件,无需 jQuery 库支持即可调用出一个支持自定义皮肤的音乐播放器。此插件采用 ECMAScript6 编写,经 Babel 编译 ECMAScript5 后发布。! OCJnjlV%  
j =WST  
Jd(,/q  
特性 y[\VUzD*'  
支持自定义皮肤 l>{R`BZ/  
提供 API 接口 >`wV1^M6?  
LRC 歌词显示 r77PQQD T  
演示 X4t s)>"d  
有关 cPlayer 的演示,请参考 cPlayer 演示页。 ryCI>vJz  
h0-hT   
PSVc+s[Q+V  
获取 xw T%),  
git clone https://github.com/caringor/cPlayer.git {R61cD,n  
调用 J-) XQDD  
HTML T[4<R 5}  
<div id="cm1"></div> R~jHr )0.#  
<!-- ... --> >teO m?@U  
<script type="text/javascript" src="cPlayer.min.js" id="cmScript"></script> 0iK;Egwm  
JS ,0~9dS   
var cm1 = new cMusic({ ~J8pnTY  
  'element': document.getElementById('cm1'), :.d:9Z|_  
  'autoplay': false, _5m#2u51i  
  'mode': 'default', EV^~eTz  
  'playlist': [ 4e;y G>  
    { |t) }VM%  
      'title': '人生讃歌', Ck@J,~x1D  
      'artist': '茶色坚果巧克力', H_Kj7(=&>  
      'cover': 'http://p3.music.126.net/CRO_peQ7AN1e811BoKrQCw==/2327666116025235.jpg?param=500y500', w TGb d  
      'file': 'https://m1.jixun.moe/26082159/192000/4975020ff8fcb2ecb26233cecdd80e9cb46bfb4655d3f8b4ca14e8894b4c13ac', V$icWu  
      'lrc': 'lrc/人生讃歌.lrc' ~$f;U  
    } RJH,  
  ] K ryo}  
}) RQp|T5Er*  
参数 80Y\|)  
//播放器容器 R:AA,^Z  
element: document.getElementById('cm1') ^/ =#UQ*k  
U{$1[,f  
HCJ>X;(`f?  
//是否自动播放 #D9e$E(J^  
autoplay: false A'K%WW*'U  
Y<b-9ai<w  
wHv]ViNvXE  
//皮肤 (自带 default、vertical 两套皮肤) sv(f;ib  
skin: 'default' K+)%KP  
`)h6j)xiQ  
6PF8 /@Nh  
//播放模式 TtDg*kZ  
mode: 'default' Z!&Rr~i <  
~i_Tw#}  
=!UR=Hq  
//初始音量 qXW})(  
volume: 50 Dbaf0  
hv$m4,0WB  
cx$Gic:4  
//播放列表 d ~_`M0+  
playlist: [ Ei3zBS?J)  
  { 4YMX|1wd)  
    'title': '', // 歌曲标题 LaIJ1jf  
    'artist': '', // 歌手名 F;!2(sPS  
    'cover': '', // 封面文件地址 '[(nmx'yVJ  
    'file': '', // 音乐文件地址 's!-80sd  
    'lrc': '' // 歌词文件地址 !lmWb-v%36  
  } !b-bP,q  
] Ekm7 )d$  
API & &<9p;E  
element.play() 播放 B 2 .q3T  
element.toggle() 播放状态切换  `}no9$l~  
element.stop() 停止 p(m1O70 C  
element.prev() 上一首 m:O(+Fl  
element.next() 下一首 ZDYJhJ.  
element.push() 插入播放列表 ]Lqt( c  
element.modeToggle() 播放模式切换 - ?!:{UXl  
element.seek() 跳到指定时间 (百分比) ,Ci/xnI  
element.volume() 设置音量 (百分比) |__=d+M'  
element.mute() 静音 tue/4Q#7  
element.currTrack 当前轨道 GfyX'(ge  
element.destroy() 销毁 3Gr&p6  
皮肤 *NSlo^R-[  
皮肤是 cPlayer 的一个特性,不同于其它播放插件,cPlayer 的皮肤引擎相对宽松,每个按钮都被当成是独立的部件。这意味着您不仅可以修改样式表,还能对播放器的 HTML 结构进行任意调整,甚至移除掉某写不需要的按钮。 N 6O8Wn  
bT!($?GNdg  
qturd7  
结构 D;F{1[s(  
细心的您会发现,在 cPlayer JS 文件所处的 同级目录 下,有一个叫做 skins 的文件夹,里面的结构是这样的: :Px\qh}K  
<3O T>E[  
!m{2WW-  
skins I/COqU7~  
default g.#+z'l  
vertical I(n* _bFq  
其中,default 和 vertical 这两个文件夹,我们称它做皮肤包,文件夹名与 skin 参数的值对应。cPlayer 会根据包内的 template.css、template.html 这两个文件进行渲染。亦就是说,一个正常的 cPlayer 主题包,需具备以上两个文件。 [~k]{[NJ  
JK~ m(oQ  
=O{~Q3z@s  
部件 c 8QnN:n  
cPlayer 把每个按钮都当成是独立的部件,并根据部件标记来绑定与之对应的功能,部件标记格式为 {{ value }}。目前,cPlayer 提供以下部件,请根据需要把部件标记填到目标元素的 ID 标签内。 K{ }4zuZ  
q:HoKJv4  
,i ++fOnQ  
{{ TrackTitle }} 歌曲名 VKLU0*2R  
{{ TrackArtist }} 歌手名 _& 4its  
{{ TrackCover }} 专辑封面 Wc#:f 8dr  
{{ TrackPlayedTime }} 已播放时间 >e8JK*Blz  
{{ TrackDurationTime }} 歌曲总长 ~'  =lou  
{{ ToggleBtn }} 播放状态切换按钮 %N~C vN@T  
{{ StopBtn }} 停止按钮 /?zW<QUI  
{{ PrevBtn }} 上一曲按钮 G79C {|c\  
{{ NextBtn }} 下一曲按钮 gf$HuCh|  
{{ ModeBtn }} 播放模式切换妞 ?'~;Q)  
{{ MuteBtn }} 静音按钮 d0C8*ifFO  
{{ Lyrics }} 歌词区域 ^[M~K5Y  
{{ Seek }} 进度条 +|nsu4t,<  
{{ SeekPlayedPoint }} 进度条拖拽触点 +6%7C C6  
{{ SeekPlayed }} 播放进度 -Q`C q |s  
{{ SeekLoaded }} 缓冲进度 ehc<|O9tY  
{{ VolumeBar }} 音量控制条 z(d4)z 8'6  
{{ VolumeFill }} 音量百分比 h1%y:[_  
更新说明 5|WOBOh>`&  
1.1 V}`M<A6:  
[增加] LRC 歌词支持 I>m;G `  
[增加] 新增获取当前歌曲信息的 API HRRngk#lV  
[优化] 自带皮肤细节调整 X"J%R/f  
[优化] 现在可以通过 npm run build 指令进行编译了 t61'LCEis  
1.0 gO{W#%  
初版发布 ~ iT{8  
QBjY&(vY  
7jZrU|:yu(  
项目地址:https://github.com/Caringor/cPlayer mSj76' L#  
[ 此帖被寒喵在2018-12-31 23:21重新编辑 ]
本人不是云栖社区工作人员。
无论您在使用中遇到什么问题,不要出言不逊!谢谢合作!
发表主题 回复主题
« 返回列表上一主题下一主题

限100 字节
如果您提交过一次失败了,可以用”恢复数据”来恢复帖子内容
 
验证问题: ECS是阿里云提供的什么服务? 正确答案:云服务器
上一个 下一个