This time I will share jQuery Plugin and tutorial about Minimal Custom Audio Player Plugin with jQuery – SND, hope it will help you in programming stack.
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.
1 |
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script> |
2 |
<script src="src/snd.js"></script> |
2. Create the Html for the audio player.
03 |
<button class="toggle-play">Play</button> |
04 |
<button class="toggle-pause">Pause</button> |
06 |
<button class="prev">Prev</button> |
07 |
<button class="next">Next</button> |
08 |
<input class="time" type="range" value="0" /> |
09 |
<span class="currenttime">00:00</span>/ |
10 |
<span class="duration">00:00</span> |
11 |
<p>Mute: <input class="mute" type="checkbox"/></p> |
12 |
<p>Loop: <input class="loop" type="checkbox"/></p> |
14 |
<li class="playlist_item">Track 1</li> |
15 |
<li class="playlist_item">Track 2</li> |
16 |
<li class="playlist_item">Track 3</li> |
3. Initialize the plugin and define the audio file(s) you want to play.
1 |
$('.snd').snd('1.mp3'); |
3 |
$('.snd').snd({'1.mp3','2.mp3','3.mp3'}); |
4. Style the audio player controls what ever you like.
Change log:
2016-02-06
This awesome jQuery plugin is developed by casabeats. For more Advanced Usages, please check the demo page or visit the official website.
