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