Radio

function getCookie2(e) {
    var t, a, i, o = document.cookie.split(";");
    for (t = 0; t < o.length; t++)
        if (a = o[t].substr(0, o[t].indexOf("=")),
        i = o[t].substr(o[t].indexOf("=") + 1),
        a = a.replace(/^\s+|\s+$/g, ""),
        a == e)
            return unescape(i)
}
function initRadioCookie() {
    function e() {
        "true" == a && i && o ? ($(".player-button").data("status", "play"),
        $(".player-button").find("img").attr("src", "/upload/img/pause-btn.svg"),
        t.currentTime = i,
        t.play(),
        o = !1) : setCookie2("timePlayed", t.currentTime)
    }
    var t = document.getElementById("radio-player")
      , a = getCookie2("playing")
      , i = getCookie2("timePlayed")
      , o = !0;
    setInterval(e, 1e3)
}
function radioHandle() {
    "pause" === $(this).data("status") ? (document.getElementById("radio-player").play(),
    $(".player-button").data("status", "play"),
    $(".player-button").find("img").attr("src", "/upload/img/pause-btn.svg"),
    setCookie2("playing", !0)) : (document.getElementById("radio-player").pause(),
    $(".player-button").data("status", "pause"),
    $(".player-button").find("img").attr("src", "/upload/img/play-btn.svg"),
    setCookie2("playing", !1))
}
function radioTrueRandomTrack(e) {
    var t = Math.ceil(20 * Math.random());
    getCookie2("trackNumber") ? $("#radio-player").html('<source src="/upload/records/' + getCookie2("trackNumber") + '.mp3">') : ($("#radio-player").html('<source src="/upload/records/' + t + '.mp3">'),
    setCookie2("trackNumber", t))
}

radioTrueRandomTrack(),
    initRadioCookie(),
    $(".player-button").on("click", radioHandle)

<div class="modal fade my-modal--radio in" id="radio" tabindex="-1" role="dialog" style="display: block; padding-right: 17px;" aria-hidden="false">
    <div class="modal__dialog" role="document">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
        <div class="modal__content">
            <div class="modal__header">
                <h4 class="modal__title padding-bottom">Радио «Теремъ»</h4>
                <p>Музыка, юмор, эпизоды загородного отдыха и факты из жизни компании.<br>Круглосуточно.</p>
            </div>
            <div class="modal__body">
                <button class="player-button" data-status="pause"><img src="//opt-279195.ssl.1c-bitrix-cdn.ru/upload/img/play-btn.svg?1502263182418" alt=""></button>
                <p>Приятного прослушивания!</p>
            </div>
        </div>
        <div class="modal__footer">
            <audio id="radio-player" loop="true" autobuffer=""><source src="/upload/records/11.mp3"></audio>
        </div>
    </div>
</div>

.my-modal--radio .modal__dialog {
    position: relative;
    background-color: #EDEEED;
    width: 420px;
    margin: 0 auto;
    padding: 20px;
}

.my-modal--radio .modal__dialog .close {
    font-size: 35px;
    font-family: Roboto;
    font-weight: 100;
    position: absolute;
    top: 4px;
    right: 12px;
}
.my-modal--radio .modal__content {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    padding: 0 30px;
    text-align: center;
}
.my-modal--radio .modal__title, .my-modal-advice h4, .my-modal-call h4 {
    font-size: 32px;
    text-transform: uppercase;
}
.my-modal--radio .modal__body .player-button {
    position: relative;
    width: 140px;
    height: 140px;
    border: none;
    border-radius: 50%;
    background-color: #E4E2E4;
    margin: 30px 0;
}
.my-modal--radio .modal__body .player-button img {
    position: absolute;
    width: auto;
    height: 50px;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
}
.my-modal--radio .modal__footer {
    display: none;
}