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

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

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

HhvdqvIEG  
cPlayer ~vyf4TF<#  
一个支持定义皮肤的 HTML5 音乐播放器 >Z'NXha  
hpD!2 K3>  
$42{HFGq  
截图 V6@o]*  
AJF#Aw `o  
++`0rY%  
C$XU%5qi  
^SF&=NpV  
概述 zd >t-?g  
cPlayer 是一个基于 HTML5 的音乐播放插件,无需 jQuery 库支持即可调用出一个支持自定义皮肤的音乐播放器。此插件采用 ECMAScript6 编写,经 Babel 编译 ECMAScript5 后发布。! NgP&.39U  
y.< m#Zzt  
@U& QI*  
特性 U_I5fK =  
支持自定义皮肤 )QU  
提供 API 接口 ?fi,ifp*|l  
LRC 歌词显示 6[ j.@[t  
演示 H[U!%Z  
有关 cPlayer 的演示,请参考 cPlayer 演示页。 Ws|j#X<  
i#vYyVr[  
*Doa* wQ  
获取 (ROY?5 @c  
git clone https://github.com/caringor/cPlayer.git T[UN@^DP(  
调用 &m)6J'q3k  
HTML b*c*r dTx  
<div id="cm1"></div> "Q@ronP(~  
<!-- ... --> M_/7D|xl/T  
<script type="text/javascript" src="cPlayer.min.js" id="cmScript"></script> Y 5- F@(  
JS 4;yKOQD|  
var cm1 = new cMusic({ aBNc(?ri  
  'element': document.getElementById('cm1'), s(/; U2"e  
  'autoplay': false, 3Q.#c,`jV  
  'mode': 'default', _=F=`xu  
  'playlist': [ MyJ%`@+1  
    { '"0'Oua  
      'title': '人生讃歌',  ]hk  
      'artist': '茶色坚果巧克力', qr"3y  
      'cover': 'http://p3.music.126.net/CRO_peQ7AN1e811BoKrQCw==/2327666116025235.jpg?param=500y500', 7)`nD<j 5  
      'file': 'https://m1.jixun.moe/26082159/192000/4975020ff8fcb2ecb26233cecdd80e9cb46bfb4655d3f8b4ca14e8894b4c13ac', ls\WXCH  
      'lrc': 'lrc/人生讃歌.lrc' 4i)1'{e  
    } }YGV\Nu  
  ] 0l)~i' '  
}) [8 ]z|bM  
参数 .sha&  
//播放器容器 )~)J?l3 {  
element: document.getElementById('cm1') =Y{(%sn  
JjtNP)We  
|W,& Hl7  
//是否自动播放 jS]ru-5.  
autoplay: false >JHryS.j$4  
tqE6>"jD  
Xv ]W(f1  
//皮肤 (自带 default、vertical 两套皮肤) +\d56j+D  
skin: 'default' ry`Ho8N  
 eI$oLl@  
