https://1019.rocks/listen/script.js

1function $(id) { return document.getElementById(id); };
2const media = document.getElementById('audio');
3
4let ui = {
5  play: 'playAudio',
6  audio: 'audio',
7  percentage: 'percentage',
8  seekObj: 'seekObj',
9  currentTime: 'currentTime'
10};
11
12function togglePlay() {
13  if (media.paused === false) {
14    media.pause();
15	media.currentTime = 0.0;
16    $(ui.play).classList.remove('pause');
17  } else {
18    media.play();
19    $(ui.play).classList.add('pause');
20   
21  }
22}
23
24function calculatePercentPlayed() {
25  let percentage = (media.currentTime / media.duration).toFixed(2) * 100;
26  $(ui.percentage).style.width = `${percentage}%`;
27}
28
29function calculateCurrentValue(currentTime) {
30  const currentMinute = parseInt(currentTime / 60) % 60;
31  const currentSecondsLong = currentTime % 60;
32  const currentSeconds = currentSecondsLong.toFixed();
33  const currentTimeFormatted = `${currentMinute < 10 ? `0${currentMinute}` : currentMinute}:${
34  currentSeconds < 10 ? `0${currentSeconds}` : currentSeconds
35  }`;
36  
37  return currentTimeFormatted;
38}
39
40function initProgressBar() {
41  const currentTime = calculateCurrentValue(media.currentTime);
42  $(ui.currentTime).innerHTML = currentTime;
43  $(ui.seekObj).addEventListener('click', seek);
44
45  media.onended = () => {
46    $(ui.play).classList.remove('pause');
47    $(ui.percentage).style.width = 0;
48    $(ui.currentTime).innerHTML = '00:00';
49  };
50
51  function seek(e) {
52    const percent = e.offsetX / this.offsetWidth;
53    media.currentTime = percent * media.duration;
54  }
55  
56  calculatePercentPlayed();
57}
58
59$(ui.play).addEventListener('click', togglePlay)
60$(ui.audio).addEventListener('timeupdate', initProgressBar);