基于jquery和bootstrap的音乐播放器插件vpplayer

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