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

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

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

2Q|*xd4B^  
cPlayer h\*rv5\M  
一个支持定义皮肤的 HTML5 音乐播放器 GY]6#>D#7  
=v$s+`cP  
ESjJHZoD(  
截图 #aY<J:Nx  
y6jmn1K  
/3 Ix,7  
kjC{Zr  
=z1o}ga=EA  
概述 oEoJa:h  
cPlayer 是一个基于 HTML5 的音乐播放插件,无需 jQuery 库支持即可调用出一个支持自定义皮肤的音乐播放器。此插件采用 ECMAScript6 编写,经 Babel 编译 ECMAScript5 后发布。! afiK!0col2  
tr9Y1vxo{  
L Yg$M@  
特性 1 lCikS^c  
支持自定义皮肤 i~B@(,  
提供 API 接口 R|J>8AL}BY  
LRC 歌词显示 ;AGs1j  
演示 *R\/#Y|  
有关 cPlayer 的演示,请参考 cPlayer 演示页。 J*~2 :{=%  
G<-9U}~76  
dF11Rj,~ 8  
获取 #C;zS9(]B  
git clone https://github.com/caringor/cPlayer.git x$?7)F&z  
调用 ddq 1NW  
HTML @23R joK  
<div id="cm1"></div> j)tC r Py  
<!-- ... --> }d3N`TT  
<script type="text/javascript" src="cPlayer.min.js" id="cmScript"></script> Fr3d#kVR  
JS *- IlF]  
var cm1 = new cMusic({ |;U=YRi  
  'element': document.getElementById('cm1'), opcR~tg@r  
  'autoplay': false, 7hF,gl5  
  'mode': 'default', Uq]EJu  
  'playlist': [ B#k3"vk#  
    { Pm#x?1rAj  
      'title': '人生讃歌', T5dUJR2k$  
      'artist': '茶色坚果巧克力', @Tfwh/UN  
      'cover': 'http://p3.music.126.net/CRO_peQ7AN1e811BoKrQCw==/2327666116025235.jpg?param=500y500', [[?[? V ,  
      'file': 'https://m1.jixun.moe/26082159/192000/4975020ff8fcb2ecb26233cecdd80e9cb46bfb4655d3f8b4ca14e8894b4c13ac', <qq'h  
      'lrc': 'lrc/人生讃歌.lrc' j*H;a ?Y  
    } b y|?g8  
  ] ]o[X+;Tj|  
}) {GQ Aa  
参数 6}i&6@Snq?  
//播放器容器 gN, k/U8  
element: document.getElementById('cm1') Ck3QrfM  
.kbr?N,'  
>FY&-4+v  
//是否自动播放 o,CA;_  
autoplay: false AFINm%\/0  
~~xyFT+{F  
OC?Zw@  
//皮肤 (自带 default、vertical 两套皮肤) cVB|sYdf  
skin: 'default' @[5_C?2  
>w2Q 1!  
9QC"Od9H  
//播放模式 D%;wVnU w  
mode: 'default' = GH@.3`X  
J@ktj(  
9ra HSzK@d  
//初始音量 7wiK.99  
volume: 50 h9<mThvgn  
Dm|gSv8d,  
;Na8 _}  
//播放列表 :cXIO  
playlist: [ TV1e bH7q  
  { QmH/yy3.%  
    'title': '', // 歌曲标题 9feD!0A  
    'artist': '', // 歌手名 FG>;P]mvp  
    'cover': '', // 封面文件地址 ub`z7gL  
    'file': '', // 音乐文件地址 M>?aa6@0  
    'lrc': '' // 歌词文件地址 m\*&2Na  
  } ~@[(N]=q  
] < -Hs<T|tW  
API !y>lOw})Q  
element.play() 播放 4NpHX+=P  
element.toggle() 播放状态切换 oF%^QT"R  
element.stop() 停止 c&Gz> L  
element.prev() 上一首 6-*~ t8  
element.next() 下一首 xZ^ywa_  
element.push() 插入播放列表 Y H<$ +U  
element.modeToggle() 播放模式切换 ELN|;^-/|Q  
element.seek() 跳到指定时间 (百分比) 2UU 2Vm_6  
element.volume() 设置音量 (百分比) n\Z^K  
element.mute() 静音 9USrgY6_  
element.currTrack 当前轨道 #2Ac  
element.destroy() 销毁 ?gd'M_-J,  
皮肤 Q<RT12|`  
皮肤是 cPlayer 的一个特性,不同于其它播放插件,cPlayer 的皮肤引擎相对宽松,每个按钮都被当成是独立的部件。这意味着您不仅可以修改样式表,还能对播放器的 HTML 结构进行任意调整,甚至移除掉某写不需要的按钮。 {[Uti^)m%  
51&|t#8h  
*4|9&PNLE  
结构 J*}VV9H  
细心的您会发现,在 cPlayer JS 文件所处的 同级目录 下,有一个叫做 skins 的文件夹,里面的结构是这样的: 4|zd84g  
H,(F1+~d  
e ZynF<i  
skins >:.w7LQy/  
default *mf}bTiS  
vertical i Bi7|  
其中,default 和 vertical 这两个文件夹,我们称它做皮肤包,文件夹名与 skin 参数的值对应。cPlayer 会根据包内的 template.css、template.html 这两个文件进行渲染。亦就是说,一个正常的 cPlayer 主题包,需具备以上两个文件。 nURvy}<r  
*GCA6X  
jZa25Z00  
部件 &\&'L|0F  
cPlayer 把每个按钮都当成是独立的部件,并根据部件标记来绑定与之对应的功能,部件标记格式为 {{ value }}。目前,cPlayer 提供以下部件,请根据需要把部件标记填到目标元素的 ID 标签内。 lN);~|IOv7  
h^['rmd  
$TR=3[j  
{{ TrackTitle }} 歌曲名 L5R `w&Up  
{{ TrackArtist }} 歌手名 ov1Wr#s  
{{ TrackCover }} 专辑封面 !-KCFMvT  
{{ TrackPlayedTime }} 已播放时间 +*n] tlk  
{{ TrackDurationTime }} 歌曲总长 "=9-i-K9B  
{{ ToggleBtn }} 播放状态切换按钮 3b<: :t  
{{ StopBtn }} 停止按钮 $X`bm*  
{{ PrevBtn }} 上一曲按钮 ~q{\;  
{{ NextBtn }} 下一曲按钮 $RpF xi  
{{ ModeBtn }} 播放模式切换妞 d "2wO[  
{{ MuteBtn }} 静音按钮 \'[3^/('  
{{ Lyrics }} 歌词区域 :]EP@.(  
{{ Seek }} 进度条 *f{7  
{{ SeekPlayedPoint }} 进度条拖拽触点 M#ZT2~+CT  
{{ SeekPlayed }} 播放进度 "Lb f F  
{{ SeekLoaded }} 缓冲进度 1d`cTaQ-  
{{ VolumeBar }} 音量控制条 :){)JZ}-95  
{{ VolumeFill }} 音量百分比 {!lNL[x  
更新说明 5n:nZ_D  
1.1 xne]Q(B>  
[增加] LRC 歌词支持 bk.*k~_  
[增加] 新增获取当前歌曲信息的 API B@d1xjp)']  
[优化] 自带皮肤细节调整 n4Vwao/9x  
[优化] 现在可以通过 npm run build 指令进行编译了 [9LxhPi  
1.0 Umij!=GPG^  
初版发布 |0lLl^zp  
)W#T2Z>N1  
)GK+  
项目地址:https://github.com/Caringor/cPlayer L"4]Tm>zq  
[ 此帖被寒喵在2018-12-31 23:21重新编辑 ]
本人不是云栖社区工作人员。
无论您在使用中遇到什么问题,不要出言不逊!谢谢合作!
发表主题 回复主题
« 返回列表上一主题下一主题

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