https://gjogv.fo/site/templates/default/assets/javascripts/audioplayer.js

1/*
2 AudioPlayer jQuery Plugin
3 A plugin for custom audio players
4 version 1.1, Nov 11th, 2016
5 by Ingi á Steinamørk
6 
7 The MIT License (MIT)
8 
9 Copyright (c) 2016 Ingi á Steinamørk
10 
11 Permission is hereby granted, free of charge, to any person obtaining a copy of
12 this software and associated documentation files (the "Software"), to deal in
13 the Software without restriction, including without limitation the rights to
14 use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
15 the Software, and to permit persons to whom the Software is furnished to do so,
16 subject to the following conditions:
17 
18 The above copyright notice and this permission notice shall be included in all
19 copies or substantial portions of the Software.
20 
21 THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
22 IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
23 FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
24 COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
25 IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
26 CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
27 */
28
29var AudioPlayer = {
30	$element:   null,
31	$button:    null,
32	$timeline:  null,
33	$progress:  null,
34	$playhead:  null,
35	$time:      null,
36	onplayhead: false,
37	lastx:      null,
38	loading:    false,
39
40	init: function (audio_element, audio_element_source, audio_button, audio_timeline, audio_progress, audio_playhead, audio_time) {
41		audio_element        = typeof audio_element === 'undefined' ? '#audio_element' : audio_element;
42		audio_element_source = typeof audio_element_source === 'undefined' ? '#audio_element_source' : audio_element_source;
43		audio_button         = typeof audio_button === 'undefined' ? '#audio_button' : audio_button;
44		audio_timeline       = typeof audio_timeline === 'undefined' ? '#audio_timeline' : audio_timeline;
45		audio_progress       = typeof audio_progress === 'undefined' ? '#audio_progress' : audio_progress;
46		audio_playhead       = typeof audio_playhead === 'undefined' ? '#audio_playhead' : audio_playhead;
47		audio_time           = typeof audio_time === 'undefined' ? '#audio_time' : audio_time;
48		// Setup references
49		AudioPlayer.$element        = $(audio_element);
50		AudioPlayer.$element_source = $(audio_element_source);
51		AudioPlayer.$button         = $(audio_button);
52		AudioPlayer.$timeline       = $(audio_timeline);
53		AudioPlayer.$progress       = $(audio_progress);
54		AudioPlayer.$playhead       = $(audio_playhead);
55		AudioPlayer.$time           = $(audio_time);
56		// Bind events
57		AudioPlayer.$button.on('click', AudioPlayer.playAudio);
58		AudioPlayer.$element.on('timeupdate', AudioPlayer.audioTimeUpdate);
59		AudioPlayer.$timeline.on('click', function (e) {
60			AudioPlayer.$element[0].currentTime = AudioPlayer.$element[0].duration * AudioPlayer.clickPercent(e);
61			AudioPlayer.movePlayhead(e);
62		});
63		AudioPlayer.$playhead.on('mousedown touchstart', AudioPlayer.mouseDown);

64		$(window).on('mouseup touchend', AudioPlayer.mouseUp);
65		AudioPlayer.$element.on('canplaythrough progress', function (e) {
66			AudioPlayer.audioTimeUpdate(e);
67		});
68		AudioPlayer.$element.on('ended', function (e) {
69			if (AudioPlayer.$element.get(0).hasAttribute('data-source1')) {
70				AudioPlayer.$element_source.attr("src", AudioPlayer.$element.attr('data-source1')).detach().appendTo(AudioPlayer.$element);
71				if (AudioPlayer.$element.get(0).hasAttribute('data-source2')) {
72					AudioPlayer.$element.attr('data-source1', AudioPlayer.$element.attr('data-source2'));
73					AudioPlayer.$element.removeAttr('data-source2');
74				} else {
75					AudioPlayer.$element.removeAttr('data-source1');
76				}
77				AudioPlayer.loading = true;
78				AudioPlayer.$element.get(0).load();
79			}
80		});
81		AudioPlayer.$element.on('canplay', function (e) {
82			if (AudioPlayer.loading) {
83				AudioPlayer.loading = false;
84				AudioPlayer.playAudio();
85			}
86		});
87	},
88
89	playAudio: function () {
90		if (AudioPlayer.$element[0].paused) {
91			AudioPlayer.$element[0].play();
92			AudioPlayer.$button.removeClass('audioplayer--play').addClass('audioplayer--pause');
93		} else {
94			AudioPlayer.$element[0].pause();
95			AudioPlayer.$button.removeClass('audioplayer--pause').addClass('audioplayer--play');
96		}
97	},
98
99	audioTimeUpdate: function () {
100		var position_percent = AudioPlayer.$element[0].currentTime / AudioPlayer.$element[0].duration;
101		AudioPlayer.$playhead.css({
102			'left':        (position_percent * 100) + '%',
103			'margin-left': (position_percent * -AudioPlayer.$playhead.outerWidth()) + 'px'
104		});
105		AudioPlayer.$progress.css({
106			// 'right': 'calc(' + ((1 - position_percent) * 100) + '% + ' + ((AudioPlayer.$playhead.outerWidth() * position_percent) - (AudioPlayer.$playhead.outerWidth()/2)) + 'px)'
107			'right': ((1 - position_percent) * 100) + '%'
108		});
109		var duration = AudioPlayer.$element[0].duration;
110		AudioPlayer.$time.find('.seconds_elapsed').text(duration * position_percent);
111		AudioPlayer.$time.find('.seconds_left').text(duration - (duration * position_percent));
112		AudioPlayer.$time.find('.seconds_total').text(duration);
113		AudioPlayer.$time.find('.time_elapsed').text(AudioPlayer.formatTime(duration * position_percent));
114		AudioPlayer.$time.find('.time_left').text(AudioPlayer.formatTime(duration - (duration * position_percent)));
115		AudioPlayer.$time.find('.time_total').text(AudioPlayer.formatTime(duration));
116		if (AudioPlayer.$element[0].currentTime === AudioPlayer.$element[0].duration) {
117			AudioPlayer.$button.removeClass('audioplayer--pause').addClass('audioplayer--play');
118		}
119	},
120
121	clickPercent: function (e) {
122		if (e.type !== 'touchend') {
123			AudioPlayer.lastx = e.pageX;
124		}
125		var offset_left  = AudioPlayer.$timeline.offset().left;
126		var offset_right = offset_left + AudioPlayer.$timeline.outerWidth();
127		return (AudioPlayer.lastx - offset_left) / (offset_right - offset_left);
128	},
129
130	mouseDown: function () {
131		AudioPlayer.onplayhead = true;
132		$(window).on('mousemove touchmove', AudioPlayer.movePlayhead);
133		AudioPlayer.$element.off('timeupdate', AudioPlayer.audioTimeUpdate);
134	},
135
136	mouseUp: function (e) {
137		if (AudioPlayer.onplayhead === true) {
138			AudioPlayer.movePlayhead(e);
139			$(window).off('mousemove touchmove', AudioPlayer.movePlayhead);
140			AudioPlayer.$element[0].currentTime = AudioPlayer.$element[0].duration * AudioPlayer.clickPercent(e);
141			AudioPlayer.$element.on('timeupdate', AudioPlayer.audioTimeUpdate);
142		}
143		AudioPlayer.onplayhead = false;
144	},
145
146	movePlayhead: function (e) {
147		if (e.type === 'touchmove') {
148			AudioPlayer.lastx = e.originalEvent.touches[0].pageX ? e.originalEvent.touches[0].pageX : AudioPlayer.lastx;
149		} else if (e.type === 'touchend') {
150		} else {
151			AudioPlayer.lastx = e.pageX;
152		}
153		var offset_left      = AudioPlayer.$timeline.offset().left;
154		var offset_right     = offset_left + AudioPlayer.$timeline.outerWidth();
155		var position_percent = (AudioPlayer.lastx - offset_left) / (offset_right - offset_left);
156		if (position_percent < 0) position_percent = 0;
157		if (position_percent > 1) position_percent = 1;
158		AudioPlayer.$playhead.css({
159			'left':        (position_percent * 100) + '%',
160			'margin-left': (position_percent * -AudioPlayer.$playhead.outerWidth()) + 'px'
161		});
162		AudioPlayer.$progress.css({
163			// 'right': 'calc(' + ((1 - position_percent) * 100) + '% + ' + ((AudioPlayer.$playhead.outerWidth() * position_percent) - (AudioPlayer.$playhead.outerWidth())) + 'px)',
164			'right': ((1 - position_percent) * 100) + '%'
165		});
166		var duration = AudioPlayer.$element[0].duration;
167		AudioPlayer.$time.find('.seconds_elapsed').text(duration * position_percent);
168		AudioPlayer.$time.find('.seconds_left').text(duration - (duration * position_percent));
169		AudioPlayer.$time.find('.seconds_total').text(duration);
170		AudioPlayer.$time.find('.time_elapsed').text(AudioPlayer.formatTime(

170duration * position_percent));
171		AudioPlayer.$time.find('.time_left').text(AudioPlayer.formatTime(duration - (duration * position_percent)));
172		AudioPlayer.$time.find('.time_total').text(AudioPlayer.formatTime(duration));
173	},
174
175	formatTime: function (seconds_input, include_hours) {
176		include_hours = typeof include_hours === 'undefined' ? (seconds_input >= 3600) : include_hours;
177		seconds_input = parseInt(seconds_input, 10);
178		var hours = Math.floor(seconds_input / 3600);
179		var minutes = Math.floor((seconds_input - (hours * 3600)) / 60);
180		var seconds = seconds_input - (hours * 3600) - (minutes * 60);
181		if (!include_hours) {
182			minutes = minutes + (hours * 60);
183			hours = 0;
184		}
185		hours = (hours < 10 ? hours : hours);
186		minutes = (minutes < 10 ? '0' + minutes : minutes);
187		seconds = (seconds < 10 ? '0' + seconds : seconds);
188		if (include_hours) {
189			return hours + ':' + minutes + ':' + seconds;
190		} else {
191			return minutes + ':' + seconds;
192		}
193	}
194
195
196};