Basic Audio Player For Bootstrap - jQuery vpplayer

vpplayer is a simple, lightweight, responsive, and configurable audio player built using jQuery, Bootstrap and Glyphicons.

How to use it:

1. Load jQuery library, Bootstrap and the jQuery vpplayer's files in the document.

<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="./lib/vpplayer.js"></script>
<link rel="stylesheet" type="text/css" href="./css/vpplayer.css">

2. Create a placeholder element for the audio player.

<div id="player"></div>

3. Initialize the audio player and specify the path to the audio file.

$(document).ready(function(){
  $("#player").vpplayer({
    src: "audio.mp3",
    trackName: "sample audio",
  });
});

4. More configuration options to customize the audio player.

$("#player").vpplayer({
  src: "audio.mp3",
  trackName: "sample audio",
  type: "audio/mp3",
  preloadMessage: "LOADING...",
  view: "basic", // or minimal
  playerColor: "black",
  displayColor: "green"
});

---

This awesome jQuery plugin is developed by rvprasath. For more Advanced Usages, please check the demo page or visit the official website.