audioControls

Simple way to create your own audio player.

Features

playlist
audio repeat
shuffle playlist
repeat audio
repeat playlist
audio timer (increment / decrement)
seekable track
buffer loader & default player controls
easy to integrate
suitable for maximum theme
Api's and documentation

Requirements

jQuery
HTML5

Example

Here is basic example of using audioControls. Design your own theme how ever you want and just pust data-attr appropriate places.

HTML

<div class="twoColumn">
    <!-- Audio Player Control's -->
    <div class="col-1 toolsPane">
        <a href="#" title="Show/Hide Playlist" alt="Show/Hide Playlist"><span class="ctrls playlist"></span></a>
        <a href="#" title="Previous Song" alt="Previous Song"><span data-attr="prevAudio" class="ctrls previous"></span></a>
        <a href="#" title="Play/Pause" alt="Play/Pause"><span data-attr="playPauseAudio" class="ctrls playAudio"></span></a>
        <a href="#" title="Next Song" alt="Next Song"><span data-attr="nextAudio" class="ctrls next"></span></a>
        <a href="#" title="Repeat Song" alt="Repeat Song"><span data-attr="repeatSong" class="ctrls replay"></span></a>
    </div>
    <div class="volumeControlContainer">
        <input data-attr="rangeVolume" type="range" min="0" max="1" step="0.1" />
    </div>
    <!-- EOF Audio Player Control's -->
    <!-- Playlist -->
    <div id="audioPlayer" class="col-2 container">
        <div class="playlistContainer">
            <ul id="playlist">
                <li data-src="https://github.com/arunkumarsekar/audioControls/raw/master/songs/Everything But Mine.mp3">
                    <a href="#">
                        <img src="https://github.com/arunkumarsekar/audioControls/raw/master/images/thumbs/bsb.jpg" />
                        BSB - Everything But Mine
                    </a>
                </li>
                <li data-src="https://github.com/arunkumarsekar/audioControls/raw/master/songs/Linkin Park - Numb.mp3">
                    <a href="#">
                        <img src="https://github.com/arunkumarsekar/audioControls/raw/master/images/thumbs/linkin-park.jpg" />
                        Linkin Park - Numb
                    </a>
                </li>
                <li data-src="https://github.com/arunkumarsekar/audioControls/raw/master/songs/love-the-way-you-lie-rihanna-feat-eminem.mp3">
                    <a href="#">
                        <img src="https://github.com/arunkumarsekar/audioControls/raw/master/images/thumbs/eminem.jpg" />
                        Eminem - Love The Way You Lie(Rihanna Ft)
                    </a>
                </li>
                <li data-src="https://github.com/arunkumarsekar/audioControls/raw/master/songs/rolling-in-the-deep-adele.mp3">
                    <a href="#">
                        <img src="https://github.com/arunkumarsekar/audioControls/raw/master/images/thumbs/adele.jpg" />
                        Adele - Rolling In The Deep
                    </a>
                </li>
                <li data-src="https://github.com/arunkumarsekar/audioControls/raw/master/songs/when-i-was-your-man-bruno-mars.mp3">
                    <a href="#">
                        <img src="https://github.com/arunkumarsekar/audioControls/raw/master/images/thumbs/bruno-mars.jpg" />
                        Bruno - When I Was Your Man
                    </a>
                </li>
            </ul>
        </div>
    </div>
    <!-- EOF Playlist -->
</div>

Note

Removed songs folder and mp3's, add songs folder to keep demo working

jQuery

$(document).ready(function(){
    $("#audioPlayer").audioControls();
});

License

This plugin available under MIT license

arunkumarsekar / audioControls

readme