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

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

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

-]N2V'QB  
cPlayer egoR])2>  
一个支持定义皮肤的 HTML5 音乐播放器 5y#,z`S  
_"8n&=+  
xT*'p&ap  
截图 :5YIoC  
yV^Yp=f_  
sI>w#1.m/&  
CK_dEh2c  
MAa9JA8kw)  
概述 bt}8ymcG  
cPlayer 是一个基于 HTML5 的音乐播放插件,无需 jQuery 库支持即可调用出一个支持自定义皮肤的音乐播放器。此插件采用 ECMAScript6 编写,经 Babel 编译 ECMAScript5 后发布。! Q):#6|u+  
c`O~I<(Pm  
%4~"$kE  
特性 ~ #jQFyOh  
支持自定义皮肤 G]lGoa}]`u  
提供 API 接口 LuS@Kf8N+  
LRC 歌词显示 :jiEn y  
演示 Ycr3$n]e  
有关 cPlayer 的演示,请参考 cPlayer 演示页。 &L6Ivpj-  
\@Wv{0a(  
J;4x$BI  
获取 h+km?j  
git clone https://github.com/caringor/cPlayer.git !BQt+4G7  
调用 ;lMvxt:  
HTML {vu\qXmMv  
<div id="cm1"></div> x@#>l8k?  
<!-- ... --> AR| 4^  
<script type="text/javascript" src="cPlayer.min.js" id="cmScript"></script> 3vrVX<_  
JS vC]X>P5Px  
var cm1 = new cMusic({ 5U 84 *RY  
  'element': document.getElementById('cm1'), Q 3WD!Z8y  
  'autoplay': false, J*@pM  
  'mode': 'default', VDxm|7  
  'playlist': [ ( 5LCy?-6  
    { k+J3Kl09hM  
      'title': '人生讃歌', PT>b%7Of  
      'artist': '茶色坚果巧克力', teok*'b:  
      'cover': 'http://p3.music.126.net/CRO_peQ7AN1e811BoKrQCw==/2327666116025235.jpg?param=500y500', f+e"`80$*C  
      'file': 'https://m1.jixun.moe/26082159/192000/4975020ff8fcb2ecb26233cecdd80e9cb46bfb4655d3f8b4ca14e8894b4c13ac', eMGJx"a  
      'lrc': 'lrc/人生讃歌.lrc' Ca-"3aQkc  
    } gT}H B.  
  ] KhjC'CU,  
}) 86#l$QaK{  
参数 rm-d),Zt  
//播放器容器 0cm34\*  
element: document.getElementById('cm1') c>bns/f  
VEps|d3,,  
a`wjZ"}'[  
//是否自动播放 2 ZK]}&yC  
autoplay: false "uH>S+%|b  
+C% 6jGGh  
w:\} B'u  
//皮肤 (自带 default、vertical 两套皮肤) Q<sqlh!h  
skin: 'default' (T1< (YZ  
a_N7X  
dIC\U  
//播放模式 ;Gr {  
mode: 'default' 6A"$9sj6  
c7mKE`  
5]O{tSj  
//初始音量 V.Hv6  
volume: 50 D07M!U  
3Gs\Q{O:  
$>)0t@[f  
//播放列表 '!m6^*m|c  
playlist: [ GDLw_usV  
  { xs= ~N  
    'title': '', // 歌曲标题 D!`;vZ\>  
    'artist': '', // 歌手名 9=>q0D2  
    'cover': '', // 封面文件地址 ZvRa"j  
    'file': '', // 音乐文件地址 sq$v6x sl  
    'lrc': '' // 歌词文件地址 (?e%w}  
  } ]\*^G@HA2  
] +O/b[O'0  
API F`g(vD >  
element.play() 播放 =MNp;  
element.toggle() 播放状态切换 HA'~1$#z  
element.stop() 停止 4c5BlD  
element.prev() 上一首 B4.: 9Od3  
element.next() 下一首 bRvGetX  
element.push() 插入播放列表 O`Tz^Q /D  
element.modeToggle() 播放模式切换 8'PZA,CW  
element.seek() 跳到指定时间 (百分比) T;6MUmyC  
element.volume() 设置音量 (百分比) C|ZPnm>f30  
element.mute() 静音 =RB {.%  
element.currTrack 当前轨道 c}(H*VY2n  
element.destroy() 销毁 5cP yi/  
皮肤 R XCn;nM4  
皮肤是 cPlayer 的一个特性,不同于其它播放插件,cPlayer 的皮肤引擎相对宽松,每个按钮都被当成是独立的部件。这意味着您不仅可以修改样式表,还能对播放器的 HTML 结构进行任意调整,甚至移除掉某写不需要的按钮。  [ <X%  
"\wMs  
[ U:C62oK,  
结构 ? i _ACKpw  
细心的您会发现,在 cPlayer JS 文件所处的 同级目录 下,有一个叫做 skins 的文件夹,里面的结构是这样的: Q ^b&   
ZJ3g,dc  
S f?;j{?G  
skins v~mVf.j1  
default &5 "!  0  
vertical G4(R/<J,BQ  
其中,default 和 vertical 这两个文件夹,我们称它做皮肤包,文件夹名与 skin 参数的值对应。cPlayer 会根据包内的 template.css、template.html 这两个文件进行渲染。亦就是说,一个正常的 cPlayer 主题包,需具备以上两个文件。 =UKxf  
3RaduN]  
p}^G#h{  
部件 RqA>"[L  
cPlayer 把每个按钮都当成是独立的部件,并根据部件标记来绑定与之对应的功能,部件标记格式为 {{ value }}。目前,cPlayer 提供以下部件,请根据需要把部件标记填到目标元素的 ID 标签内。 O,r;-t4vYU  
t]HY@@0g  
Ll]5u~  
{{ TrackTitle }} 歌曲名 ]y@A=nR  
{{ TrackArtist }} 歌手名 VM$n|[C~  
{{ TrackCover }} 专辑封面 A|ZT ;\  
{{ TrackPlayedTime }} 已播放时间 PK+sGV  
{{ TrackDurationTime }} 歌曲总长 h4]^~stI  
{{ ToggleBtn }} 播放状态切换按钮 3X gJZ  
{{ StopBtn }} 停止按钮 @} Ig*@  
{{ PrevBtn }} 上一曲按钮 xSudDhRP  
{{ NextBtn }} 下一曲按钮 TsFhrtnx&X  
{{ ModeBtn }} 播放模式切换妞 CzBYH   
{{ MuteBtn }} 静音按钮 y-hTTd"{  
{{ Lyrics }} 歌词区域 h`6 (Oo|  
{{ Seek }} 进度条 JvO1tA]ij  
{{ SeekPlayedPoint }} 进度条拖拽触点 m}l);P^  
{{ SeekPlayed }} 播放进度 e* [wF}))  
{{ SeekLoaded }} 缓冲进度 'APx  
{{ VolumeBar }} 音量控制条 boojq{cvYA  
{{ VolumeFill }} 音量百分比 2^B_iyF;  
更新说明 TdPd8ig8{  
1.1 5len} ){  
[增加] LRC 歌词支持 M8-8 T  
[增加] 新增获取当前歌曲信息的 API sTd@/>S?p  
[优化] 自带皮肤细节调整 Ur+U#}  
[优化] 现在可以通过 npm run build 指令进行编译了 U$5x#{AFp  
1.0 !/,oQoG  
初版发布 ~Z5AImR|  
eQi^d/yi  
YXp\C"~g  
项目地址:https://github.com/Caringor/cPlayer $]LS!@ Rm  
[ 此帖被寒喵在2018-12-31 23:21重新编辑 ]
本人不是云栖社区工作人员。
无论您在使用中遇到什么问题,不要出言不逊!谢谢合作!
发表主题 回复主题
« 返回列表上一主题下一主题

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