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

当前位置:主页 > jQuery库 > 工具类 > 基于jquery和bootstrap的音乐播放器插件vpplayer
基于jquery和bootstrap的音乐播放器插件vpplayer
分享:

    插件介绍

    vpplayer是一款基于jquery和bootstrap的音乐播放器插件。vpplayer音乐播放器小巧灵活,通过简单的配置即可在页面中生成漂亮的音乐播放器界面。

    浏览器兼容性

    浏览器兼容性
    时间:2018-01-04
    阅读:
简要教程

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

网友评论