Minimal Custom Audio Player Plugin with jQuery - SND
File Size: | 5.14 MB |
---|---|
Views Total: | 2740 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

SND is a lightweight jQuery plugin for generating an Audio player with full customizable controls on the web page.
How to use it:
1. Download the SND plugin and include the snd.js
script after you have jQuery library installed.
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script> <script src="src/snd.js"></script>
2. Create the Html for the audio player.
<div class="snd"> <div class="toggle"> <button class="toggle-play">Play</button> <button class="toggle-pause">Pause</button> </div> <button class="prev">Prev</button> <button class="next">Next</button> <input class="time" type="range" value="0" /> <span class="currenttime">00:00</span>/ <span class="duration">00:00</span> <p>Mute: <input class="mute" type="checkbox"/></p> <p>Loop: <input class="loop" type="checkbox"/></p> <ul class="playlist"> <li class="playlist_item">Track 1</li> <li class="playlist_item">Track 2</li> <li class="playlist_item">Track 3</li> </ul> </div>
3. Initialize the plugin and define the audio file(s) you want to play.
$('.snd').snd('1.mp3'); // or $('.snd').snd({'1.mp3','2.mp3','3.mp3'});
4. Style the audio player controls what ever you like.
.snd { ... }
Change log:
2016-02-06
- v0.9.1
This awesome jQuery plugin is developed by casabeats. For more Advanced Usages, please check the demo page or visit the official website.