vpplayer是一款基于jquery和bootstrap的音乐播放器插件。vpplayer音乐播放器小巧灵活,通过简单的配置即可在页面中生成漂亮的音乐播放器界面。
使用方法
在页面中引入jquery和bootstrap相关文件,以及vpplayer.js和vpplayer.css文件。
<link rel="stylesheet" type="text/css" href="./css/bootstrap.css"> <link rel="stylesheet" type="text/css" href="./css/vpplayer.css"> <script type="text/javascript" src="./js/jquery-2.1.1.min.js"></script> <script type="text/javascript" src="./js/bootstrap.js"></script> <script type="text/javascript" src="./lib/vpplayer.js"></script>
HTML结构
使用一个<div>
元素作为音乐播放器的容器。
<div id="player"></div>
初始化插件
在页面DOM元素加载完毕之后,通过vpplayer()
方法来初始化该用音乐播放器插件。
$(document).ready(function(){ $("#player").vpplayer({ src: "audio.mp3", trackName: "sample audio", }); });
配置参数
vpplayer音乐播放器插件的可用配置参数如下:
$("#player").vpplayer({ src: "audio.mp3", trackName: "sample audio", type: "audio/mp3", preloadMessage: "LOADING...", view: "basic", // or minimal playerColor: "black", displayColor: "green" });
-
src
:音频文件的地址。 -
trackName
:音频文件的名称。 -
type
:音频文件的类型。 -
preloadMessage
:加载时显示的文字信息。 -
view
:音乐播放器的外观,可以是'basic'
或'minimal'
。 -
playerColor
:音乐播放器皮肤的颜色。可以是单个颜色,如playerColor: "black"
,也可以设置多个颜色,设置多个颜色时会以渐变的方式展现,如:playerColor: "black, grey"
。 -
displayColor
:音乐播放器显示屏幕的颜色。同样它可以是单个颜色,或设置多个颜色。
vpplayer音乐播放器插件的github地址为:https://github.com/rvprasath/vpplayer
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!