ololo

Подпись автора

[hide_in_profile]Ololo я водитель НЛО[/hide_in_profile][hide_in_posts]Повелительница помойки, создательница этого дикого дезигна и вообще страшная женщина[/hide_in_posts]

fff

Подпись автора

[hide_in_profile]Ololo я водитель НЛО[/hide_in_profile][hide_in_posts]Повелительница помойки, создательница этого дикого дезигна и вообще страшная женщина[/hide_in_posts]

fdfdfdf

Подпись автора

[hide_in_profile]Ololo я водитель НЛО[/hide_in_profile][hide_in_posts]Повелительница помойки, создательница этого дикого дезигна и вообще страшная женщина[/hide_in_posts]

dfdfdf

Подпись автора

[hide_in_profile]Ololo я водитель НЛО[/hide_in_profile][hide_in_posts]Повелительница помойки, создательница этого дикого дезигна и вообще страшная женщина[/hide_in_posts]

gggg

Подпись автора

[hide_in_profile]Ololo я водитель НЛО[/hide_in_profile][hide_in_posts]Повелительница помойки, создательница этого дикого дезигна и вообще страшная женщина[/hide_in_posts]

2

Подпись автора

[hide_in_profile]Ololo я водитель НЛО[/hide_in_profile][hide_in_posts]Повелительница помойки, создательница этого дикого дезигна и вообще страшная женщина[/hide_in_posts]

123

Подпись автора

[hide_in_profile]Ololo я водитель НЛО[/hide_in_profile][hide_in_posts]Повелительница помойки, создательница этого дикого дезигна и вообще страшная женщина[/hide_in_posts]

1234

Подпись автора

[hide_in_profile]Ololo я водитель НЛО[/hide_in_profile][hide_in_posts]Повелительница помойки, создательница этого дикого дезигна и вообще страшная женщина[/hide_in_posts]

[audio=https://download.cdn.yandex.net/tech/ru/audio/jsapi/doc/examples/files/audio_src/Tchaikovky1.mp3]Трек1[/audio][audio=https://download.cdn.yandex.net/tech/ru/audio/jsapi/doc/examples/files/audio_src/Tchaikovsky2.mp3]Трек2[/audio]

Подпись автора

[hide_in_profile]Ololo я водитель НЛО[/hide_in_profile][hide_in_posts]Повелительница помойки, создательница этого дикого дезигна и вообще страшная женщина[/hide_in_posts]

Что получится:
[html]
<div class='playerNode' data-tracks="https://forumstatic.ru/files/001b/b4/4f/80926.mp3<>https://forumstatic.ru/files/001b/b4/4f/87787.mp3<>https://forumstatic.ru/files/001b/b4/4f/24169.mp3"></div>
<style>
.player-wrapper{background: aliceblue;width: 750px; height: 40px;}
.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; width: 38px; height: 38px;padding: 0;}
.track, .volume{height: 100%; background: linear-gradient(0deg, transparent 0, transparent 50%, black 50%, transparent calc(50% + 1px), transparent); display: inline-block; margin-left: 10px; 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>
<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 = (tracks.length - 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]

Отредактировано Главбомж (2022-10-30 21:12:54)

Подпись автора

[hide_in_profile]Ololo я водитель НЛО[/hide_in_profile][hide_in_posts]Повелительница помойки, создательница этого дикого дезигна и вообще страшная женщина[/hide_in_posts]

Подпись автора

[hide_in_profile]Ololo я водитель НЛО[/hide_in_profile][hide_in_posts]Повелительница помойки, создательница этого дикого дезигна и вообще страшная женщина[/hide_in_posts]

456

Подпись автора

[hide_in_profile]Ololo я водитель НЛО[/hide_in_profile][hide_in_posts]Повелительница помойки, создательница этого дикого дезигна и вообще страшная женщина[/hide_in_posts]

~fff
...рандомный пост
Что делать, если тому, кто создавал разметку, было лень развешивать классы, а скрипты сами мы писать не умеем? Выход есть! Существует такая штука как general sibling selector.
Крайне синтетический пример применения:

...еще рандомный пост, кстати, более реальный

Подпись автора

[hide_in_profile]Ololo я водитель НЛО[/hide_in_profile][hide_in_posts]Повелительница помойки, создательница этого дикого дезигна и вообще страшная женщина[/hide_in_posts]

~fff
~fff
~fff
~fff
~fff
~fff
~fff
~fff
~fff

~fff

~fff

Подпись автора

[hide_in_profile]Ololo я водитель НЛО[/hide_in_profile][hide_in_posts]Повелительница помойки, создательница этого дикого дезигна и вообще страшная женщина[/hide_in_posts]