Yes, it's long. Yes, it involves 4 different wordpress custom post types with many-to-many database relationships... in other words, it's a clusterf**k :)
Yes, it all works now (except the "track info" link... because now I have to AJAX the internal links/content area so playback doesn't stop when you navigate around the site).
jQuery( function( $ ){
/*** variables localized in wordpress php ***/
var ajaxUrl = dogHaus.ajaxUrl, siteUrl = dogHaus.siteUrl, playlist = dogHaus.playlist, tracks = playlist.tracks, num_tracks = playlist.num_tracks, avUrl = siteUrl + '/wp-content/av/',
/*** elements frequently used in this script ***/
audiodiv = $( 'body div#doghaus-player div.player div#audio' ),
dataul = $( 'body div#doghaus-player div.player ul.data' ),
controlsul = $( 'body div#doghaus-player div.player ul.controls' ),
listol = $( 'body div#doghaus-player div.playlist ol.pl-list' ),
data_infoli = dataul.children( 'li.data-info' ),
data_volul = data_infoli.children( 'ul.data-voltime' ),
tooltip = data_volul.children( 'li#vol' ).children( 'span.tooltip' ),
vol_slider = data_volul.children( 'li#vol' ).children( 'div#slider' ),
- /*** ***/
audio, // the <audio> element for the current track. set by get_current_track()
track_on, // the current track. set by get_current_track()
time_format = function( seconds ) {
var m = Math.floor( seconds / 60 ),
s = Math.floor( seconds - ( m * 60 ) ) < 10 ? "0" + Math.floor( seconds - ( m * 60 ) ) : Math.floor( seconds - ( m * 60 ) )
return m + ":" + s
},
monitor = {
durationchange: function( e ) { data_volul.children( 'li#timeleft' ).text( time_format( audio.duration ) ) },
timeupdate: function( e ) {
var percentage = audio.currentTime / audio.duration * 100,
timeleft = audio.duration - audio.currentTime
data_volul.children( 'li#timer' ).text( time_format( audio.currentTime ) )
data_volul.children( 'li#timeleft' ).text( time_format( timeleft ) )
},
playing: function( e ) {},
ended: function( e ) { get_next_track() },
play: function( e ) { controlsul.children( 'li' ).children( 'a#play' ).addClass( 'pause' ).attr( 'title', 'click to pause' ) },
pause: function( e ) { controlsul.children( 'li' ).children( 'a#play' ).removeClass( 'pause' ).attr( 'title', 'click to play' ) }
},
// volume control slider
level = vol_slider.slider({
animate: true, value: 0.76, step: 0.01, min: 0, range: 'min', max: 1,
start: function( e, ui ) { tooltip.fadeIn( 'fast' ) },
slide: function( e, ui ) {
var vol = data_volul.children( 'li#vol' ).children( 'span.volume' ),
hdl = data_volul.children( 'li#vol' ).children( 'div#slider' ).children( 'a.ui-slider-handle' ),
val = parseInt( ui.value * 100 )
audio.volume = ui.value
tooltip.css( 'left', val ).text( val )
if( val <= 5 ) { vol.css( 'background-position', '0 -54px' ) }
else if( val <= 25 ) { vol.css( 'background-position', '0 -36px' ) }
else if( val <= 75 ) { vol.css( 'background-position', '0 -18px' ) }
else { vol.css( 'background-position', '0 0' ) }
if( val <= 3 ) { hdl.css( 'margin-left', '-3px' ) }
else if( val > 3 ) { hdl.css( 'margin-left', '-16px' ) }
},
stop: function( e, ui ) { tooltip.fadeOut( 'fast' ) }
})
/*** FUNCTIONS ***/
// rebuild the <audio> element for the current track
function get_current_track( track ) {
if( audiodiv.children( 'audio' ).length > 0 ) { audiodiv.children( 'audio' ).remove() }
audiodiv.prepend( '<audio><source src="' + avUrl + track.ogg + '" type="audio/ogg" /><source src="' + avUrl + track.mp3 + '" type="audio/mpeg" /></audio>' )
track_on = track.tracknum
get_current_info( track )
get_permalink( track )
audio = audiodiv.children( 'audio' ).on( monitor )[0]
}
// display info for currently playing track
function get_current_info( track ) {
if( track.image != '' ) { dataul.children( 'li.data-img' ).css( 'background-image', 'url(' + track.image + ')' ) }
else { dataul.children( 'li.data-img' ).css( 'background-image', 'url( "' + siteUrl + '/wp-content/themes/doghaus/img/audio_default.png" )' ) }
dataul.children( 'li.data-info' ).children( 'div.data-title' ).html( '<p><strong>' + track.title + '</strong></p><p><span class="by">by</span> <em>' + track.artist + '</em></p>' )
get_playlist_li_status( track.tracknum )
}
// set playlist css class for the currently playing track
function get_playlist_li_status( tracknum ) {
listol.children( 'li' ).removeClass( 'track-on' )
listol.children( 'li#pl-' + tracknum ).addClass( 'track-on' )
}
// get permalink for current track and assign as href to the track info button
function get_permalink( track ) { controlsul.children( 'li' ).children( 'a#info' ).attr( 'href', track.url ) }
// set images for each track in playlist
function get_playlist_defaults() {
listol.children( 'li.track' ).each( function() {
var id = $( this ).attr( 'id' ).substr( 3, 2 )
if( playlist.tracks[ id ].image != '' ) { $( this ).children( 'div.pl-list-img' ).css( 'background-image', 'url(' + playlist.tracks[ id ].image + ')' ) }
})
}
// previous/next buttons share class 'skip' and have an id of either 'prev' or 'next'
function get_prev_next( skip ) {
switch( skip ) {
case 'prev':
get_prev_track()
break;
case 'next':
get_next_track()
break;
}
}
// get next track in playlist or first track if current track is last
function get_next_track() {
var next = ( ( track_on + 1 ) > num_tracks ) ? 1 : track_on + 1;
get_current_track( tracks[ next ] )
audio.play()
}
// get previous track in playlist or last track if current track is 1
function get_prev_track() {
var prev = ( ( track_on - 1 == 0 ) ) ? num_tracks : track_on - 1;
get_current_track( tracks[ prev ] )
audio.play()
}
/*** EVENTS ***/
// remove defaults from player controls
$( 'body' ).on( 'click', 'div#doghaus-player div.player ul.controls li a', function( e ) { e.preventDefault(); e.stopPropagation() } )
// toggle play-pause
controlsul.children( 'li' ).children( 'a#play' ).click( function() { ( audio.ended || audio.paused ) ? audio.play() : audio.pause() })
// select track from playlist
listol.children( 'li.track' ).click( function() {
var id = $( this ).attr( 'id' ).substr( 3, 2 )
get_current_track( tracks[ id ] )
audio.play()
})
// select prev-next track
controlsul.children( 'li' ).children( 'a.skip' ).click( function() {
var skip = $( this ).attr( 'id' )
get_prev_next( skip )
}
// show-hide playlist
controlsul.children( 'li' ).children( 'a#list' ).toggle(
function() {
$( this ).addClass( 'list-on' ).attr( 'title', 'hide playlist' )
$( this ).parents( '#doghaus-player' ).children( '.playlist' ).show()
},
function() {
$( this ).removeClass( 'list-on' ).attr( 'title', 'show playlist' )
$( this ).parents( '#doghaus-player' ).children( '.playlist' ).hide()
}
)
// init
get_current_track( tracks[ 1 ] );
get_playlist_defaults();
tooltip.hide();
})