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.