https://www.mediateletipos.net/wp-content/plugins/wavesurfer-wp/js…?ver=07754c663fde0188030b2b48bd39579a

1/**
2 * WaveSurfer-WP Front-End Script
3 * Author: X-Raym
4 * Author URl: https://www.extremraym.com
5 * Date: 2017-05-09
6 * Version: 2.7.3
7 */
8
9
10// No conflict for WordPress
11var $j = jQuery.noConflict();
12
13// Init table for storing wavesurfer objects
14var wavesurfer = [];
15
16// On Document Ready and Ajax Complete
17$j(document).on('ready ajaxComplete wavesurfer', function(event, request, settings) {
18	if (typeof settings !== 'undefined') {
19		if (settings.success.name === 'wavesurfer_wp_ajax') return;
20	} else {
21		WaveSurferInit();
22	}
23});
24
25/* FUNCTIONS */
26
27// WaveSurfer Init
28function WaveSurferInit() {
29
30	// Loop in each wavesurfer block
31	$j('.wavesurfer-block').each(function(i) {
32
33		// If there is already a player instance for this id
34		if( typeof wavesurfer[i] !== 'undefined' ) return;
35
36		// Get WaveSurfer block for datas attribute
37		var container = $j(this).children('.wavesurfer-player');
38		var split = container.data('split-channels');
39
40		// Wavesurfer block object
41		var object = this;
42
43		init(i, container, object, split);
44
45	}); // End loop in each wavesurfer-block
46
47} // End function WaveSurferInit
48
49function init(i, container, object, split) {
50
51	// Text selector for the player
52	var selector = '#wavesurfer-player-' + i;
53
54	// Add unique ID to WaveSurfer Block
55	container.attr('id', 'wavesurfer-player-' + i);
56
57	// Get data attribute
58	var wave_color = container.data('wave-color');
59	var progress_color = container.data('progress-color');
60	var cursor_color = container.data('cursor-color');
61	var file_url = container.data('url');
62	var height = container.data('height');
63	var bar_width = container.data('bar-width');
64
65	// Init and Control
66	var options = {
67		container: selector,
68		splitChannels: split,
69		waveColor: wave_color,
70		progressColor: progress_color,
71		cursorColor: cursor_color,
72		backend: 'MediaElement',
73		height: height,
74		barWidth: bar_width,
75		responsive: true
76	};
77
78	// Others parameters
79	var peaks = null;
80	var preload = 'metadata';
81
82	// Create WaveSurfer object
83	wavesurfer[i] = WaveSurfer.create(options);
84
85	// Prevent error if the player can't be initialized
86	if ( typeof wavesurfer[i] === 'undefined' ) return;
87
88	// File
89	wavesurfer[i].load(file_url, peaks, preload);
90
91	// Buttons
92
93	// Timecode blocks
94	var timeblock = $j(object).find('.wavesurfer-time');
95	var duration = $j(object).find('.wavesurfer-duration');
96
97	// Controls Definition
98	var buttonPlay = $j(object).find('button.wavesurfer-play');
99	var buttonStop = $j(object).find('button.wavesurfer-stop');
100	var buttonMute = $j(object).find('button.wavesurfer-mute');
101	var buttonDownload = $j(object).find('button.wavesurfer-download');
102	var buttonLoop = $j(object).find('button.wavesurfer-loop');
103	var debugBlock = $j(object).find('.debug');
104	var progressBar = $j(object).find('progress');
105
106	var playlist = false;
107	if ( $j(object).hasClass('wavesurfer-playlist') ) playlist = true;
108
109	wavesurfer[i].on('error', function() {
110		progressBar.hide();
111	});
112
113	// Timecode during Play
114	wavesurfer[i].on('audioprocess', function() {
115		var current_time = wavesurfer[i].getCurrentTime();
116		timeblock.html(secondsTimeSpanToMS(current_time));
117	});
118
119	// Timecode and duration at Ready
120	wavesurfer[i].on('ready', function() {
121		progressBar.hide();
122		var audio_duration = wavesurfer[i].getDuration();
123		duration.html(secondsTimeSpanToMS(audio_duration));
124		var current_time = wavesurfer[i].getCurrentTime();
125		timeblock.html(secondsTimeSpanToMS(current_time));
126	});
127
128	// Timecode during pause + seek
129	wavesurfer[i].on('seek', function() {
130		var current_time = wavesurfer[i].getCurrentTime();
131		timeblock.html(secondsTimeSpanToMS(current_time));
132	});
133
134	// Add Active class on all stop button at init stage
135	buttonStop.addClass('wavesurfer-active-button');
136
137	// Controls Functions
138	buttonPlay.click(function() {
139
140		wavesurfer[i].playPause();
141
142		// IF PLAYING -> TO PAUSE
143		if ($j(this).hasClass('wavesurfer-active-button')) {
144
145			SetPauseButton(this);
146
147		} else {
148			// IS NOT PLAYING -> TO PLAY
149
150			PauseOtherPlayers(wavesurfer, i);
151
152			$j(this).children('span').text(wavesurfer_localize.pause);
153
154			// Add an active class
155			$j(this).addClass('wavesurfer-active-button');
156
157			// Remove active class from the other buttons
158			$j(this).parent().children('button.wavesurfer-play').removeClass('wavesurfer-paused-button');
159			$j(this).parent().children('button.wavesurfer-stop').removeClass('wavesurfer-active-button');
160		}
161
162	});
163	buttonStop.click(function() {
164		wavesurfer[i].stop();
165
166		if (!$j(this).hasClass('wavesurfer-active-button')) {
167
168			$j(this).addClass('wavesurfer-active-button');
169			$j(this).parent().children('button.wavesurfer-play').removeClass('wavesurfer-active-button');
170			$j(this).parent().children('button.wavesurfer-play').removeClass('wavesurfer-paused-button');
171			$j(this).parent().children('button.wavesurfer-play').children('span').text(wavesurfer_localize.play);
172			var current_time = wavesurfer[i].getCurrentTime();
173			timeblock.html(secondsTimeSpanToMS(current_time));
174		}
175	});
176
177	// Button Mute
178	buttonMute.click(function() {
179		wavesurfer[i].toggleMute();
180
181		// IF ACTIVE
182		if ($j(this).hasClass('wavesurfer-active-button')) {
183			$j(this).removeClass('wavesurfer-active-button');
184			$j(this).children('span').text(wavesurfer_localize.mute);
185		} else {
186			$j(this).addClass('wavesurfer-active-button');
187			$j(this).children('span').text(wavesurfer_localize.unmute);
188		}
189
190	});
191
192	// Define Stop button
193	buttonDownload.click(function() {
194		var audio = $j(this).parent().parent('.wavesurfer-block').children('.wavesurfer-player');
195
196		var download_url = audio.data('url');
197		// Get FileName from URL
198		var index = download_url.lastIndexOf("/") + 1;
199		var file_name = download_url.substr(index);
200		$j(this).children('a').attr('href', download_url);
201		$j(this).children('a').attr('download', file_name);
202
203		// then download
204		download(download_url);
205	});
206
207	// On finish, remove active class on play
208	wavesurfer[i].on('finish', function() {
209		if ( playlist === false ) {
210			if (buttonLoop.hasClass('wavesurfer-active-button') === false) {
211				buttonPlay.removeClass('wavesurfer-active-button');
212				buttonPlay.children('span').text(wavesurfer_localize.play);
213				buttonStop.addClass('wavesurfer-active-button');
214			}
215		}
216	});
217
218	// Button Loop
219	buttonLoop.click(function() { // NOTE: seamless loop need WebAudio backend
220		// IF LOOP
221		if ($j(this).hasClass('wavesurfer-active-button')) {
222			$j(this).removeClass('wavesurfer-active-button');
223			$j(this).children('span').text(wavesurfer_localize.loop);
224			wavesurfer[i].on('finish', function() {
225				wavesurfer[i].pause();
226			});
227		} else {
228			$j(this).addClass('wavesurfer-active-button');
229			$j(this).children('span').text(wavesurfer_localize.unloop);
230			wavesurfer[i].on('finish', function() {
231				wavesurfer[i].play();
232			});
233		}
234	});
235
236	// Check if playlist
237	if ( playlist === true) {
238
239		// The playlist list
240		var tracks = $j(object).find('.wavesurfer-list-group li');
241
242		// Set the first track as active at init
243		var current = 0;
244		tracks.eq(current).addClass('wavesurfer-active-track');
245
246		// When cliking on an item
247		tracks.click(function() {
248
249			if ($j(this).hasClass('wavesurfer-active-track') === false) {
250
251				// Remove active track class to all tracks
252				tracks.each(function() {
253					$j(this).removeClass('wavesurfer-active-track');
254				});
255
256				// Add active track class
257				$j(this).addClass('wavesurfer-active-track');
258
259				file_url = $j(this).data('url');
260				current = $j(this).index();
261
262				// Load sound and waveform
263				wavesurfer[i].load(file_url, peaks, preload);
264
265				wavesurfer[i].on('ready', function() {
266					if (buttonPlay.hasClass('wavesurfer-active-button')) {
267						wavesurfer[i].play();
268					}
269				});
270
271			}
272
273		}); // END click track
274
275		wavesurfer[i].on('finish', function() {
276
277			if (buttonLoop.hasClass('wavesurfer-active-button')) {
278				wavesurfer[i].play();
279			} else {
280				// Increment current track number
281				current++;
282
283				// Get track URL
284				var url = '';
285				url = tracks.eq(current).data('url');
286				// If there no other tracks after
287				if (url !== undefined) {
288					wavesurfer[i].load(url, peaks, preload);
289					progressBar.attr('value', '0');
290					// progressBar.show(); -- hidden since 2.2 for BackEnd element
291
292					// Remove active tracks from all tracks
293					wavesurfer[i].on('loading', function(percent) {
294						progressBar.attr('value', percent);
295					});
296
297					tracks.eq(current - 1).removeClass('wavesurfer-active-track');
298					tracks.eq(current).addClass('wavesurfer-active-track');
299
300					buttonDownload.parent().parent('.wavesurfer-block').children('.wavesurfer-player').data('url', url);
301					// Check if continuous PLay is on.
302					// TO DO
303
304					// When it is loaded, play.
305					if (buttonPlay.hasClass('wavesurfer-active-button')) {
306						wavesurfer[i].on('ready', function() {
307							if (buttonPlay.hasClass('wavesurfer-active-button')) {
308								wavesurfer[i].play();
309							}
310						});
311					}
312
313				} else {
314					if (buttonLoop.hasClass('wavesurfer-active-button') === false) {
315						buttonPlay.removeClass('wavesurfer-active-button');
316						buttonPlay.children('span').text(wavesurfer_localize.play);
317						buttonStop.addClass('wavesurfer-active-button');
318					}
319				}// End if url not undefined
320			} // End if Loop is on
321		}); // End of wavesurfer.on('finish')
322
323	} // End if playlist
324}
325

