CHRSTNSCHLNBRG

SND

jQuery Audio Player · v0.9.1

USAGE
git clone git@github.com: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>

EXAMPLES
00:00 00:00
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.

DOWNLOAD
GITHUB