Cacher is the code snippet organizer for pro developers

// https://github.com/kolber/audiojs
// audiojs snippet
// いつもしらべてるのでmemo

//jade
#audiojs_wrapper0.audiojs.playing
	audio(preload='', src='test.mp3')
	.play-pause
		p.play
		p.pause
		p.loading
		p.error
	.scrubber
		.progress
		.loaded
	.time
		em.played
		| /
		strong.duration
	.error-message
ol.bgmList
	li
		a(data-src='test.mp3', href='#') Track Name
	li
		a(data-src='test.mp3', href='#') Track Name
	li
		a(data-src='test.mp3', href='#') Track Name
	li
		a(data-src='test.mp3', href='#') Track Name
	li
		a(data-src='test.mp3', href='#') Track Name
	li
		a(data-src='test.mp3', href='#') Track Name
	li
		a(data-src='test.mp3', href='#') Track Name
	li
		a(data-src='test.mp3', href='#') Track Name
	li
		a(data-src='test.mp3', href='#') Track Name
	li
		a(data-src='test.mp3', href='#') Track Name
	li
		a(data-src='test.mp3', href='#') Track Name

// jQuery
(function($) {
	$.init = {
		//audio.js
		_audio: function(){
			// Setup the player to autoplay the next track
			var a = audiojs.createAll({
				trackEnded: function() {
					var next = $('ol li.playing').next();
					if (!next.length) next = $('ol li').first();
					next.addClass('playing').siblings().removeClass('playing');
					audio.load($('a', next).attr('data-src'));
					audio.play();
				}
			});
			// Load in the first track
			var audio = a[0];
			first = $('ol a').attr('data-src');
			//// $('ol li').first().addClass('playing');
			audio.load(first);
	 
			// Load in a track on click
			$('ol li').click(function(e) {
				e.preventDefault();
				$(this).addClass('playing').siblings().removeClass('playing');
				audio.load($('a', this).attr('data-src'));
				audio.play();
			});
		}
	}
	$(window).load(function() {
		$.init._audio();
	}
});
})(jQuery);