Minimal Custom Audio Player Plugin with jQuery - SND

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.