1 2 3// Convert player bar <audio> element to MediaElement.js 4 5 var player = new MediaElementPlayer('player', { 6 success: function(media) { 7 // Player Bar localStorage 8 var volume = localStorage.getItem('volume'), 9 episodeSelected = localStorage.getItem('episodeSelected'), // Was there an episode selected (either paused or playing) 10 wasPlaying = localStorage.getItem('wasPlaying'), // false is paused 11 lastEpID = localStorage.getItem('lastEpID'), 12 lastEpTitle = localStorage.getItem('lastEpTitle'), // Title of last episode played 13 lastEpMedia = localStorage.getItem('lastEpMedia'), 14 lastEpURL = localStorage.getItem('lastEpURL'), 15 lastEpCurrentTime = localStorage.getItem('lastEpCurrentTime'), 16 lastEpGuestName = localStorage.getItem('lastEpGuestName'), 17 lastEpGuestPhoto = localStorage.getItem('lastEpGuestPhoto'); 18 19 20 var jQueryplayerBar = jQuery('#player-bar'), 21 22 23 jQueryvolume = jQuery('#volume-range'), 24 holderOffset = jQueryvolume.offset().left, 25 sliderWidth = jQueryvolume.width(); 26 27 28 if ( episodeSelected == 'true' ){ 29 //console.log('Episode was loaded previously'); 30 31 // Animate player bar into view 32 jQueryplayerBar.animate({ 33 bottom: '0' 34 }, 0); 35 jQueryplayerBar.attr("data-status","open"); 36 //bodyPadding(); 37 38 media.setSrc(lastEpMedia); // Set source on player bar 39 media.setCurrentTime(lastEpCurrentTime); 40 41 jQuery('.episode-title a', jQueryplayerBar).text(lastEpTitle).attr('href', lastEpURL); // Set title on player bar 42 jQuery('.episode-cover img', jQueryplayerBar).attr('src', lastEpGuestPhoto); 43 jQuery('.episode-cover a', jQueryplayerBar).attr('href', lastEpURL); 44 jQueryplayerBar.attr('data-episode-id', lastEpID) 45 if ( wasPlaying == 'true' ) { 46 jQueryplayerBar.find('.play-pause').addClass('playing'); 47 //jQuery('.podcasting[data-episode-id="' + lastEpID + '"]').find('.play-pause').addClass('currently-playing'); 48 jQuery('.podcasting[data-podcasting-id="' + lastEpID + '"]').find('.play-pause').children('span').text('Pause'); 49 jQuery('.podcasting[data-podcasting-id="' + lastEpID + '"]').find('.play-pause').addClass('currently-playing'); 50 media.play(); 51 } 52 53 54 } 55 playerBarID = jQueryplayerBar.data('episode-id'), 56 57 // Format time for display (00:00) 58 function formatTime(seconds) { 59 minutes = Math.floor(seconds / 60); 60 minutes = (minutes >= 10) ? minutes : '0' + minutes; 61 seconds = Math.floor(seconds % 60); 62 seconds = (seconds >= 10) ? seconds : '0' + seconds; 63 return minutes + ":" + seconds; 64 } 65 66 67 // Show current time next to play/pause button 68 media.addEventListener('timeupdate', function() { 69 jQueryplayerBar.find('.current-time').html(formatTime(media.currentTime)); 70 localStorage.setItem('lastEpCurrentTime', media.currentTime); 71 }); 72 73 74 // Get duration of episode 75 jQuery(media).on('loadedmetadata', function() { 76 jQueryplayerBar.find('.current-time').html(formatTime(media.currentTime)); 77 jQueryplayerBar.find('.total-time').html(formatTime(media.duration)); 78 }); 79 80 81 // Click 'play' on individual episode boxes => update player bar 82 83 jQuery('.podcasting .play-pause').on('click', function(e) { 84 85 e.preventDefault(); 86 87 var jQueryepisode = jQuery(this).parents('.podcasting'); 88 89 var episodeID = jQueryepisode.data('podcasting-id'), 90 episodeTitle = jQueryepisode.find('.medium').text(), 91 episodeURL = jQueryepisode.find('.read-more-blog').attr('href'), 92 episodeMediaURL = jQuery(this).attr('data-url') 93 //episodeGuest = jQueryepisode.find('.guest-name').html(), 94 guestPhoto = jQueryepisode.find('.cast-img').attr('src'); 95 96 jQueryplayerBar.attr('data-podcasting-id', episodeID); 97 jQuery('.episode-title a', jQueryplayerBar).text(episodeTitle).attr('href', episodeURL); 98 jQuery('.episode-cover a', jQueryplayerBar).attr('href', episodeURL); 99 jQuery('.episode-cover img', jQueryplayerBar).attr('src', guestPhoto); 100 if ( media.src == '' ) { 101 playerBarID = episodeID; 102 localStorage.setItem('episodeSelected', 'true'); 103 localStorage.setItem('wasPlaying', 'true'); // If episode was playing during page change, set to true 104 localStorage.setItem('lastEpTitle', episodeTitle); // Set episode title 105 localStorage.setItem('lastEpMedia', episodeMediaURL); // If episode was playing during page change, set to true 106 localStorage.setItem('lastEpID', episodeID); // Set episode ID 107 localStorage.setItem('lastEpGuestPhoto', guestPhoto); // Set guest photo img src url 108 localStorage.setItem('lastEpURL', episodeURL); // Set episode url 109 110 // Animate player bar into view 111 112 jQueryplayerBar.animate({ 113 bottom: '0' 114 }, 400); 115 jQueryplayerBar.attr("data-status","open"); 116 jQuery(window).on('resize load', function() { 117 bodyPadding(); 118 }); 119 120 jQuery(this).addClass('currently-playing').children('span').text('Pause'); 121 jQuery('.podcasting[data-podcasting-id="' + playerBarID + '"]').find('.play-pause span').text('Pause'); 122 jQueryplayerBar.find('.play-pause').addClass('playing'); 123 media.setSrc(episodeMediaURL); 124 media.play(); 125 126 } else if ( playerBarID == episodeID ) { 127 //alert(playerBarID); 128 if ( !media.paused ) {
129 // Same episode and not paused => pause 130 jQuery(this).removeClass('currently-playing').children('span').text('Play'); 131 jQuery('.podcasting[data-podcasting-id="' + playerBarID + '"]').find('.play-pause').children('span').text('Play'); 132 jQuery('.podcasting[data-podcasting-id="' + playerBarID + '"]').find('.play-pause').removeClass('currently-playing'); 133 jQueryplayerBar.find('.play-pause').removeClass('playing'); 134 media.pause(); 135 localStorage.setItem('wasPlaying', 'false'); // If episode was paused during page change, set to false 136 137 } else { 138 139 // Same episode and paused => play 140 jQuery(this).addClass('currently-playing').children('span').text('Pause'); 141 jQuery('.podcasting[data-podcasting-id="' + playerBarID + '"]').find('.play-pause').children('span').text('Pause'); 142 jQuery('.podcasting[data-podcasting-id="' + playerBarID + '"]').find('.play-pause').addClass('currently-playing'); 143 jQueryplayerBar.find('.play-pause').addClass('playing'); 144 media.play(); 145 localStorage.setItem('wasPlaying', 'true'); // If episode was paused during page change, set to false 146 jQueryplayerBar.animate({ 147 bottom: '0' 148 }, 400); 149 jQueryplayerBar.attr("data-status","open"); 150 } 151 } else { 152 playerBarID = episodeID; 153 //alert(playerBarID); 154 // Different episode => load media and play 155 jQuery('.play-pause').not(this).removeClass('currently-playing').children('span').text('Play'); 156 //jQuery(this).addClass('currently-playing').children('span').text('Pause'); 157 jQuery('.podcasting[data-podcasting-id="' + playerBarID + '"]').find('.play-pause').addClass('currently-playing'); 158 jQuery('.podcasting[data-podcasting-id="' + playerBarID + '"]').not(this).find('.play-pause span').text('Pause'); 159 jQuery(this).addClass('currently-playing').children('span').text('Pause'); 160 161 jQueryplayerBar.find('.play-pause').addClass('playing'); 162 163 playerBarID = episodeID; 164 localStorage.setItem('lastEpID', episodeID); // Set episode ID 165 media.setSrc(episodeMediaURL); 166 media.play(); 167 168 localStorage.setItem('episodeSelected', 'true'); 169 localStorage.setItem('wasPlaying', 'true'); // If episode was playing during page change, set to true 170 localStorage.setItem('lastEpTitle', episodeTitle); // Set episode title 171 localStorage.setItem('lastEpMedia', episodeMediaURL); // If episode was playing during page change, set to true 172 localStorage.setItem('lastEpGuestPhoto', guestPhoto); // Set guest photo img src url 173 localStorage.setItem('lastEpURL', episodeURL); // Set episode url 174 175 jQueryplayerBar.animate({ 176 bottom: '0' 177 }, 400); 178 jQueryplayerBar.attr("data-status","open"); 179 } 180 }); 181 182 183 // Toggle play/pause on player bar 184 jQueryplayerBar.find('.play-pause button').on('click', function() { 185 186 187 188 if ( !media.src ) { 189 console.log('No episode selected silly!'); 190 } else if ( !media.paused ) { 191 // Same episode and not paused => pause 192 jQuery(this).parent().removeClass('paused playing'); 193 194 jQuery('.podcasting[data-podcasting-id="' + playerBarID + '"]').find('.play-pause').removeClass('currently-playing'); 195 jQuery('.podcasting[data-podcasting-id="' + playerBarID + '"]').find('.play-pause span').text('Play'); 196 197 media.pause(); 198 localStorage.setItem('wasPlaying', 'false'); 199 } else { 200 // Same episode and paused => play 201 jQuery(this).parent().addClass('playing'); 202 jQuery('.podcasting[data-podcasting-id="' + playerBarID + '"]').find('.play-pause').addClass('currently-playing'); 203 jQuery('.podcasting[data-podcasting-id="' + playerBarID + '"]').find('.play-pause span').text('Pause'); 204 205 media.play(); 206 localStorage.setItem('wasPlaying', 'true'); 207 } 208 }); 209 /*** pouse and close player ***/ 210 jQueryplayerBar.find('.close-player').on('click', function() { 211 media.pause(); 212 jQueryplayerBar.animate({ 213 bottom: '-100%' 214 }, 400); 215 jQueryplayerBar.attr("data-status","close"); 216 localStorage.setItem('episodeSelected', 'false'); 217 jQuery('.podcasting[data-podcasting-id="' + playerBarID + '"]').find('.play-pause').removeClass('currently-playing'); 218 jQuery('.podcasting[data-podcasting-id="' + playerBarID + '"]').find('.play-pause span').text('Play'); 219 }); 220 221 222 // Custom MediaElement JS volume slider 223 if(volume) { 224 media.setVolume(volume); 225 } else { 226 media.setVolume('0.5'); 227 } 228 229 // On volume change, update audio element and set localStorage 230 jQuery(media).on('volumechange', function() { 231 localStorage.setItem('volume', media.volume); 232 jQueryvolume.find('.control').width(sliderWidth * media.volume); 233 }); 234 235 // Volume slider 236 jQueryvolume.on('mousedown', function(e){ 237 e.preventDefault(); 238 jQuery(document).on('mousemove.media-volume', function(e) { 239 var posX = Math.min(Math.max(0, e.pageX - holderOffset), sliderWidth); 240 media.setVolume(Math.min(Math.max(0, posX / sliderWidth), 1)); 241 }).on('mouseup.media-volume', function() { 242 jQuery(document).off('.media-volume'); 243 }); 244 }); 245 246 // Adjust volume with individual up/down buttons 247 jQuery('.volume-down').on('click', function(){ 248 media.setVolume( Math.max(0, media.volume - 0.1) ); 249 }); 250 251 jQuery('.volume-up').on('click', function(){
252 media.setVolume( Math.min(1, media.volume + 0.1) ); 253 }); 254 255 media.addEventListener('ended', EndMedia, false); 256 }, 257 258 // Options 259 type: 'audio/mp3', 260 enableAutosize: true, 261 features: [ 'progress' ] 262 }); 263 function EndMedia(mediaElement, domObject) 264 { 265 266 jQuery('.play-pause').removeClass('currently-playing'); 267 //jQuery('.play-section a').removeClass('currently-playing'); 268 jQuery('.podcast-play-button').find('.play-pause span').text('Play'); 269 jQuery('.play-pause').removeClass('playing'); 270 //jQuery('.play-section a').removeClass('playing'); 271 }
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.