Skip to content
CSS HTML JavaScript Ruby
Branch: gh-pages
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
_includes
_layouts
css
favicon
img
sass
sound
src
.gitignore
LICENSE
README.md
Rakefile
_config.yml
gulpfile.js
index.html
package.json

README.md

SND

jQuery Audio Player.

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>

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 can’t perform that action at this time.