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

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

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

W\1i,ew>  
cPlayer }@if6(0  
一个支持定义皮肤的 HTML5 音乐播放器 at2FmBdu C  
nRd)++  
S"9zc ,]  
截图 !lo/xQ<  
CJ}5T]WZ  
TAjh"JJIV  
JNcYJ[wqv  
]v+31vdf:O  
概述 R^{)D3  
cPlayer 是一个基于 HTML5 的音乐播放插件,无需 jQuery 库支持即可调用出一个支持自定义皮肤的音乐播放器。此插件采用 ECMAScript6 编写,经 Babel 编译 ECMAScript5 后发布。! +r3IN){jz  
9Fn\FYUq  
UMX@7a,[3  
特性 " R xP^l  
支持自定义皮肤 +{sqcr1G  
提供 API 接口 % `Z! 4L  
LRC 歌词显示 [w ;kkMJAy  
演示 `6+"Z=:  
有关 cPlayer 的演示,请参考 cPlayer 演示页。 &/,|+U[  
V|\7')Qq  
UA|u U5Q  
获取 |7x\m t  
git clone https://github.com/caringor/cPlayer.git .F+@B\A<  
调用 U*.0XNKp{  
HTML Sna4wkbS  
<div id="cm1"></div> ;# Q%j%J  
<!-- ... --> Jmx Ko+-  
<script type="text/javascript" src="cPlayer.min.js" id="cmScript"></script> 6;b~Ht  
JS eYx Kp!f  
var cm1 = new cMusic({ s(W|f|R  
  'element': document.getElementById('cm1'), Uix6GT;  
  'autoplay': false, bV/jfV"%E  
  'mode': 'default', O*#*%RL|  
  'playlist': [ R :B^  
    { Agrk|wPK  
      'title': '人生讃歌', 7`u$  
      'artist': '茶色坚果巧克力', %D *OO{  
      'cover': 'http://p3.music.126.net/CRO_peQ7AN1e811BoKrQCw==/2327666116025235.jpg?param=500y500', @B}aN@!/  
      'file': 'https://m1.jixun.moe/26082159/192000/4975020ff8fcb2ecb26233cecdd80e9cb46bfb4655d3f8b4ca14e8894b4c13ac', NO :a;  
      'lrc': 'lrc/人生讃歌.lrc' 0Fu~%~#E$  
    } 2 3gPbtq/  
  ] * RtgC/  
}) z;y:9l  
参数 d^`?ed\1  
//播放器容器 TsTPj8GAl[  
element: document.getElementById('cm1') "jw<V,,  
JfPD}w  
^Ox3XC  
//是否自动播放 %iw3oh&Fkm  
autoplay: false 64 5z#_}C$  
/t(C>$ }p  
vhhC> 7  
//皮肤 (自带 default、vertical 两套皮肤) x#:| }pR  
skin: 'default' #Skv(IL  
}1rm  
[<KM?\"1<  
//播放模式 M+x,opl  
mode: 'default' x,'!eCKN  
$.bBFWk  
zen*PeIrA^  
//初始音量 #BST lz  
volume: 50 e>AE8T  
(IPY^>h  
>+[&3u  
//播放列表 \7*`}&  
playlist: [ > %KuNy{  
  { [n/hkXa$\  
    'title': '', // 歌曲标题 LlSZr)X  
    'artist': '', // 歌手名 z0do;_x]E  
    'cover': '', // 封面文件地址 )K2HK&t:  
    'file': '', // 音乐文件地址 !3ctB3eJ  
    'lrc': '' // 歌词文件地址 28=O03q  
  } M4W5f#C5Ee  
] x@Hc@R<!  
API ~#/hzS  
element.play() 播放 ZGd!IghL  
element.toggle() 播放状态切换 } GiHjzsR  
element.stop() 停止 +U3m#Y)k  
element.prev() 上一首 {.?/)  
element.next() 下一首 Ct%x&m:  
element.push() 插入播放列表 L~KM=[cn  
element.modeToggle() 播放模式切换 jt.3P  
element.seek() 跳到指定时间 (百分比) %?Ev|:i`@  
element.volume() 设置音量 (百分比) j.@\3'  
element.mute() 静音 $ O5UyKI  
element.currTrack 当前轨道 X<*U.=r)  
element.destroy() 销毁 c[ ]4n  
皮肤 Pp5^@A  
皮肤是 cPlayer 的一个特性,不同于其它播放插件,cPlayer 的皮肤引擎相对宽松,每个按钮都被当成是独立的部件。这意味着您不仅可以修改样式表,还能对播放器的 HTML 结构进行任意调整,甚至移除掉某写不需要的按钮。 x>Jr_A(  
>HS W]"k  
FJ6u.u  
结构 w/K_B:s  
细心的您会发现,在 cPlayer JS 文件所处的 同级目录 下,有一个叫做 skins 的文件夹,里面的结构是这样的: LoGVwRmoC  
c7FRI0X  
q')R4=0 K  
skins (/j); oSK  
default Ck|8qUz-  
vertical \R;`zuv   
其中,default 和 vertical 这两个文件夹,我们称它做皮肤包,文件夹名与 skin 参数的值对应。cPlayer 会根据包内的 template.css、template.html 这两个文件进行渲染。亦就是说,一个正常的 cPlayer 主题包,需具备以上两个文件。 qhz]Wm P   
yT,.z 0  
^!by3Elqqk  
部件 +@/"%9w  
cPlayer 把每个按钮都当成是独立的部件,并根据部件标记来绑定与之对应的功能,部件标记格式为 {{ value }}。目前,cPlayer 提供以下部件,请根据需要把部件标记填到目标元素的 ID 标签内。 g'm+/pU)w)  
;{%\9nS  
v3jg~"!  
{{ TrackTitle }} 歌曲名 ;IokThI  
{{ TrackArtist }} 歌手名 ?28N ^  
{{ TrackCover }} 专辑封面 7[}xP#Z  
{{ TrackPlayedTime }} 已播放时间 Sh8"F@P8  
{{ TrackDurationTime }} 歌曲总长 HZf/CE9T  
{{ ToggleBtn }} 播放状态切换按钮 G JqJlgHe  
{{ StopBtn }} 停止按钮 `u&Zrdr,  
{{ PrevBtn }} 上一曲按钮 KSN Pkd6  
{{ NextBtn }} 下一曲按钮 9*1,!%]  
{{ ModeBtn }} 播放模式切换妞 *9{Z$IA9w  
{{ MuteBtn }} 静音按钮 a,WICv0E  
{{ Lyrics }} 歌词区域 2mGaD\?K  
{{ Seek }} 进度条 vCw e'q`1  
{{ SeekPlayedPoint }} 进度条拖拽触点 8 {X"h#  
{{ SeekPlayed }} 播放进度 O6G0  
{{ SeekLoaded }} 缓冲进度 d>t<_}  
{{ VolumeBar }} 音量控制条 nPy$D-L,  
{{ VolumeFill }} 音量百分比 A"rfZ`  
更新说明 tyqT  
1.1 %Va!\#  
[增加] LRC 歌词支持 1jF`5k  
[增加] 新增获取当前歌曲信息的 API \hEN4V[  
[优化] 自带皮肤细节调整 3skC$mpJHw  
[优化] 现在可以通过 npm run build 指令进行编译了 &H`jL4S  
1.0 @-!}BUs?  
初版发布 `,(,t n_  
D,k"PaLP  
xM&Wgei]10  
项目地址:https://github.com/Caringor/cPlayer <yH4HY  
[ 此帖被寒喵在2018-12-31 23:21重新编辑 ]
本人不是云栖社区工作人员。
无论您在使用中遇到什么问题,不要出言不逊!谢谢合作!
发表主题 回复主题
« 返回列表上一主题下一主题

限100 字节
如果您提交过一次失败了,可以用”恢复数据”来恢复帖子内容
 
验证问题: 阿里云官网域名是什么? 正确答案:www.aliyun.com
上一个 下一个