arunkumarsekar / audiocontrols

Simple way to create your own audio player

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="songs/Everything But Mine.mp3">
					<a href="#">
						<img src="images/thumbs/bsb.jpg" />
						BSB - Everything But Mine
					</a>
				</li>
				<li data-src="songs/Linkin Park - Numb.mp3">
					<a href="#">
						<img src="images/thumbs/linkin-park.jpg" />
						Linkin Park - Numb
					</a>
				</li>
				<li data-src="songs/love-the-way-you-lie-rihanna-feat-eminem.mp3">
					<a href="#">
						<img src="images/thumbs/eminem.jpg" />
						Eminem - Love The Way You Lie(Rihanna Ft)
					</a>
				</li>
				<li data-src="songs/rolling-in-the-deep-adele.mp3">
					<a href="#">
						<img src="images/thumbs/adele.jpg" />
						Adele - Rolling In The Deep
					</a>
				</li>
				<li data-src="songs/when-i-was-your-man-bruno-mars.mp3">
					<a href="#">
						<img src="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

audiocontrols's Issues

Re-initializing

How to make Re-initializing if for example dynamically added a new track in a playlist? Or how to add new tracks to the index?

Streaming audio support?

Can i use this for streaming audio and/or playlists like .m3u?

Manipular shuffled

Gostaria de saber se tem como manipular o shuffled, e como seria o código, já tentei de várias formas.

loopPlaylist Nor working

I love this audio player but when the playlist is over it doesn't restart.
I've tried shuffled: true and false, in both cases when the last song is over the playlist stops playing, and even if I click the forward button it doesn't go back to the first song.
I would like it to loop forever or at least to be able to click the forward button after the last song and have it return to the first song.
Can you please tell me what can I do to fix this?
Thank you!

nevermind

perfect!

hello Arun i am just wondering why i can't change the div or replace it, it works fine with replace but seekbar has some problems if you can tell me about this bug please.