JSFiddle - React, Tailwind, and code Playground

by Сергей Тарасевич

HTML

<div class="track" data-track="1">
    <div data-btn="play"></div>
    <div class="track_info">трек 1</div>
</div>
<div class="track" data-track="2">
    <div data-btn="play"></div>
    <div class="track_info">трек 2</div>
</div>
<div class="track" data-track="3">
    <div data-btn="play"></div>
    <div class="track_info">трек 3</div>
</div>
<div class="track" data-track="4">
    <div data-btn="play"></div>
    <div class="track_info">трек 4</div>
</div>
<div class="track" data-track="5">
    <div data-btn="play"></div>
    <div class="track_info">трек 5</div>
</div>
<div class="track" data-track="6">
    <div data-btn="play"></div>
    <div class="track_info">трек 6</div>
</div>
<div class="track" data-track="7">
    <div data-btn="play"></div>
    <div class="track_info">трек 7</div>
</div>
<div class="track" data-track="8">
    <div data-btn="play"></div>
    <div class="track_info">трек 8</div>
</div>
<div class="track" data-track="9">
    <div data-btn="play"></div>
    <div class="track_info">трек 9</div>
</div>
<div class="track" data-track="10">
    <div data-btn="play"></div>
    <div class="track_info">трек 10</div>
</div>
<div class="track" data-track="11">
    <div data-btn="play"></div>
    <div class="track_info">трек 11</div>
</div>
<div class="track" data-track="12">
    <div data-btn="play"></div>
    <div class="track_info">трек 12</div>
</div>
<div class="track" data-track="13">
    <div data-btn="play"></div>
    <div class="track_info">трек 13</div>
</div>
<div class="track" data-track="14">
    <div data-btn="play"></div>
    <div class="track_info">трек 14</div>
</div>
<div class="track" data-track="15">
    <div data-btn="play"></div>
    <div class="track_info">трек 15</div>
</div>
<div class="track" data-track="16">
    <div data-btn="play"></div>
    <div class="track_info">трек 16</div>
</div>
<div class="track" data-track="17">
    <div data-btn="play"></div>
    <div class="track_info">трек 17</div>
</div>
<div class="track"...

CSS

body {
    font: normal 14px/20px"Trebuchet MS", sans-serif;
    padding: 0 0 71px;
    position: relative;
    margin: 0;
}
.track[data-track] {
    background: #EAEAEA;
    border: 1px solid #E0E0E0;
    margin: 5px 10px;
    padding: 5px 10px;
}
.track > div[data-btn="play"] {
    background: #BEBEBE url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAABEklEQVR42q2UPYvCQBCGJ37V/sRDBItrLASxU1CxFFTub5xa2XkI1v4E5fzCQtRG8PPeZWdhGdwjazLwkGxCnkxmZxJQzBGI9RwUwXdcwiczBjl+QSThlYUPXtdBFxzeFZ5Z9rCu/YIyGL4jPFnCJ99XJMEUFMDCR7gHdyFMMCmmBTquMkjhjoV3IUyyLM3HNSjRi26Qwg24WVkGQmaEGT7/AR9kdYMUrkjvtJEGlsjGCM3zNdBWZZDCJQsVF5GNlKW5HEeWVePIcEB6spyfHLaGW5AnPVGRdlk1/hdokCN8+nAEKuTZ2K8mRW3UJ5hQiPhvlpW8B5phRC6h+dv0SU/CwkcmhVkwI935Y1+RK8PI8QcAbl0V2ptnIwAAAABJRU5ErkJggg==');
    border: 1px solid #8E8E8E;
    cursor: pointer;
    display: inline-block;
    margin-right: 10px;
    vertical-align: middle;
    height: 20px;
    width: 20px;
}
.track > div[data-btn="play"]:hover {
    background: #E5E5E5 url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAABEklEQVR42q2UPYvCQBCGJ37V/sRDBItrLASxU1CxFFTub5xa2XkI1v4E5fzCQtRG8PPeZWdhGdwjazLwkGxCnkxmZxJQzBGI9RwUwXdcwiczBjl+QSThlYUPXtdBFxzeFZ5Z9rCu/YIyGL4jPFnCJ99XJMEUFMDCR7gHdyFMMCmmBTquMkjhjoV3IUyyLM3HNSjRi26Qwg24WVkGQmaEGT7/AR9kdYMUrkjvtJEGlsjGCM3zNdBWZZDCJQsVF5GNlKW5HEeWVePIcEB6spyfHLaGW5AnPVGRdlk1/hdokCN8+nAEKuTZ2K8mRW3UJ5hQiPhvlpW8B5phRC6h+dv0SU/CwkcmhVkwI935Y1+RK8PI8QcAbl0V2ptnIwAAAABJRU5ErkJggg==');
    border: 1px solid #C2C2C2;
}
.track > .track_info {
    display: inline-block;
    vertical-align: middle;
}
.player_form {
    background: #272727;
    border-top: 1px solid #373737;
    bottom: 0;
    display: block;
    left: 0;
    position: fixed;
    right: 0;
    height: 70px;
}
.player_form > div[data-progres="progres"] {
    background: #303030;
    border: 1px solid #222222;
    left: 10px;
    position: absolute;
    right: 10px;
    top: 5px;
    height: 13px;
}
.player_form >...

JavaScript

var data_track = 0,
    id_track_play = 0,
    status_player = 0, // 0 - стоп // 1 - играет // 2 - пауза
    $this = '',
    $form = '';


// Плеер 
$(document).on('click', '[data-btn]', function () {

    var btn = $(this).data('btn');

    if (btn == 'play') {

        $this = $(this);
        $form = $this.closest('[data-track]');
        data_track = $form.data('track');

    } else if (btn == 'player_play' && status_player != 1) {

        $form = $('[data-track]').first();
        data_track = $form.data('track');

        $('.player_ps').addClass('ps_pause').removeClass('ps_play');
        status_player = 1;

    } else if (btn == 'player_play' && status_player == 1) {

        $('.player_ps').addClass('ps_play').removeClass('ps_pause');
        status_player = 2;

    } else if (btn == 'player_prev' && status_player != 0) {

        $form = $('[data-track="' + id_track_play + '"]').prev('[data-track]');

        data_track = $form.data('track');

        $('.player_ps').addClass('ps_pause').removeClass('ps_play');
        status_player = 1;

    } else if (btn == 'player_next' && status_player != 0) {

        $form = $('[data-track="' + id_track_play + '"]').next('[data-track]');
        data_track = $form.data('track');

        $('.player_ps').addClass('ps_pause').removeClass('ps_play');
        status_player = 1;

    } else if (btn == 'player_stop' && status_player != 0) {

        data_track = 0;
        id_track_play = 0;

    }

    if (data_track || btn == 'player_stop') {
        id_track_play = data_track;
        alert(status_player);
    } else if (id_track_play != 0) {
        alert("авто подгрузка контента");
    }

});