基于jquery和bootstrap的音乐播放器插件vpplayer_jQuery之家-自由分享jQuery、html5、css3的插件库

简要教程

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：音乐播放器显示屏幕的颜色。同样它可以是单个颜色，或设置多个颜色。