https://www.parliament.go.th/assets/theme/Main_theme/files/js/player.js?v=261001051938

1document.addEventListener('DOMContentLoaded', function() {
2	var audio = document.getElementById('audio'),
3      player = document.querySelectorAll('.player')[0],
4		play = document.querySelectorAll('.btn__play')[0],
5		icoPlay = document.querySelectorAll('.btn__play__arrow')[0],
6		icoPause = document.querySelectorAll('.btn__play__pause')[0],
7		volumeProgress = document.querySelectorAll('.player__volume__progress')[0],
8		volumeBar = document.querySelectorAll('.player__volume__bar')[0],
9		btnVolume = document.querySelectorAll('.btn__volume')[0],
10		timeline = document.querySelectorAll('.player__timeline')[0],
11		timeProgress = document.querySelectorAll('.player__timeline__progress')[0],
12		timeNow = document.querySelectorAll('.player__timeline__time--now')[0],
13		timeEnd = document.querySelectorAll('.player__timeline__time--end')[0],
14		duration;
15
16		timeProgress.style.width = '0%';
17		timeNow.innerHTML = '00:00:00';
18		timeEnd.innerHTML = '00:00:00';
19		audio.volume = 0.7;
20
21		audio.addEventListener("canplaythrough", function () {
22			duration = audio.duration;
23		}, false);
24
25	function playAudio() {
26		if (audio.paused) {
27			audio.play();
28			icoPause.style.display = 'block';
29			icoPlay.style.display = 'none';
30		} else { 
31			audio.pause();
32			icoPause.style.display = 'none';
33			icoPlay.style.display = 'block';
34		}
35	}
36	function uptadeTime() {
37		var now = 100 * (audio.currentTime / duration);
38		timeProgress.style.width = now + '%';
39		timeNow.innerHTML = formatTime(audio.currentTime);
40		timeEnd.innerHTML = formatTime(duration - audio.currentTime);
41	}
42
43	function formatTime(secs){
44		var times = new Array(3600, 60, 1);
45		var time = '';
46		var tmp;
47		for(var i = 0; i < times.length; i++){
48			tmp = Math.floor(secs / times[i]);
49			if(tmp < 1){
50				tmp = '00';
51			}
52			else if(tmp < 10){
53				tmp = '0' + tmp;
54			}
55			time += tmp;
56			if(i < 2){
57				time += ':';
58			}
59			secs = secs % times[i];
60		}
61		return time;
62	}
63
64	function clickPercent(e) {
65		return ((e.pageX - timeline.offsetLeft-player.offsetLeft) / timeline.offsetWidth);
66	}
67	 
68	function updateTimeline(e) {
69		var newSize = e.pageX - timeline.offsetLeft-9;
70	        
71		if (newSize >= 0 && newSize <= timeline.offsetWidth) {
72			timeProgress.style.width = newSize + "px";
73		}
74		if (newSize < 0) {
75			timeProgress.style.width = "0px";
76		}
77		if (newSize > timeline.offsetWidth) {
78			timeProgress.style.width = timeline.offsetWidth + "px";
79		}
80	}
81	function updateAudio(e) {
82		var percent = ((e.pageX - volumeBar.offsetLeft-player.offsetLeft) / volumeBar.offsetWidth);
83
84		if (percent >= 0 && percent <= volumeBar.offsetWidth) {
85			volumeProgress.style.width = 100*percent + "%";
86			btnVolume.classList.remove('fa-volume-off');
87			btnVolume.classList.add('fa-volume-up');
88		}
89		if (percent <= 0) {
90			volumeProgress.style.width = "0";
91			btnVolume.classList.remove('fa-volume-up');
92			btnVolume.classList.add('fa-volume-off');
93		}
94		if (percent > volumeBar.offsetWidth) {
95			volumeProgress.style.width = "100%";
96			btnVolume.classList.remove('fa-volume-off');
97			btnVolume.classList.add('fa-volume-up');
98		}
99
100		audio.volume = percent;
101	}
102
103	function autoStop() {
104		if(audio.paused || audio.currentTime >= duration) {
105			icoPause.style.display = 'none';
106			icoPlay.style.display = 'block';
107			audio.pause();
108		}
109	}
110
111	function audioVolume() {
112		if(audio.volume > 0) {
113			audio.volume = 0;
114			btnVolume.classList.remove('fa-volume-up');
115			btnVolume.classList.add('fa-volume-off');
116			volumeProgress.style.width = "0%";
117		}
118		else {
119			audio.volume = 0.7;
120			btnVolume.classList.remove('fa-volume-off');
121			btnVolume.classList.add('fa-volume-up');
122			volumeProgress.style.width = "70%";
123		}
124	}
125
126	//Eventos
127	timeline.addEventListener("click", function (event) {
128		updateTimeline(event);
129		audio.currentTime = duration * clickPercent(event);
130	}, false);
131	audio.addEventListener("timeupdate", uptadeTime, false);
132	audio.addEventListener("timeupdate", autoStop, false);
133	play.addEventListener('click', function(e) {
134		playAudio();
135	});
136	btnVolume.addEventListener('click',audioVolume,false);
137	volumeBar.addEventListener('click',function(event) {
138		updateAudio(event);
139	});
140});