https://www.grammatip.de/js/pages/school/audioPlayer.js

1let audioPlayers = [];
2
3window.initAudioPlayers = function() {
4    init();
5}
6
7window.stopAllAudioPlayers = function() {
8    stopAll();
9}
10
11function init() {
12    audioPlayers = document.querySelectorAll('audio');
13
14    audioPlayers.forEach(audio => {
15        const progress = audio.parentNode.querySelector('.progress > .progress-bar');
16        if (progress) {
17            audio.addEventListener('timeupdate', () => {
18                const percent = audio.currentTime / audio.duration * 100;
19                if (percent === 100) {
20                    stop(audio.parentNode);
21                } else {
22                    progress.style.width = percent + '%';
23                }
24            });
25        }
26    });
27}
28
29function stopAll() {
30    audioPlayers.forEach(audio => {
31        stop(audio.parentNode);
32    });
33}
34
35function stop(audioContainer) {
36    const audio = audioContainer.querySelector('audio');
37    audio.pause();
38    audio.currentTime = 0;
39
40    const button = audioContainer.querySelector('button');
41    const playIcon = button.querySelector('i');
42    const stopIcon = button.querySelector('.stop-icon');
43
44    playIcon.style.display = 'block';
45    stopIcon.style.display = 'none';
46}
47
48function toggleAudio(button) {
49    const container = button.parentNode;
50    const audio = container.querySelector('audio');
51    const paused = audio.paused;
52
53    stopAll();
54
55    if (paused) {
56        audio.play();
57
58        const playIcon = button.querySelector('i');
59        const stopIcon = button.querySelector('.stop-icon');
60        playIcon.style.display = 'none';
61        stopIcon.style.display = 'block';
62    }
63}