Basic Audio Player For Bootstrap - jQuery vpplayer
File Size: | 68.7 KB |
---|---|
Views Total: | 8616 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
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.