loudnarrative

// initialize lnplayer with default settings
$('#demo').lnplayer();

// initialize lnplayer with custon settins
$('#demo').lnplayer({
    'transition' : 'crossfade',
    'speed' : 2000,
    'bg_color' : 'black',
    'border_color' : 'black',
    'border_width' : 5,

loudnarrative

<!-- setup thumbs and links to full size images in a ul with these class names -->
<div class="lnplayer-container">
    <ul class="lnplayer-thumbs" id="demo">
        <li>
	    <a href="/full/size/image.jpg" title="">
	        <img width="150" height="150" src="/thumbnail/image.jpg" class="attachment-thumbnail" title="caption" />
	    </a>
	</li>
	<li>
	    <a href="/full/size/image.jpg" title="">

loudnarrative

// every second your audio element is playing
$(audioElement).on('timeupdate', function() {				
    var vol = 1,
    interval = 200; // 200ms interval
    if (Math.floor(audioElement.currentTime) == 15) {
        if (audioElement.volume == 1) {
            var intervalID = setInterval(function() {
	        // Reduce volume by 0.05 as long as it is above 0
	        // This works as long as you start with a multiple of 0.05!
	        if (vol > 0) {