https://www.rarovideo.com/wp-content/themes/fwrd/js/iron-audioplayer.js

1var elementAudio = document.createElement( 'audio' );
2elementAudio.src =  IRON.state.theme_url + '/js/assets/default.wav';
3
4IRON.audioPlayer = function($){
5	"use strict";
6	function initPlayer( player ){
7		var audioPlayer = player;
8		this.audioPlayer = player;
9		var waveContainer = this.audioPlayer.find('.player .wave').attr('id');
10		var playlist = audioPlayer.find('.playlist');
11		this.playlist = playlist;
12
13
14		var wavesurfer = WaveSurfer.create({
15			container: '#' + waveContainer,
16			cursorWidth: 0,
17			barWidth: 1,
18			barHeight: 1000,
19			progressColor: iron_vars.fwrd_music.color_progress,
20			waveColor: iron_vars.fwrd_music.color_base,
21			height: 20,
22			backend: 'MediaElement',
23			mediaControls: true,
24		});
25
26		wavesurfer.on('loading', function(){
27				var progressLoad = arguments[0]
28				audioPlayer.find('.progressLoading').css('background', iron_vars.fwrd_music.color_base );
29				audioPlayer.find('.progressLoading').css('width', 'calc( ' + progressLoad + '% - 200px )' )
30				if (progressLoad == 100) {
31					audioPlayer.find('.player').addClass('reveal')
32					audioPlayer.find('.progressLoading').css('opacity', '0' )
33				}
34			})
35
36		this.wavesurfer = wavesurfer;
37
38		setPlaylist( playlist , wavesurfer, audioPlayer );
39		setCurrentTrack( playlist.find('li').eq(0), playlist.find('li').index(), audioPlayer, wavesurfer );
40		setControl( wavesurfer, audioPlayer, playlist );
41		setNextSong( wavesurfer, audioPlayer, playlist );
42		trackListItemResize();
43
44		if( audioPlayer.data('autoplay') ){
45			if ( wavesurfer.isPlaying() )
46				return
47	
48			wavesurfer.on('ready', function(){
49				play( audioPlayer, wavesurfer );
50			})
51		}
52	}
53
54	var setNextSong = function( wavesurfer, audioPlayer, playlist ){
55		wavesurfer.on('finish', function(){
56			next(audioPlayer, playlist)
57		})
58	}
59	
60	function setCurrentTrack( track, index, audioPlayer, wavesurfer ){
61		var albumArt = audioPlayer.find('.album .album-art');
62		var trackTitle = audioPlayer.find('.track-title');
63		var trackArtist = audioPlayer.find('.cr_it-artists-value');
64		var albumTitle = audioPlayer.find('.album-title');
65		var albumTitle = audioPlayer.find('.cr_it-playlist-title');
66		var albumReleaseDate = audioPlayer.find('.cr_it-date-value');
67
68		if ( albumArt.find('img').length ) {
69			albumArt.find('img').attr('src', track.data('albumart'));
70		}else{
71			albumArt.css('background-image', 'url(' + track.data('albumart') + ')');
72		}
73
74		if( !audioPlayer.hasClass('show-playlist') ){
75
76			albumArt.css('cursor','pointer')
77		}
78			audioPlayer.data('currentTrack', index);
79
80		
81		trackTitle.text(track.data('tracktitle'));
82		trackArtist.text(track.data('trackartists'));
83		albumReleaseDate.text(track.data('releasedate'));
84		albumTitle.text(track.data('albumtitle'));
85
86		audioPlayer.find('.player').removeClass('hide')
87
88		if ( !track.data('showloading') ) {
89			audioPlayer.find('.player').addClass('hide')
90		}else{
91			audioPlayer.find('.progressLoading').css('opacity', '0.75' )
92		}
93
94		setAudio(track.data('audiopath'), wavesurfer);
95		setTime( audioPlayer, wavesurfer );
96	
97		hideEmptyAttribut(track.data('releasedate'), audioPlayer.find('.cr_it-playlist-release-date'));
98		hideEmptyAttribut(track.data('trackartists'), audioPlayer.find('.cr_it-playlist-artists'));
99
100
101	}
102
103	function setPlaylist( playlist , wavesurfer, audioPlayer ){
104		playlist.find('li').each(function(){
105			setSingleTrack( $(this), $(this).index(), wavesurfer, audioPlayer );
106		})
107	}
108
109	function setTime( audioPlayer, wavesurfer ){
110		wavesurfer.on('ready', function(){
111			var totalTime = moment.duration(wavesurfer.getDuration(), 'seconds' );
112			audioPlayer.find('.totalTime').html( moment( totalTime.minutes()+':'+totalTime.seconds(), 'm:s' ).format( 'mm:ss' ) );
113			wavesurfer.on('audioprocess', function(){
114				var time = moment.duration(wavesurfer.getCurrentTime(), 'seconds' );
115				audioPlayer.find('.currentTime').html( moment( time.minutes()+':'+time.seconds(), 'm:s' ).format( 'mm:ss' ) );
116			})
117		})
118	}
119
120	function setControl( wavesurfer, audioPlayer, playlist ){
121		var ctrl = audioPlayer.find('.control');
122		if ( IRON.state.enable_ajax ){
123
124			audioPlayer.find('.wave').remove()
125
126		}
127
128		ctrl.on('click', '.play', function(){
129			play( audioPlayer, wavesurfer )
130		})
131		ctrl.on('click', '.previous', function(){
132			previous( audioPlayer, wavesurfer, playlist )
133		})
134		ctrl.on('click', '.next', function(){
135			next( audioPlayer, playlist )
136		})
137
138	}
139
140	function setSingleTrack( singleTrack , eq, wavesurfer, audioPlayer ){
141		var tracknumber = eq + 1;
142		var trackplay = $('<span/>',{
143			class: 'track-number',
144			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>'
145		})
146		$('')
147		$('<a/>',{
148			class: 'audio-track',
149			click: function(){
150					setCurrentTrack( singleTrack , eq, audioPlayer, wavesurfer);
151					audioPlayer.find('.playlist li').removeClass('current');
152					singleTrack.addClass('current');
153					wavesurfer.play();
154					togglePlaying( audioPlayer, wavesurfer);
155			}
156		}).appendTo(singleTrack).prepend(trackplay).append('<div class="tracklist-item-title">' + singleTrack.data('tracktitle') + '</div>');
157	}
158
159	function trackListItemResize(){
160		$('.playlist li').each(function(){
161			$(this).find('.tracklist-item-title').css( 'max-width', $(this).outerWidth() - $(this).find('.button').outerWidth() - $(this).find('.track-number').outerWidth() - 10 );
162		})
163	};
164
165	function setAudio( audio, wavesurfer){
166		elementAudio.src = audio
167		wavesurfer.load( elementAudio );
168	}
169
170	function getTime( wavesurfer ){
171		return wavesurfer.getCurrentTime()
172	}
173
174	function togglePlaying(audioPlayer, wavesurfer  ) {
175
176		$.each(IRON.players, function(index, value){
177			IRON.players[index].audioPlayer.removeClass('audio-playing');
178		})
179
180		if ( wavesurfer.isPlaying() ) {
181			audioPlayer.addClass('audio-playing');
182			return;
183		}
184		audioPlayer.removeClass('audio-playing')
185	}
186
187	function play( audioPlayer, wavesurfer ){
188		wavesurfer.playPause();
189		togglePlaying( audioPlayer, wavesurfer);
190	}
191
192	function previous( audioPlayer, wavesurfer, playlist ){
193		var currentTrack = audioPlayer.data('currentTrack');
194		var nextTrack = currentTrack - 1;
195
196		if ('2' < getTime( wavesurfer ) ) {
197			wavesurfer.seekTo(0);
198			return;
199		}
200		playlist.find('li').eq(nextTrack).find('a').click();
201
202	}
203
204	function next( audioPlayer, playlist ){
205		var currentTrack = audioPlayer.data('currentTrack');
206		var nextTrack = currentTrack + 1;
207
208		if ( !playlist.find('li').eq(nextTrack).length){
209			nextTrack = 0;
210		}
211		playlist.find('li').eq(nextTrack).find('a').click();
212	}
213
214	function getPlayer(){
215		return this;
216	}
217	function getplay(){
218		play( this.audioPlayer, this.wavesurfer )
219	}
220
221	return {
222		init : initPlayer,
223		getPlayer : getPlayer,
224		play : getplay
225
226	};
227
228}(jQuery);
229
230
231
232function hideEmptyAttribut(string, selector){
233		if(string== ''){
234			selector.css('display', 'none');
235		}else{
236			selector.css('display', 'block');
237		}
238}
239
240
241IRON.players = [];
242jQuery('.iron-audioplayer').each(function(){
243
244	var player = Object.create(  IRON.audioPlayer );
245	player.init(jQuery(this));
246
247	IRON.players.push(player)
248})