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

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

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

XnV*MWv  
cPlayer De6WC*trq  
一个支持定义皮肤的 HTML5 音乐播放器 D<$, v(-  
sFsp`kf  
WnyEdYA  
截图 f![?og)I%  
7jQOwzj  
~xer ZQgc  
|@`F !bnLr  
p Wa'Fd  
概述 kj{z;5-dl  
cPlayer 是一个基于 HTML5 的音乐播放插件,无需 jQuery 库支持即可调用出一个支持自定义皮肤的音乐播放器。此插件采用 ECMAScript6 编写,经 Babel 编译 ECMAScript5 后发布。! c |.~f+  
<lopk('7  
1RgtZp%  
特性 UzTFT:\  
支持自定义皮肤 '[Ap/:/UY  
提供 API 接口 &@p_g8r#  
LRC 歌词显示 WhQK3hnm  
演示 Up*1j:_O  
有关 cPlayer 的演示,请参考 cPlayer 演示页。 w\ 4;5.$  
{]BPSj{B  
ZfsM($|a  
获取 R9@Dd  
git clone https://github.com/caringor/cPlayer.git W5z<+8R  
调用 ?y_W%og W  
HTML T5H[~b|9-  
<div id="cm1"></div> .$&mWytw=  
<!-- ... --> X$Eg(^La  
<script type="text/javascript" src="cPlayer.min.js" id="cmScript"></script> Yz7H@Y2i  
JS cetHpU ,  
var cm1 = new cMusic({ O =m_P}K  
  'element': document.getElementById('cm1'), ]z3!hgTj  
  'autoplay': false, 9j<qi\SSI  
  'mode': 'default', .\)`Xj[?  
  'playlist': [ mW EaUi)Zz  
    { w1U2cbCr/  
      'title': '人生讃歌', f4[fXP;A  
      'artist': '茶色坚果巧克力', $.HZz  
      'cover': 'http://p3.music.126.net/CRO_peQ7AN1e811BoKrQCw==/2327666116025235.jpg?param=500y500', 8G3CQ]G  
      'file': 'https://m1.jixun.moe/26082159/192000/4975020ff8fcb2ecb26233cecdd80e9cb46bfb4655d3f8b4ca14e8894b4c13ac', 3<F\ 5|  
      'lrc': 'lrc/人生讃歌.lrc' r:N =?X`N  
    } <KY \sb9  
  ] +\Uq=@  
}) zy8Z68%E`*  
参数 ={g.Fn(_  
//播放器容器 im,H|u_f4  
element: document.getElementById('cm1') J n>3c  
?OjZb'+=K  
omd oH?  
//是否自动播放 ~V34j:  
autoplay: false ?`T0zpC  
+>bm~6  
Dfhu  
//皮肤 (自带 default、vertical 两套皮肤) 1F|e/h%^  
skin: 'default' 1PGY/c  
!m {d6C[  
 {^8->V  
//播放模式 t@(:S6d  
mode: 'default' yV.E+~y  
*C~$<VYI  
s2f6;Yc  
//初始音量 reP)&Fo  
volume: 50 U3 t$h  
^WF/gup\hS  
6[x6:{^J  
//播放列表 y@Gl'@-O  
playlist: [ 2#jBh   
  { l@W1b S  
    'title': '', // 歌曲标题 9B)<7JJX!J  
    'artist': '', // 歌手名 &"gQrBa  
    'cover': '', // 封面文件地址 `*Ju0)g1  
    'file': '', // 音乐文件地址 5mqwNAv  
    'lrc': '' // 歌词文件地址 <sncW>?!~  
  } j+eto'  
] /_(q7:<ZF  
API uN;]Fv@Z  
element.play() 播放 ?mi1PNps#  
element.toggle() 播放状态切换 E+"m@63  
element.stop() 停止 -dyN Ah?=  
element.prev() 上一首 dbsD\\,2%N  
element.next() 下一首 huat,zLS  
element.push() 插入播放列表 2kfX_RK  
element.modeToggle() 播放模式切换 z)_h"y?H{%  
element.seek() 跳到指定时间 (百分比) *Y]()#?Gr  
element.volume() 设置音量 (百分比) ]EWEW*'j  
element.mute() 静音 5H^"  
element.currTrack 当前轨道 bu:%"l  
element.destroy() 销毁 I .> SC  
皮肤 y[A%EMd  
皮肤是 cPlayer 的一个特性,不同于其它播放插件,cPlayer 的皮肤引擎相对宽松,每个按钮都被当成是独立的部件。这意味着您不仅可以修改样式表,还能对播放器的 HTML 结构进行任意调整,甚至移除掉某写不需要的按钮。 oMeIXb)z  
/%{Qf  
7#[8td  
结构 @b3jO  
细心的您会发现,在 cPlayer JS 文件所处的 同级目录 下,有一个叫做 skins 的文件夹,里面的结构是这样的: b[Qe} `W  
%] #XIr  
yt[vd8O'c  
skins 9#MY(Hr  
default ?,z/+/:  
vertical xgq `l#  
其中,default 和 vertical 这两个文件夹,我们称它做皮肤包,文件夹名与 skin 参数的值对应。cPlayer 会根据包内的 template.css、template.html 这两个文件进行渲染。亦就是说,一个正常的 cPlayer 主题包,需具备以上两个文件。 :~wU/dEEiz  
X:kr$  
w#!b #TNc  
部件 |y$8!*S~(  
cPlayer 把每个按钮都当成是独立的部件,并根据部件标记来绑定与之对应的功能,部件标记格式为 {{ value }}。目前,cPlayer 提供以下部件,请根据需要把部件标记填到目标元素的 ID 标签内。 ] ^ s,  
$'%.w|MJp  
zI{~;`tzN  
{{ TrackTitle }} 歌曲名 fq<JX5DER  
{{ TrackArtist }} 歌手名 BI|YaZa+p  
{{ TrackCover }} 专辑封面 Me2qOc^Z-  
{{ TrackPlayedTime }} 已播放时间 m&a 8/5  
{{ TrackDurationTime }} 歌曲总长 tl"?AQcBR  
{{ ToggleBtn }} 播放状态切换按钮 [Ol~}@gV  
{{ StopBtn }} 停止按钮 )8&;Q9'o  
{{ PrevBtn }} 上一曲按钮 PHR:BiMZ  
{{ NextBtn }} 下一曲按钮 nh]}KFO h  
{{ ModeBtn }} 播放模式切换妞 73kU\ux  
{{ MuteBtn }} 静音按钮 B>UF dj]-  
{{ Lyrics }} 歌词区域 >_|$7m.?n[  
{{ Seek }} 进度条 W,f XHYst  
{{ SeekPlayedPoint }} 进度条拖拽触点 9/#?]LJ  
{{ SeekPlayed }} 播放进度 1"wZ [.  
{{ SeekLoaded }} 缓冲进度 `M[o.t  
{{ VolumeBar }} 音量控制条 wCgi@\  
{{ VolumeFill }} 音量百分比 zff<#yK1  
更新说明 qAW?\*n5N  
1.1 brEA-xNWQ  
[增加] LRC 歌词支持 ;Q>+#5H6F8  
[增加] 新增获取当前歌曲信息的 API h,zM*zA_  
[优化] 自带皮肤细节调整 qV5l v-p  
[优化] 现在可以通过 npm run build 指令进行编译了 F3e1&aK6{  
1.0 v2jpao<K  
初版发布 y$y!{R@   
)skz_a}]8  
^m ['VK#?  
项目地址:https://github.com/Caringor/cPlayer @! {Y9k2  
[ 此帖被寒喵在2018-12-31 23:21重新编辑 ]
本人不是云栖社区工作人员。
无论您在使用中遇到什么问题,不要出言不逊!谢谢合作!
发表主题 回复主题
« 返回列表上一主题下一主题

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