[html]
<!-- ЧАСТЬ 1. Код кастомизированного плеера -->
<div class='playerNode' data-tracks="">https://forumstatic.ru/files/0011/4d/8c/10601.mp3</div>

<style> /*ЧАСТЬ 2. CSS-стили кастомизированного плеера*/
.player-wrapper{background: var(--grad);
    border: 1px solid #4e4e4e;
    width: 250px;
    height: 20px;
    border-radius: 30px;
    -webkit-border-radius: 30px;
    -khtml-border-radius: 30px;
    -moz-border-radius: 30px;
    -o-border-radius: 30px;}
.play-pause.paused{background: url(https://forumstatic.ru/files/001b/b4/4f/58193.svg) no-repeat; background-size: contain}
.play-pause{background: url(https://forumstatic.ru/files/001b/b4/4f/30007.svg?v=1) no-repeat;background-size: contain;border: 0;position: relative;top: 4px;width: 13px;height: 15px;}
.track, .volume{height: 10%;
    background: #00000054;
    display: inline-block;
    margin-left: 10px;
    top: -3px;
    position: relative;}
.track {
    width: calc(80% - 60px);
}
.volume {
    width: 20%;
}
.thumb {
    width: 8px;
    height: 8px;
    top: calc(50% - 4px);
    background: black;
    border-radius: 50%;
    position: absolute;
}
</style>

<!-- ЧАСТЬ 3. Кастомизируемый плеер. Скрипт -->
<script>
(() => {
    const selector = '.playerNode';
    const targets = document.querySelectorAll(selector);
    targets.forEach((target) => {
        const tracks = target.dataset.tracks?.split('<>').filter(Boolean);
        const audio = document.createElement('audio');
        audio.src = tracks[0];
        let index = 0;
        const getNext = () => {
            index = (index + 1) % tracks.length; // Исправленная формула для выбора следующего трека
            return index;
        };
        audio.addEventListener('ended', function() {
            audio.src = tracks[getNext()];
            audio.pause();
            audio.load();
            audio.play();
        });

        audio.addEventListener('timeupdate', function() {
            const part = audio.currentTime / audio.duration || 0;
            track.querySelector('.thumb').style.left = (part * 100).toFixed(2) + '%';
        });
        const play = document.createElement('button');
        play.classList.add('play-pause');
        play.classList.add('paused');
        play.addEventListener('click', () => {
            if (play.classList.contains('paused')) {
                audio.play();
                play.classList.remove('paused');
            } else {
                audio.pause();
                play.classList.add('paused');
            }
        })
        const track = document.createElement('div');
        const thumb = document.createElement('div');
        track.classList.add('track');
        thumb.classList.add('thumb');
        track.append(thumb);
        track.addEventListener('click', (evt) => {
            const part = evt.offsetX / track.offsetWidth;
            audio.currentTime = part * audio.duration;
            thumb.style.left = (part * 100).toFixed(2) + '%';
        })

        const volume = document.createElement('div');
        const volumeThumb = document.createElement('div');
        volumeThumb.classList.add('thumb');
        volume.classList.add('volume');
        volume.append(volumeThumb);
        volumeThumb.style.left = 'calc(100% - 8px)';
        volume.addEventListener('click', (evt) => {
            const part = evt.offsetX / volume.offsetWidth;
            audio.volume = part.toFixed(2);
            volumeThumb.style.left = (part * 100).toFixed(2) + '%';
        });
        const wrapper = document.createElement('div');
        wrapper.classList.add('player-wrapper');
        wrapper.append(audio, play, track, volume);
        target.append(wrapper);
    })
})();
</script>
[/html]