Yb|c\[ %  
//播放模式 Pr':51(  
mode: 'default' [+2[`K c]  
6M @[B|Q(  
% L$bf#  
//初始音量 eBZXI)pPh  
volume: 50 u_w#gjiC  
uw>Ba %5  
v|XTr,#  
//播放列表 %". HaI]  
playlist: [ CpUk Cgg  
  { =MQoC:l  
    'title': '', // 歌曲标题 u@Ih GME  
    'artist': '', // 歌手名 Y071Y:  
    'cover': '', // 封面文件地址 [owWiN4`s  
    'file': '', // 音乐文件地址 F+YZE[h%  
    'lrc': '' // 歌词文件地址  U f:`  
  } <T` 7%$/E  
] j+i\bks  
API so,t   
element.play() 播放 9'fQHwsJ  
element.toggle() 播放状态切换 wcrCEX=I>{  
element.stop() 停止 &jS>UsGh  
element.prev() 上一首 nHM~  
element.next() 下一首 3 ]5^r}  
element.push() 插入播放列表 R5N%e%[  
element.modeToggle() 播放模式切换 [>jbhV'  
element.seek() 跳到指定时间 (百分比) lUOF4U&r  
element.volume() 设置音量 (百分比) Y+kfBvxyf  
element.mute() 静音 +%+tr*04O  
element.currTrack 当前轨道 {c6=<Kv  
element.destroy() 销毁 $njUXSQ;  
皮肤 Y xr>"KH6a  
皮肤是 cPlayer 的一个特性,不同于其它播放插件,cPlayer 的皮肤引擎相对宽松,每个按钮都被当成是独立的部件。这意味着您不仅可以修改样式表,还能对播放器的 HTML 结构进行任意调整,甚至移除掉某写不需要的按钮。 ,82S=N5V!  
5MroNr  
&C `Gg<  
结构 :tz#v`3o  
细心的您会发现,在 cPlayer JS 文件所处的 同级目录 下,有一个叫做 skins 的文件夹,里面的结构是这样的: 1h^:[[!c  
/j #n  
ew>XrT=Zm  
skins )1]ZtU  
default ..IfP@  
vertical DBo%fYst  
其中,default 和 vertical 这两个文件夹,我们称它做皮肤包,文件夹名与 skin 参数的值对应。cPlayer 会根据包内的 template.css、template.html 这两个文件进行渲染。亦就是说,一个正常的 cPlayer 主题包,需具备以上两个文件。 _zR+i]9   
bZ dNibN  
1auIR/=-  
部件 y`L>wq,KU  
cPlayer 把每个按钮都当成是独立的部件,并根据部件标记来绑定与之对应的功能,部件标记格式为 {{ value }}。目前,cPlayer 提供以下部件,请根据需要把部件标记填到目标元素的 ID 标签内。 T`9lV2x*P  
[8Y:65  
+KF^Z$I  
{{ TrackTitle }} 歌曲名 .eS<Dbku<  
{{ TrackArtist }} 歌手名 'f#{{KA  
{{ TrackCover }} 专辑封面 4zXFuTr($  
{{ TrackPlayedTime }} 已播放时间 |-fg j'  
{{ TrackDurationTime }} 歌曲总长 Jf{*PgP  
{{ ToggleBtn }} 播放状态切换按钮 DHy q^pJ  
{{ StopBtn }} 停止按钮 `XJG(Oas\  
{{ PrevBtn }} 上一曲按钮 LGq'WU31:)  
{{ NextBtn }} 下一曲按钮 .u)X3..J  
{{ ModeBtn }} 播放模式切换妞 )%`c_FL@N=  
{{ MuteBtn }} 静音按钮 xzdf^Ce  
{{ Lyrics }} 歌词区域 O\ GEay2  
{{ Seek }} 进度条 y8d]9sX{  
{{ SeekPlayedPoint }} 进度条拖拽触点 ;o 6lf_  
{{ SeekPlayed }} 播放进度 ;nI] !g:  
{{ SeekLoaded }} 缓冲进度 !eGC6o}f  
{{ VolumeBar }} 音量控制条 L 8c0lx}Nn  
{{ VolumeFill }} 音量百分比 OsTc5K.U~  
更新说明 WEw6He;  
1.1 gI&#o@Pm  
[增加] LRC 歌词支持 X@--m6-  
[增加] 新增获取当前歌曲信息的 API VRVO-Sk  
[优化] 自带皮肤细节调整 ]l;o}+`G  
[优化] 现在可以通过 npm run build 指令进行编译了 %p Ynnfr  
1.0 l z/8  
初版发布 <kfnpB=  
C+* d8_L  
1m'k|Ka  
项目地址:https://github.com/Caringor/cPlayer 48J@C vU  
[ 此帖被寒喵在2018-12-31 23:21重新编辑 ]
本人不是云栖社区工作人员。
无论您在使用中遇到什么问题,不要出言不逊!谢谢合作!
发表主题 回复主题
« 返回列表上一主题下一主题

限100 字节
批量上传需要先选择文件,再选择上传
 
验证问题: 阿里云官网域名是什么? 正确答案:www.aliyun.com
上一个 下一个
      ×
      全新阿里云开发者社区, 去探索开发者的新世界吧!
      一站式的体验,更多的精彩!
      通过下面领域大门,一起探索新的技术世界吧~ (点击图标进入)