https://jakin.eus/wp-content/themes/jakin/js/audio-player.js?ver=1.3.0

1jQuery(document).ready(function($) {
2
3    //let playState = 'play';
4    let muteState = 'unmute';
5
6    let playIconContainer = document.getElementById('play-icon');
7    let audioPlayerContainer = document.getElementById('audio-player-container');
8    let seekSlider = document.getElementById('seek-slider');
9
10    let audio = $("audio")[0];
11    let durationContainer = document.getElementById('duration');
12    let currentTimeContainer = document.getElementById('current-time');
13    let raf = null;
14    
15
16    $(".play-icon").click(function(event) {
17
18        let icon = event.target.tagName == 'I' ? event.target.parentElement : event.target;
19
20        audio = $(icon).parent().parent().find("audio")[0];
21        audioId = $(audio).parent().attr("data-post-id");
22        playIconContainer = icon;
23        durationContainer = $(audio).parent().find(".duration")[0];
24        currentTimeContainer = $(audio).parent().find(".current-time")[0];
25        audioPlayerContainer = $(audio).parent()[0];
26        seekSlider = $("#seek-slider-"+audioId)[0];
27        addSliderEventlisteners();
28
29        if ($(icon).find(":first-child").hasClass("bi-play-circle-fill")) {
30            stopAllAudios();
31            audio.play();
32            playIconContainer.innerHTML = '<i class="bi bi-pause-circle-fill "></i>';
33            requestAnimationFrame(whilePlaying);
34            //playState = 'pause';
35        } else {
36            audio.pause();
37            playIconContainer.innerHTML = '<i class="bi bi-play-circle-fill"></i>';
38            cancelAnimationFrame(raf);
39            //playState = 'play';
40        }
41    });
42
43    const stopAllAudios = () => {
44        $("audio").each(function(index, elem) {
45            elem.pause();
46            let playIcon = $(elem).parent().find(".play-icon")[0];
47            playIcon.innerHTML = '<i class="bi bi-play-circle-fill"></i>';
48            cancelAnimationFrame(raf);
49        })
50    }
51
52    const showRangeProgress = (rangeInput) => {
53        if(rangeInput === seekSlider) audioPlayerContainer.style.setProperty('--seek-before-width', rangeInput.value / rangeInput.max * 100 + '%');
54        else audioPlayerContainer.style.setProperty('--volume-before-width', rangeInput.value / rangeInput.max * 100 + '%');
55    }
56
57    /** Implementation of the functionality of the audio player */
58
59    
60
61    const calculateTime = (secs) => {
62        let minutes = Math.floor(secs / 60);
63        let seconds = Math.floor(secs % 60);
64        let returnedSeconds = seconds < 10 ? `0${seconds}` : `${seconds}`;
65        return `${minutes}:${returnedSeconds}`;
66    }
67
68    const displayDuration = (audio) => {
69        myDurationContainer = $(audio).parent().find(".duration")[0];
70        myDurationContainer.textContent = calculateTime(audio.duration);
71    }
72
73    const setSliderMax = (audio) => {
74        seekSlider = $(audio).closest(".seek-slider");
75        seekSlider.max = Math.floor(audio.duration);
76    }
77
78    const displayBufferedAmount = (audio) => {
79        try {
80            let bufferedAmount = Math.floor(audio.buffered.end(audio.buffered.length - 1));
81            audioPlayerContainer.style.setProperty('--buffered-width', `${(bufferedAmount / seekSlider.max) * 100}%`);    
82        } catch (error) {
83            console.log("error");
84        } 
85        
86    }
87
88    const whilePlaying = () => {
89        seekSlider.value = Math.floor(audio.currentTime);
90        currentTimeContainer.textContent = calculateTime(seekSlider.value);
91        audioPlayerContainer.style.setProperty('--seek-before-width', `${seekSlider.value / seekSlider.max * 100}%`);
92        raf = requestAnimationFrame(whilePlaying);
93    }
94
95    function sleep(ms) {
96    return new Promise(resolve => setTimeout(resolve, ms));
97}
98
99$("audio").each(function(index, elem) {
100     sleep(50); 
101
102    // Variables locales solo para UI inicial
103    let localSlider = $(elem).parent().find(".seek-slider")[0];
104    let localDuration = $(elem).parent().find(".duration")[0];
105    let localContainer = $(elem).parent()[0];
106
107    const updateUI = () => {
108        displayDuration(elem);  // usa elem, no la variable global
109        if(localSlider) localSlider.max = Math.floor(elem.duration);
110        try {
111            let bufferedAmount = Math.floor(elem.buffered.end(elem.buffered.length - 1));
112            localContainer.style.setProperty('--buffered-width', `${(bufferedAmount / localSlider.max) * 100}%`);
113        } catch (error) {
114            console.log("error");
115        }
116    }
117
118    if (elem.readyState > 0) {
119        updateUI();
120    } else {
121        elem.addEventListener('loadedmetadata', updateUI);
122    }
123
124    elem.addEventListener('progress', updateUI);
125});
126    
127
128    //audio.addEventListener('progress', displayBufferedAmount);
129    addSliderEventlisteners = function() {
130        seekSlider.addEventListener('input', () => {
131            currentTimeContainer.textContent = calculateTime(seekSlider.value);
132            if(!audio.paused) {
133                cancelAnimationFrame(raf);
134            }
135        });
136
137        seekSlider.addEventListener('change', () => {
138            audio.currentTime = seekSlider.value;
139            if(!audio.paused) {
140                requestAnimationFrame(whilePlaying);
141            }
142        });
143
144        seekSlider.addEventListener('input', (e) => {
145            showRangeProgress(e.target);
146        });
147    }
148    
149});