当前位置:JS特效 » 其他 » 基于jquery和bootstrap的音乐播放器插件vpplayer
 基于jquery和bootstrap的音乐播放器插件vpplayer
如果您觉得内容不错,请分享:

插件介绍

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

浏览器兼容性

浏览器兼容性
时间:2021-07-24 阅读:51
简要教程

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

使用方法

在页面中引入jquery和bootstrap相关文件,以及vpplayer.js和vpplayer.css文件。





                  
                
HTML结构

使用一个

元素作为音乐播放器的容器。

初始化插件

在页面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

Top