326// Convert seconds into MS
327function secondsTimeSpanToMS(s) {
328	var m = Math.floor(s / 60); //Get remaining minutes
329	s -= m * 60;
330	s = Math.floor(s);
331	return (m < 10 ? '0' + m : m) + ":" + (s < 10 ? '0' + s : s); //zero padding on minutes and seconds
332} // End secondsTimeSpanToMS
333
334// Pause the other players if Play is pressed on a player
335function PauseOtherPlayers(wavesurfer, i) {
336	$j.each(wavesurfer, function(j) {
337		if (wavesurfer[j].isPlaying() && j != i) {
338			wavesurfer[j].playPause();
339		}
340	});
341
342	// Loop in each wavesurfer block
343	$j('.wavesurfer-block button.wavesurfer-play').each(function(i) {
344		// IF IS NOT PLAYING
345		if ($j(this).hasClass('wavesurfer-active-button')) {
346			SetPauseButton(this);
347		}
348	});
349}
350
351// Set Button to Pause
352function SetPauseButton(object) {
353	$j(object).removeClass('wavesurfer-active-button');
354
355	$j(object).addClass('wavesurfer-paused-button');
356
357	$j(object).children('span').text(wavesurfer_localize.resume);
358
359	$j(object).parent().children('button.wavesurfer-play').removeClass('wavesurfer-active-button');
360	$j(object).parent().children('button.wavesurfer-stop').removeClass('wavesurfer-active-button');
361}