🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

SND is a lightweight jQuery plugin for generating an Audio player with full customizable controls on the web page.

audio-player

Documentation

SND

jQuery Audio Player.

Usage

git clone [email protected]:chrstnschlnbrg/snd.git 

or download or use the CDN:

<script src="https://raw.githubusercontent.com/chrstnschlnbrg/snd/gh-pages/src/snd.min.js"></script>

Include jQuery and snd.min.js in your head tag:

<script src="//code.jquery.com/jquery-2.1.4.min.js"></script> <script src="https://raw.githubusercontent.com/chrstnschlnbrg/snd/gh-pages/src/snd.min.js"></script>

Asign the plugin to an element in your HTML:

$(document).ready(function() {     $('.snd').snd('source/to/audio'); });

You can also specify multiple audio sources for a playlist:

$(document).ready(function() {     $('.snd').snd(['source/to/audio','source/to/audio','source/to/audio']); });

And set an autoplay:

$(document).ready(function() {     $('.snd').snd('source/to/audio', { autoplay: true }); });

Controls

A full player could look like this:

<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>     <button class="shuffle">Shuffle</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>

Play

<button class="play">Play</button>

Pause

<button class="pause">Pause</button>

Toggle

<div class="toggle">     <button class="toggle-play">Play</button>     <button class="toggle-pause">Pause</button> </div>

Mute

<input class="mute" type="checkbox"/>

Loop

<input class="loop" type="checkbox"/>

Previous

<button class="prev">Prev</button>

Next

<button class="next">Next</button>

Shuffle

<button class="shuffle">Shuffle</button>

Time

<input class="time" type="range" value="0" />

Current time

<span class="curenttime">00:00</span>

Duration

<span class="duration">00:00</span>

Playlist

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

The currently playing track gets the class playing:

<ul class="playlist">     <li class="playlist_item playing">Track 1</li>     <li class="playlist_item">Track 2</li>     <li class="playlist_item">Track 3</li> </ul>

Support/Bugs

If you find something weird just open a new issue on GitHub. You can also contact me via email if you have any problems using SND.


You May Also Like