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

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

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

Rmh,P>  
cPlayer >LR+dShG  
一个支持定义皮肤的 HTML5 音乐播放器 Z:MU5(Te  
j%*<W> O  
C1~Ro9si  
截图 @j4~`~8  
/lvH p  
S#7.y~e\  
';x5 $5k'  
Tq >?.bq9  
概述 Hn(L0#Oqy  
cPlayer 是一个基于 HTML5 的音乐播放插件,无需 jQuery 库支持即可调用出一个支持自定义皮肤的音乐播放器。此插件采用 ECMAScript6 编写,经 Babel 编译 ECMAScript5 后发布。! N &vQis  
zd [cp@  
(KG>lTdN  
特性 gLv";"4S  
支持自定义皮肤 UBy:W^\g  
提供 API 接口 .gHL(*1P  
LRC 歌词显示 We#O' m  
演示 $;+`sVG  
有关 cPlayer 的演示,请参考 cPlayer 演示页。 8DNGqaH;dt  
FY]z*=  
uH!;4@ uI  
获取  !.k  
git clone https://github.com/caringor/cPlayer.git T\Q)"GB  
调用 s"]LQM1|  
HTML uU00ZPS*G[  
<div id="cm1"></div> .W%{j()op  
<!-- ... --> )Ikx0vDFQ  
<script type="text/javascript" src="cPlayer.min.js" id="cmScript"></script> MA:8g D  
JS pfvNVu  
var cm1 = new cMusic({ x:Kca3pv_  
  'element': document.getElementById('cm1'), ojd/%@+u+Y  
  'autoplay': false, m/0t; cx  
  'mode': 'default', }3!.e  
  'playlist': [ T=2 91)@  
    { =jmn  
      'title': '人生讃歌', rm4j8~Ef  
      'artist': '茶色坚果巧克力', 0Q5ua `U  
      'cover': 'http://p3.music.126.net/CRO_peQ7AN1e811BoKrQCw==/2327666116025235.jpg?param=500y500', l$Y7CIH  
      'file': 'https://m1.jixun.moe/26082159/192000/4975020ff8fcb2ecb26233cecdd80e9cb46bfb4655d3f8b4ca14e8894b4c13ac', l>M&S^/s j  
      'lrc': 'lrc/人生讃歌.lrc' E$rn^keM  
    } o^},L?  
  ] /5_!Y >W  
}) 8<uKzb(O:  
参数 #f@sq5pTO  
//播放器容器 R '/Ilz`  
element: document.getElementById('cm1') kf$0}T`  
t{K1ht$[:  
=2{^qvP  
//是否自动播放 !T|X/B R  
autoplay: false -$4PY,  
6kKIDEX  
/'}O-h  
//皮肤 (自带 default、vertical 两套皮肤) pXCmyLQ  
skin: 'default' V4Ql6vg_f  
,?7U Rx*  
\ey3i((L  
//播放模式 '8wA+N6Zr7  
mode: 'default' (6 fh[eK86  
z}N=Oe  
X'WbS  
//初始音量 (J~n|hA2/D  
volume: 50 Jpws1~  
a! P?RbW  
KyNv)=x4c  
//播放列表 _w=si?q  
playlist: [ Yyby 1  
  { ED @9,W0  
    'title': '', // 歌曲标题 =x9zy]  
    'artist': '', // 歌手名 {(A Ys*5  
    'cover': '', // 封面文件地址 W :jC2,s!m  
    'file': '', // 音乐文件地址 /N7j5v(  
    'lrc': '' // 歌词文件地址 soXeHjNl  
  } 8AVM(d@  
] SI)u@3hl&w  
API 9#iu#?*B  
element.play() 播放 ^c!"*L0E  
element.toggle() 播放状态切换 \;}F6g  
element.stop() 停止 ! &Vp5]c  
element.prev() 上一首 N)03{$WM  
element.next() 下一首 U|={LU  
element.push() 插入播放列表 *f=H#  
element.modeToggle() 播放模式切换 =U!M,zw4  
element.seek() 跳到指定时间 (百分比) %%}U -*b  
element.volume() 设置音量 (百分比) B)O{+avu  
element.mute() 静音 DZ |0CB~  
element.currTrack 当前轨道 VChNDHiH  
element.destroy() 销毁 >&7K|$y.J  
皮肤 kqYWa`eE  
皮肤是 cPlayer 的一个特性,不同于其它播放插件,cPlayer 的皮肤引擎相对宽松,每个按钮都被当成是独立的部件。这意味着您不仅可以修改样式表,还能对播放器的 HTML 结构进行任意调整,甚至移除掉某写不需要的按钮。 h.E8G^}@  
|?hNl2m  
#!l\.:h%  
结构 +*]"Yo~]}  
细心的您会发现,在 cPlayer JS 文件所处的 同级目录 下,有一个叫做 skins 的文件夹,里面的结构是这样的: a.#`>  
'.r_6X$7Jt  
Jw)Uk< \  
skins J wL}|o6  
default F~2bCy[Z  
vertical P3UU~w+s  
其中,default 和 vertical 这两个文件夹,我们称它做皮肤包,文件夹名与 skin 参数的值对应。cPlayer 会根据包内的 template.css、template.html 这两个文件进行渲染。亦就是说,一个正常的 cPlayer 主题包,需具备以上两个文件。 *]NG@^y  
V6P2W0 m  
kAA1+rG  
部件 a,i k=g  
cPlayer 把每个按钮都当成是独立的部件,并根据部件标记来绑定与之对应的功能,部件标记格式为 {{ value }}。目前,cPlayer 提供以下部件,请根据需要把部件标记填到目标元素的 ID 标签内。 GKTt!MK  
vg[A/$gLM  
$ (/=Wn  
{{ TrackTitle }} 歌曲名 Ybo:2e  
{{ TrackArtist }} 歌手名 jR[VPm=  
{{ TrackCover }} 专辑封面 mQdF+b1o  
{{ TrackPlayedTime }} 已播放时间 jD1/`g%  
{{ TrackDurationTime }} 歌曲总长 Cp4 U`]  
{{ ToggleBtn }} 播放状态切换按钮 9.u}<m  
{{ StopBtn }} 停止按钮 D])&>  
{{ PrevBtn }} 上一曲按钮 BdBwfH%:  
{{ NextBtn }} 下一曲按钮 '/8{Mx+  
{{ ModeBtn }} 播放模式切换妞 4eH:eCZze  
{{ MuteBtn }} 静音按钮 x7\b-EC  
{{ Lyrics }} 歌词区域 q@k/"ee*?  
{{ Seek }} 进度条 6 G.(o  
{{ SeekPlayedPoint }} 进度条拖拽触点 Y;2WY 0eq  
{{ SeekPlayed }} 播放进度 K#Ia19au5  
{{ SeekLoaded }} 缓冲进度 O|%03q(  
{{ VolumeBar }} 音量控制条 b9nTg  
{{ VolumeFill }} 音量百分比 <@:RS$" i  
更新说明 4JQd/;  
1.1 eXKpum~  
[增加] LRC 歌词支持 nv$>iJ^~H  
[增加] 新增获取当前歌曲信息的 API >b\{y}[  
[优化] 自带皮肤细节调整 |5il5UP  
[优化] 现在可以通过 npm run build 指令进行编译了 <pA%|]  
1.0 rhff8C//'  
初版发布 /q1k)4?E  
DVJuX~'|!  
X$r5KJU  
项目地址:https://github.com/Caringor/cPlayer l4Au{%j\  
[ 此帖被寒喵在2018-12-31 23:21重新编辑 ]
本人不是云栖社区工作人员。
无论您在使用中遇到什么问题,不要出言不逊!谢谢合作!
发表主题 回复主题
« 返回列表上一主题下一主题

限100 字节
如果您在写长篇帖子又不马上发表,建议存为草稿
 
验证问题: ECS是阿里云提供的什么服务? 正确答案:云服务器
上一个 下一个