Minimal Custom Audio Player Plugin with jQuery - SND

File Size: 5.14 MB
Views Total: 2648
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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="//"></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>
  <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>

3. Initialize the plugin and define the audio file(s) you want to play.

// or 

4. Style the audio player controls what ever you like.

.snd { ... }

Change log:


  • 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.