Welcome, guest! Login / Register - Why register?
Psst.. new poll here.
[email protected] webmail now available. Want one? Go here.
Cannot use outlook/hotmail/live here to register as they blocking our mail servers. #microsoftdeez
Obey the Epel!

Paste

Pasted as JavaScript by sonaar ( 4 years ago )
IRON.audioPlayer = function($){
	"use strict";
	var seekTimeOut;
	var autoplayEnable;
	var wavesurferEnable = Boolean( sonaar_music.option.waveformType === 'wavesurfer' );


	function initPlayer( player ){
		var audioPlayer = player;
		this.audioPlayer = player;
		var waveContainer = this.audioPlayer.find('.player .wave').attr('id');
		var playlist = audioPlayer.find('.playlist');
		this.playlist = playlist;
		this.autoplayEnable = audioPlayer.data('autoplay')

		$( audioPlayer ).css('opacity', 1);

		if( wavesurferEnable ){

			var wavesurfer = WaveSurfer.create({
				container: '#' + waveContainer,
				cursorWidth: 0,
				barWidth: 1,
				progressColor: sonaar_music.option.music_player_progress_color,
				waveColor: sonaar_music.option.music_player_timeline_color,
				height: 70,
				mediaControls: true,
				backend: 'MediaElement',
				mediaControls: false,
			});

			wavesurfer.on('loading', function(){
					var progressLoad = arguments[0]
					audioPlayer.find('.progressLoading').css('background', sonaar_music.option.music_player_timeline_color );
					audioPlayer.find('.progressLoading').css('width', 'calc( ' + progressLoad + '% - 200px )' )
			})

		}else{
			var wavesurfer = $('#' + waveContainer).find('.sonaar_media_element')[0]
		}

		this.wavesurfer = wavesurfer;

		if( !wavesurferEnable ){
			fakeWaveUpdate( wavesurfer, audioPlayer, playlist );
			$(audioPlayer).find('.wave').css('opacity', '1');
		}
		setPlaylist( playlist , wavesurfer, audioPlayer );
		setCurrentTrack( playlist.find('li').eq(0), playlist.find('li').index(), audioPlayer, wavesurfer );
		if(	!audioPlayer.data('no-wave') && wavesurferEnable ){
			setAudio(playlist.find('li').eq(0).data('audiopath'), wavesurfer, audioPlayer);
		}
		setControl( this.wavesurfer, audioPlayer, playlist);
		setNextSong( wavesurfer, audioPlayer, playlist );
		trackListItemResize();
		$(window).on('resize', function(){
			trackListItemResize();
		})


	}

	var setNextSong = function( wavesurfer, audioPlayer, playlist ){
			if( wavesurferEnable ){
				wavesurfer.on('finish', function(){

					if (!audioPlayer.data('no-track-skip')){
						next(audioPlayer,wavesurfer, playlist)
					}else{
						togglePlaying(audioPlayer, wavesurfer);
					}

				})
			}
	}

	var triggerPlay = function(wavesurfer, audioPlayer ){
		if( ! ifTrackIsPlaying( wavesurfer ) ){
			if( wavesurferEnable ){
				wavesurfer.on('ready', function(){	
					wavesurfer.play();
					togglePlaying(audioPlayer, wavesurfer)
				})
			}else{
				wavesurfer.play();
				togglePlaying(audioPlayer, wavesurfer)
			}
		}
	}


	function setCurrentTrack( track, index, audioPlayer, wavesurfer ){
		var albumArt = audioPlayer.find('.album .album-art');
		var album = audioPlayer.find('.album');
		var trackTitle = audioPlayer.find('.track-title');
		var trackTime = audioPlayer.find('.track-time');
		var trackArtist = audioPlayer.find('.sr_it-artists-value');
		var albumTitle = audioPlayer.find('.album-title');
		var albumTitle = audioPlayer.find('.sr_it-playlist-title');
		var albumReleaseDate = audioPlayer.find('.sr_it-date-value');

		
		if( track.data('albumart') ){
			album.show();
			albumArt.show();
			albumArt.css('cursor','pointer');
			if ( albumArt.find('img').length ) {
				albumArt.find('img').attr('src', track.data('albumart'));
			}else{
				albumArt.css('background-image', 'url(' + track.data('albumart') + ')');
			}
		}else{
			album.hide();
			albumArt.hide();
		}

		audioPlayer.data('currentTrack', index);

		trackTitle.text(track.data('tracktitle'));
		trackTime.text(track.data('tracktime'));
		trackArtist.text(track.data('trackartists'));
		albumReleaseDate.text(track.data('releasedate'));
		albumTitle.text(track.data('albumtitle'));

		audioPlayer.find('.player').removeClass('hide')

		audioPlayer.find('.wave').removeClass('reveal')

		if ( !track.data('showloading') ) {
			audioPlayer.find('.player').addClass('hide')
		}else{
			audioPlayer.find('.progressLoading').css('opacity', '0.75' )
		}
		if( wavesurferEnable ){
			setAudio(track.data('audiopath'), wavesurfer, audioPlayer);
		}

		if( !wavesurferEnable ){
			createFakeWave( audioPlayer );
		}
		setTime( audioPlayer, wavesurfer );
		
		hideEmptyAttribut(track.data('releasedate'), audioPlayer.find('.sr_it-playlist-release-date'));

	}

	function setPlaylist( playlist , wavesurfer, audioPlayer ){
		playlist.find('li').each(function(){
			setSingleTrack( $(this), $(this).index(), wavesurfer, audioPlayer );
		})
	}

	function setTime( audioPlayer, wavesurfer ){
		if( wavesurferEnable ){
			wavesurfer.on('ready', function () {
				if (wavesurfer.isPlaying())
					return

				wavesurfer.on('audioprocess', function () {
					var currentTime = wavesurfer.getCurrentTime();
					var duration = wavesurfer.getDuration();
					var time = moment.duration(currentTime, 'seconds' )
					

					currentTime = moment( time.minutes()+':'+time.seconds(), 'm:s' ).format( 'mm:ss' )


					if(duration !== Infinity){
						var totalTime = moment.duration(wavesurfer.getDuration() - wavesurfer.getCurrentTime(), 'seconds');
						if( totalTime.hours() >= 12 || totalTime.hours() <= 0 ){
						audioPlayer.find('.totalTime').html( '-' + moment( totalTime.minutes()+':'+totalTime.seconds(), 'm:s' ).format( 'mm:ss' ));
						}else{
						audioPlayer.find('.totalTime').html( '-' + moment( totalTime.hours()+':'+totalTime.minutes()+':'+totalTime.seconds(), 'h:m:s' ).format( 'h:mm:ss' ));
						}

					}else{
						audioPlayer.find('.totalTime').html( this.list.tracks[this.currentTrack].length);
					}
						audioPlayer.find('.currentTime').html(moment(time.minutes() + ':' + time.seconds(), 'm:s').format('mm:ss'));
					}
				)

				audioPlayer.find('.player').addClass('reveal')
				$('.wave').addClass('reveal')
				audioPlayer.find('.progressLoading').css('opacity', '0')
			})
		}else{
			$(wavesurfer).on('timeupdate', function(){
				var currentTime = wavesurfer.currentTime;
				var time = moment.duration(currentTime, 'seconds' );
				audioPlayer.find('.currentTime').html(moment(time.minutes() + ':' + time.seconds(), 'm:s').format('mm:ss'));
				if( wavesurfer.duration !== Infinity ){
					var timeLeft = (moment.duration(wavesurfer.duration - wavesurfer.currentTime, 'seconds' ));
					audioPlayer.find('.totalTime').html('-' + moment(timeLeft.minutes() + ':' + timeLeft.seconds(), 'm:s').format('mm:ss'));
				}else{
					audioPlayer.find('.totalTime').html('');
				}
			});
		}
	}

	function setControl( wavesurfer, audioPlayer, playlist ){
		// var ctrl = audioPlayer.find('.control');

		audioPlayer.on('click', '.play, .album .album-art', function(){
			togglePause();

			if ( !audioPlayer.hasClass('audio-playing') ) {
				if( wavesurferEnable || wavesurfer.currentSrc != ''){
					play( audioPlayer, wavesurfer );
					triggerPlay(wavesurfer, audioPlayer );
				}else{
					$(audioPlayer).attr('first-track-loading', 'true');
					playlist.find('li').eq(0).find('a').click();
				}
			}else{
				togglePause();
			}
			togglePlaying( audioPlayer, wavesurfer);

		});
		audioPlayer.on('click', '.previous', function(){
			previous( audioPlayer, wavesurfer, playlist )
		})
		audioPlayer.on('click', '.next', function(){
			next( audioPlayer, wavesurfer, playlist )
		})

	}

	function setSingleTrack( singleTrack , eq, wavesurfer, audioPlayer ){
		singleTrack.find('.audio-track').remove();
		var tracknumber = eq + 1;
		var trackplay = $('<span/>',{
			class: 'track-number',
			html: '<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 17.5 21.2" style="enable-background:new 0 0 17.5 21.2;" xml:space="preserve"><path d="M0,0l17.5,10.9L0,21.2V0z"></path><rect width="6" height="21.2"></rect><rect x="11.5" width="6" height="21.2"></rect></svg><span class="number">' + tracknumber + '</span>'
		})
		$('')
		$('<a/>',{
			class: 'audio-track',
			click: function(){
				if( wavesurfer.currentSrc == '' ){
					$(audioPlayer).attr('first-track-loading', 'true');
				}
				if( $(this).parent().attr('data-audiopath').length == 0 ){
					return;
				}

				if ( ifTrackIsPlaying( wavesurfer ) && singleTrack.hasClass('current')) {
					togglePause();
					togglePlaying( audioPlayer, wavesurfer);
				}else if(singleTrack.hasClass('current')){
					play( audioPlayer, wavesurfer )
				}else{
					togglePause();
					setCurrentTrack( singleTrack , eq, audioPlayer, wavesurfer);
					setAudio( singleTrack.data('audiopath'), wavesurfer, audioPlayer)
					audioPlayer.find('.playlist li').removeClass('current');
					singleTrack.addClass('current');
					triggerPlay(wavesurfer, audioPlayer);
					togglePlaying( audioPlayer, wavesurfer);
				}
			}
		}).appendTo(singleTrack).prepend(trackplay).append('<div class="tracklist-item-title">' + singleTrack.data('tracktitle') + ' <span class="tracklist-item-time">' + singleTrack.data('tracktime') + '</span></div>');
	}

	function trackListItemResize(){
		$('.playlist li').each(function(){
			var storeWidth = $(this).find('.store-list').outerWidth();
			var trackWidth = $(this).find('.track-number').outerWidth();
			$(this).find('.tracklist-item-title').css( 'max-width', $(this).outerWidth() - storeWidth - trackWidth - 10 );
		})
	};

	var setAudio = function( audio, wavesurfer ){
		console.log('setAudio')
		if( wavesurferEnable ){
			seekTimeOut = setTimeout( function(){		
				wavesurfer.load( audio );
			}, 250 )
		}else{
			$(wavesurfer).attr('src', audio);
			wavesurfer.load();

			$( '.sonaar_fake_wave' ).on('click', function(event){
				var currentAudio = $(this).find( '.sonaar_media_element' )[0];
				var progressedAudio = $(this).width() / event.offsetX;
				currentAudio.currentTime = currentAudio.duration / progressedAudio;
			})
		}
		
	}

	function getTime( wavesurfer ){
		return wavesurfer.getCurrentTime()
	}

	function togglePlaying(audioPlayer, wavesurfer  ) {

		$.each(IRON.players, function(){
			this.audioPlayer.removeClass('audio-playing');
		})

		if ( ifTrackIsPlaying( wavesurfer ) ){
			audioPlayer.addClass('audio-playing');
			return;
		}
		
		audioPlayer.removeClass('audio-playing')
	}

	function togglePause(){
		$.each(IRON.players, function(){
			if( ifTrackIsPlaying( this.wavesurfer ) ){
				this.wavesurfer.pause();
			}
		})
	}

	function play( audioPlayer, wavesurfer ){

		if( ! audioPlayer.find('.playlist li').hasClass('current') ){
			audioPlayer.find('li:first-of-type').addClass('current')
		}
		if( ifTrackIsPlaying( wavesurfer ) ){
			wavesurfer.pause();
		}else{
			wavesurfer.play();
		}
		togglePlaying( audioPlayer, wavesurfer);
	}

	function previous( audioPlayer, wavesurfer, playlist ){
		var currentTrack = audioPlayer.data('currentTrack');
		var nextTrack = currentTrack - 1;
		
		if( wavesurferEnable ){
			if ('2' < getTime( wavesurfer ) ) {
				wavesurfer.seekTo(0);
				return;
			}
		}
		playlist.find('li').eq(nextTrack).find('a').click();

	}

	function next( audioPlayer, wavesurfer, playlist ){
		var currentTrack = audioPlayer.data('currentTrack');
		var nextTrack = currentTrack + 1;

		if ( !playlist.find('li').eq(nextTrack).length){
			nextTrack = 0;
		}
		wavesurfer.pause();
		playlist.find('li').eq(nextTrack).find('a').click();
	}

	function getPlayer(){
		return this;
	}

	function getplay(){
		play( this.audioPlayer, this.wavesurfer )
	}

	function ifTrackIsPlaying( wavesurfer ){
		if( wavesurferEnable ){
			return wavesurfer.isPlaying();
		}else{
			return !wavesurfer.paused;
		}
	}

	var fakeWaveUpdate = function( wavesurfer, audioPlayer, playlist ){
		$(wavesurfer).on('timeupdate', function(){
			$( audioPlayer ).find('.sonaar_wave_cut').width(this.currentTime / this.duration*100+'%');
			if( wavesurfer.ended ){ //When track ended
				if (!audioPlayer.data('no-track-skip')){
					next( audioPlayer, wavesurfer, playlist )
				}
			}
		});
	}

	var createFakeWave = function( audioPlayer ){
		if($(audioPlayer).attr('first-track-loading') == 'true'){
			$(audioPlayer).removeAttr('first-track-loading');
			return;
		}
		var svg = d3.selectAll(  $(audioPlayer).find('.sonaar_fake_wave svg') )
		var varheight = [];

		var linesnbr = window.innerWidth / 2; // 2px is the width area for each rect (gap included)

		for (var index = 0; index < linesnbr; index++) {
			varheight.push(Math.random() * (60 - 0) + 0)
		}
		svg.selectAll('rect').remove()

		svg.selectAll('rect')
		.data(varheight)
		.enter()
		.append('rect')
		.attr('x', function (d, i) {
		// adjust spectro width total
			return (i * 1) + (i * 1) + 'px'
		})
		.attr('y', function(d) {
			var pos = (60 - d) / 2
			
			return pos +'px'
		})
		.attr('height', function(d) {
			var pos = d
			return pos +'px'
		})
		.attr('fill', function() {
			return sonaar_music.option.music_player_timeline_color
		})
		// adjust spectro bar width size
		.attr('width', '1.4')
	}

	/*function setContinuousPlayer( eq , audioPlayer){
		IRON.sonaar.player.setPlaylist( audioPlayer, eq )
	}*/

	return {
		init : initPlayer,
		getPlayer : getPlayer,
		play : getplay,
		autoplayEnable : autoplayEnable,
		triggerPlay : triggerPlay

	};

}(jQuery);



function hideEmptyAttribut(string, selector){
		if(string== ''){
			selector.css('display', 'none');
		}else{
			selector.css('display', 'block');
		}
}


//Load Music player Content
function setIronAudioplayers(){
	IRON.players = []
	jQuery('.iron-audioplayer').each(function(){

		var player = Object.create(  IRON.audioPlayer )
		player.init(jQuery(this))

		IRON.players.push(player)
	})
  
}
setIronAudioplayers();

 

Revise this Paste

Your Name: Code Language: